WEBBASE篇： 第三篇， CSS知识1
第三篇， CSS知识1
一，CSS 介绍
CSS： Cascading Style Sheets ---样式表
HTML： 搭建网页结构；
CSS： 在网页结构基础上进行网页的美化；
二，CSS的使用方法；
1，内联方式： 将css内容定义在单独的HTML元素中；
语法： <ANY style='样式声明'>
样式声明：（1）每个样式声明都是由样式属性名称和样式属性值来组成的；（2）属性名称和属性值之间使用 ： 连接（属性名：值）；（3）在一个style中允许出现多个样式声明， 多个样式声明之间使用；分号来分割。 <ANY style='属性1：值； 属性2：值2；属性3：值；'>
常用的属性和值：
（1）文字大小：
属性： font-size ;
取值： 以px为单位的数值；
eg：设置某div的文字大小为24px
<div> style='font-size:24px;'</div>
（2）文本颜色
属性：color
取值：表示颜色的英文单词；
（3）背景颜色
属性： background-color
取值： 表示颜色的英文单词；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> 样式规则1 样式规则2 样式规则3 .... 样式规则n </style> </head> <body> <div style='font-size:24px;color:red;background-color:yellow'>天长地久 </div> </body> </html>
2，内部样式表；
作用： 让定义好的样式适用在多个元素中；
语法：
<head>
<style>
div{
样式规则1
样式规则2
样式规则3
....
样式规则n
}
</style>
</head>
样式规则： 由 选择器 和 样式声明 组成；
选择器：规范了页面中哪些元素能够使用声明好的样式；
选择器{
样式声明1；
样式声明2；
}
eg： div{
font-size:24px;
}
p{
color:blue;
}
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*设置页面中所有div的样式*/ div{ font-size:35px; color:red; background-color:yellow; } </style> </head> <body> <div style='font-size:24px;color:red;background-color:yellow'>天长地久 </div> <div>天长地久</div> <div>天长地久有时尽，此恨绵绵无绝期</div> </body> </html>
3，外部样式表
作用：让声明好的样式能够适应在多个网页中；
（1）将样式规则声明在独立的css文件中（xxx.css）；
（2）在使用的网页上对xxx.css 文件进行引用；
<head>
<link rel='' stylesheet'' href="css文件路径">
</head>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*设置页面中所有div的样式*/ div{ font-size:35px; color:red; background-color:yellow; } </style> <!-- 引入外部样式表 --> <link rel="stylesheet" href="test1.css"> </head> <body> <div style='font-size:24px;color:red;background-color:yellow'>天长地久 </div> <div>天长地久</div> <div>天长地久有时尽，此恨绵绵无绝期</div> <br><br><br><br> <p>静夜思</p> <p>李白</p> <p>床前明月光</p> <p>疑是地上霜</p> </body> </html>
三， CSS样式表的特征
1，继承性；
大部分的css属性是可以由父元素继承给子元素的
2，层叠性；
允许为一个元素定义多种使用方法（内联，内部样式表，外部样式表）。如果定义的属性不冲突的话，那么所有的属性都可以应用到元素上；
3，优先级；
如果样式属性声明冲突的话，则按照不同的优先级来应用样式；
浏览器缺省设置： 低
内部或外部样式表 （就近原则：后定义着优先）： 中
内联方式 ： 高
调错：
1，Unknown property name ： 样式属性名称写错了；
2， Invalid property value： 样式属性值写错 了；
四， CSS选择器（重难点）
1，选择器的作用： 规范了页面中哪些元素能够使用声明样式；
目的：为了匹配页面中的元素；
2，选择器详解；
（1）元素选择器
特点：由元素名称作为选择器，目的是为了匹配页面中指定元素名称的所有标记；
语法：元素名{
... ...
}
eg： div{ ... } /*匹配页面中所有的div*/
span{ ... } /*匹配页面中所有的span元素*/
h1{ ... } /*匹配页面中所有的h1元素*/
（2）类选择器
特点：允许被页面上任意一个元素所引用
语法： .类名{ ... }
eg: 1、.redColor{color:red;}
2、.top{font-size:24px;}
类名： 字母，数字，下划线(_),- 组成； 数字不能开头；
引用类选择器： <ANY class="类名">
eg:1、<div class="redColor"></div>
特殊用法：
1、分类选择器的定义方式
特点：允许将元素选择器和类选择器结合到一起使用，目的是为了实现对某种元素不同样式的细分控制
语法： 元素选择器.类选择器{
... ...
}
eg: div.redBack{ color:red; } ； 匹配：class为redBack的div元素
2、多类选择器的引用方式
让一个元素引用多个类选择器，多个类选择器名称间用 空格 隔开
语法： <ANY class="sel1 sel2 sel3">
（3） id选择器 ：
id ： 在HTML中每个元素都可以声明一个独一无二的值；
语法： #ID值 { }
eg： #main{ /*匹配ID为main的元素*/ }
（4）群组选择器
语法： 以，（逗号）隔开的选择器列表；
选择器1，选择器2，选择器3，....{ }
（5）后代选择器
不限制层级关系的内部元素们；（父，与，子孙）
语法： 选择器1 选择器2{ }
（6）子代选择器
只有一层层级关系的内部元素；（父，与 子）
语法：选择器1 > 选择器2 { }
#main>div.top span{}
（7）伪类选择器
匹配元素不同的状态
a，链接伪类：（1） ：link{ } （2）：visited{}
b，动态伪类； （1） ：hover{ } （2）：active{ } （3） ：focus{ }匹配元素获取焦点时的样式；
选择器优先级：
选择器的优先级看权值；
选择器 权值
元素选择器 1
类/伪类 10
ID选择器 100
内联方式 1000
注：复杂的选择器， 权值进行累加计算；
五， 尺寸 与 边框
1，CSS单位
尺寸单位：（1）px 像素 （2）% （3） in 英寸 lin = 2.54cm
