css的优点:
①提高页面浏览速度
②缩短改版时间,降低维护费用
③更好的控制页面布局
④实现表现和结构、内容想分离
⑤更方便搜做引擎的
一、.在HTML中插入CSS
①外部样式表
<head>
<link rel="stylesheet" type="text/css" href=样式表的URL“ />
</head>
注:虽然外部样式表可以使用任何有效的文件名,但是推荐使用.css作为外部样式表文件的扩展名,以方便识别文件内容。
②嵌入式样式表
嵌入式样式表是用<style>元素将样式包含在网页内部的样式设置,其作用范围仅限于该网页,在<style>标签的两个标记之间的任何代码都被看作为样式定义
格式:
<style type="text/css">
....样式定义......
</style>
③内嵌式样式表
大多数的HTML标记都含有一个style属性,允许指定在标记显示的样式,这种样式规则的定义方式成为内嵌样式
<h1 style="color:red;">红色标题列</h1>
二、CSS规则
1.语法
①声明分组
在一个声明块内,可以有多个声明,每个声明必须以分号隔开。例如:
p { padding :5px; magin : 1px}
②选择器分组
功能:用于指定样式规则影响的网页元素。当几个选择器共享共同的声明时,可以分组放在一起,避免重复,每个选择器必须以逗号分隔开。例如:
h1, h2, h3, h4{padding: lem;}
#mian p,#main ul{padding-top: lem; }
③CSS注释
以/*开始,以*/结束。作用域:任何地方
2.文档树
3.选择器
①元素选择器p{}:最常见、最易理解、匹配网页上的任何HTML元素
em {color:blue;}
②类选择器.class
目标:一个元素的每个实例,类选择器可以被用于选择有某个class属性的仍然HTML元素,不考虑它们在文档树中的任何位置。格式为:
.类名 {属性:值;}
③ID选择器#id{}
与类选择器类似,它可以被用于选择有某个ID属性的任何HTML元素,不考虑它们在文档树中的任何位置。格式为:
#id名 {属性: 值;}
例如:
#navigation {width: 30px; color: #333;}
④包含选择器div p{ }
用于选择在文档树中的一个元素的后代元素,例如:
<body>
<h1>Heading <em>here</em></h1>
<p>Lorem ipsum dolor<em>sit</em> amet.</p>
</body>
⑤通配符选择器*{ }
通配符选择器用于选择所有的元素。例如,下面的样式规则会将页面上所有的HTML元素格式化为蓝色,不管这些元素在文档树的哪个位置:
* { color : blue;}
⑥伪类选择器
a:link 未被访问前
a: visited 访问后
a:hover 光标放在其上
a:active获取焦点(被点击)
2.选择器的选择
①是否重复使用{是否用类选择器 ; 是否用id选择器}
②组合选择器<p class="red big> font </p>
③id选择器比类下选择器更具体
三、格式化内容
1.属性单位:
①相对长度px:px是相对于浏览者的计算机屏幕分辨率来显示的
(大多数的网页制作图片为72px,即每英寸像素为:72,一英寸=2.54cm,一厘米=28像素,15*15的图片=142*420的像素图像)
em :Ems: 当前字母中M字母的宽度
ex:Exes: 当前字母中X字母的高度
②颜色:
用户十六进制数组定义颜色,如:#fc0eab;
用0-255之间的整数值来设置,如color:rgb(128,0,128)
blue,red
③URL
具体格式:在“url”后紧跟一个括号,括号中是URL的地址,如果在地址中使用了括号、逗号、空格、单引号和双引号,那么就必须在整个地址的外面加上一对单引号或者双引号。地址可以是相对地址或绝对地址。
2.字体
①字体Font-family
可以定义多个字体,用逗号隔开,如果是多个字符,则用双引号组合
例如:
body {font-family: verdana, "Courier New", Symbol , serif;}
②字重Font-weight
默认为normal 400
还有blod 700、bloder、lighter
900是最重的字
③大小Font-size
描述字体的大小
属性值为:绝对大小、相对大小、长度、百分比、
large,150%, 1.5em
3.文本属性
①横向对齐Text-align
可选属性值:left、right、center,向左对齐、向右对齐、居中对齐
②文本修饰text-decoration
可选属性值:none(默认)、underline下划线、overline上划线、line-through删除线、blink闪烁
③设置行高line-height
它可以是数字(字体大小的倍数)、长度、百分比和normal
4.字体颜色和背景
文本颜色color
背景颜色background-color
背景图片background-image
背景图片重复background-repeat (repeat、no-repeat、repeat-x、repeat-y)
四、样式继承
margin、padding、border、background不被继承
font-size被计算时继承与子元素
五、样式折叠
Step1:找到选择器匹配特定元素的所有声明
Step2:根据样式声明的重要性和来源进行优先级排序
Step3:按照特殊性排序
Step4:比较CSS顺序