1.CSS简介
-
层叠样式表（Cascading Style Sheets）
- 定义了如何显示HTML元素
- 样式通常存储在样式表中
- 解决内容与样式的分离
- 可以提高工作的效率
样式层叠次序
- 浏览器缺省设置
- 外部样式表<link>
- 内部样式表<head>标签内部
- 内联样式<HTML>内部
2.CSS语法
CSS规则由两个部分组成：选择器和一条或者多条声明：
h1{color:blue;font-size:12px;}
选择器属性值
CSS颜色值得设定
color：#FF0000；
color：#F00；
color:rgb(255,0,0);
color：rgb(100%,0，0);
CSS注释：
/* 内容*/
ID选择器和类选择器
ID属性不要以数字开头，ID属性只能在HTML文档中出现一次。
#para{text-align:center;}
类选择不要以数字开头，可以在多个元素中使用。
.para{text-align:center;}
3.CSS创建
插入样式表的方法
- 外部样式表
- 内部样式表
- 内联样式
外部样式表
<head>
<link href="mystyle.css" type="text/css" rel="sytlesheet">
</head>
内部样式表
<head> <style> hr{color:red;} </style>
</head>
内联样式表
<p style="color:red">这是一个段落</p>
多重样式
外部样式表 h2{ coloe:red; text-align:left ; } 内部样式表 h2{ text-align:right ; } 得到的样式 h2{ coloe:red; text-align:right ; }
层叠次序
- 浏览器缺省设置
- 外部样式表<link>
- 内部样式表<head>标签内部
- 内联样式<HTML>内部
优先级
分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类的数值决定。
权重计算
内联样式1000+ID选择器100+类选择器10+元素选择器1；
<html> <head> <style type="text/css"> #redP p{ /*权值=100+1=101*/ color：red;/*红色*/ } #redP.red em{ /*权值=100+10+1=111*/ color：blue;/*蓝色*/ } #redP p span em{ /*权值=100+1+1+1=103*/ color：yellow;/*黄色*/ } </style> </head> <body> <div id="redP"> <p class="red">red<span><em> em red</em></span></p> <p>red</p> </div> </body> </html>
优先级选择器列表
- 通用选择器（*）
- 元素（类型）选择器
- 类选择器
- 属性选择器
- 伪类
- ID选择器
- 内联样式
优先级法则
- 选择器都有一个权值吗，权值越大越有优先；
- 权值相等时，后出现的样式设置优先于先出现的样式
- 创作者的优先级高于浏览着：网页编写者设置的样式高于浏览器设置的样式。
- 继承的样式不如后来指定的样式
- 在同一组中设有“!important”规则优先级最大（一般情况下不会用到）
4.CSS背景属性
- background-color 设置元素的背景颜色
- background-image 吧图像设置为背景 //默认是平铺重复显示
- background-repeat 设置图像是否重复 //水平或者是垂直平铺 repeat-x水平repeat-y垂直no-repeat不平铺
- background-attachement 背景图像是否固定还是随着页面的其余部分滚动
- background-position 设置背景图像的起始位置
- 按照以上顺序进行设置
div{ background-color:red; background-image:url(‘paper.gif‘) ; background-repeat:repaet-x;/*no-repeat;repeat-y;repaet-x 不平铺;垂直平铺;水平平铺*/ background-position:top right;/*右上角*/
/*background：red url(‘paper.gif‘) repeat-x top right;*/
}
background-position
关键字：top，bottom，right，center，left 百分数值：50% 50% 长度值：50px 100px （相对于左上角的位置）
单一关键子 等价关键字
top top center或center top
center center center
right right center或center right
left left center或center left、
bottom bottom center或center bottom
5.CSS 文字属性
- 文本颜色 color
- 文本对齐方式 text-align
- 文本修饰 text-decoration
- 文本准换 text-transform
- 文本缩进 text-indent
- 文本间隔 word-spacing
.div{ color:red;/*#FF0000,rgb(255,0,0),#F00,rgb(100%,0,0)*/ text-align: right;/*left,center,justify*/ text-decoration: overline ;/*line-through,underline*/ text-transform: uppercase;/*lowercase*/ text-indent: 50px; word-spacing: 30px; letter-spacing: 3px; line-height: 70%; direction:; }
