html基础 样式

html样式:本文演示如何在head中添加样式信息使文本格式化

<html>
<head>
<style type="Text/css">
h1 {color:red}
p  {color:grey}
</style>
</head>

<body>
<h1>我是红色的head</h1>
<p>我是灰色的paragraph<p>
</body>
</html>

运行效果:

没有下划线的链接:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>

<body>

<a href="http://www.baidu.com" style="text-decoration:none">
这是一个无下划线链接!
</ a>

</body>
</html>

说明:1.通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。是网页Html语言里Head区重要标签之一。2.HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,常见的http-equiv类型有:content-type和content-language(显示字符集的设定,编码类型和语言)。3.charset:字符集编码(gb2312指的是简体中文)。4.zh-cn:简体中文。5.text-decoration:none表示css文字修饰为无,一般用于清除链接的下划线。

运行结果:

连接到外部样式表

<html>

<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>

<body>
<h1>我通过外部样式表进行格式化。</h1>
<p>我也一样!</p>
</body>

</html>

外部样式表:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

内部样式表:当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

内联样式:当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

运行效果:

时间: 2024-08-02 18:53:25

html基础 样式的相关文章

bootstrap-导航(基础样式)

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>导航(基础样式)</title>     <!-- 最新版本的 Bo

原创:新手布局福音!微信小程序使用flex的一些基础样式属性

来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能使用不同以往的居中方式并减少css的相关样式声明. 先来看看关于flex的一张图: 从上面可以看到一些flexbox的相关信息, main axis 和 cross axis 指的是flexbox内部flex项目(flex item)的排列方向,通俗点说就是,里面的flex项目是按照横轴或者纵轴排列的顺

标准基础样式表 style.css(mobile)【原】 2016-08-21

适用于大部分移动端网站的基础样式,从reset.css和normalize.css中提取的,再根据实际情况加减了一些样式,简洁实用. @charset "utf-8"; /****************************** Normalize ******************************/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, ul, ol, li, dl, dd, input, button, te

标准基础样式表 style.css【原】 2016-08-21

适用于大部分pc网站的基础样式,从reset.css和normalize.css中提取的,再根据实际情况加减了一些样式,简洁实用. @charset "utf-8"; /****************************** Normalize ******************************/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, ul, ol, li, dl, dd, input, button, tex

css基础样式重置,浏览器样式统一及IE下样式优化

/*样式重置*/ body,dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;} ul,ol{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{font-weight:400;} input:focus,button:focus{outline:none;} a:focus{outline:none;} /*基础样式*/ body{font-family:"Microsoft Yahei";color:#000;font-siz

CSS基础样式

1.基础样式 宽:width :高:height 块级元素和行内元素之间的转换 属性:display<br> 属性值: block 转换为块级元素 inline 转换为行内元素 inline-block 转换为行内块元素(希望能设置宽高,但又不换行) 2. 背景属性 背景色:background-color 背景图像:background-image:url("图片地址") 例:body{ backgroud-image:url("pic1.jpg")

jQuery基础——样式篇

jQuery基础--样式篇 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别 在于 2.x 不再兼容 IE6.7.8 为移动端而优化,由于减少了一些代码,使得该版本比 jQuery 1.x 更小且更快. 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了. $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正

Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容

1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模板</title></head><body></body></html> 2.DOCTYPE声明放在html文件头部最新HTML5用<!DOCTYPE html>声明 3.css的引入方式a.直接在html下引入<st

基础样式设置

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS基础 热身课练习</title> <style> * { margin: 0; padding: 0; } body { position: relative; } p { padding: 20px; margin-right: 20px;

css概述、css样式表分类、选择器分类、css基础样式

1 . 样式表  Cascading Style Sheet css优势: 内容与表现分离 网页的表现统一,容易修改 丰富的样式,使网页布局更加灵活 减少网页代码量,增加网页的浏览速度,节省网络带宽 使用独立于网页的CSS,有利于网页被搜索引擎收录 嵌入ID>外部ID>嵌入class>外部class>嵌入标签>外部标签     1.1  引入方式 四种 style=""  行内样式表 <style>   内部样式表 <link rel=&