第四章 css的基本规则。
以前都会用,只是稀里糊涂。照着书里,来理论一下吧。
- 基本的写法如图:
多属性写到一块用;号隔开。
p{color:red;font-size:14px;}
- 选择符
- 类型选择符(Type Selector),html文档中的元素
- 类选择符(Class Selector),以“.”开头后面的名字可以自己定义如:.warn{color:red}
- id选择符(Id Selector),以“#”开头
- 包含选择符(Descendant Selector),E1 E2{color:red},E1中的E2,颜色为红色。E1,E2可以使类选择符,id选择符,或者包含选择符
- id选择符和类选择符的区别:
类选择符可以重复使用,而id选择符一个页面只能使用一次,因为id在html页面中id是唯一的。
id选择符的优先级别高于类选择符。 - 分组:将相同的定义应用于多个选择符,可以用“,”隔开。
p,div,.warning{font-size:12px}
- 通配选择符*:选定文档目录树(DOM)中的所有类型的单一对象,为所有的元素定义同意的属性,如:
*{margin:0;}/*若不定义则选用默认值。*/
- 伪类和伪元素
伪类(Pseudo-Class Reference):让页面呈现丰富表现力的好东西,之所以是伪,是因为在页面中并不存在,它们指定的是元素的某种状态
伪元素:与伪类类似,也是对文档中不实际存在的元素进行定义。a:link 未访问链接状态 a:visited 已经访问链接状态 a:hover 鼠标停在链接上的状态 a:active 鼠标点击与释放之间的状态
:first-letter 设置元素内的第一个字符的样式表属性 :first_line 设置元素内的第一行的样式表属性 :before 设置在元素前发生的内容(相对于DOM结构) :after 设置在元素后发生的内容(相对于DOM结构) - 注释
/*这就是注释*/ html{font-size:12px}/*设置html内的文字大小*/
- HTML结构
如下是一个典型的html文件:
HTML为根元素,下图为具体的树形结构。<html> <head> <meta http-equiv="Content-Type" content="text/html";charset="gb2312"/> <title>文档结构</title> </head> <body> <h1>CSS规则</h1> <p>样式表由一些<strong>样式规则</strong>组成</p> <ul> <li>选择符 <ul> <li>类选择符</li> <li>ID择符</li> <li><em>包含</em>择符</li> </ul> </li> <li>属性</li> <li>值</li> </ul> </body> </html>
- 继承
CSS的一个主要特征是继承,继承历来与上面的结构关系,它允许样式不仅应用于某个特定元素,同时也应用于其后代。但是又的属性是不能够继承的,如:
边框(border),边界(margin),填充(padding)和背景(background)等table中的td也不会继承body的属性 - 特殊性,规定了不同规则的权重,例如有以下定义:
所以应该为id选择器的颜色,因为id选择器的特殊性最高.warning{color:red}/*特殊性为:1*/ p{color:blue}/*特殊性为:10*/ #ccc{color:black}/*特殊性为:100*/ <p class="warning">特殊性</p>
- 层叠(Cascading)
由于可以有多样式表存在,当有相同特殊性的规则应用在同意元素的时候,根据这些规则的前后顺序来确定权重。后定义的规则会被应用p{color:red} p{color:blue} <p>颜色应该为blue,后面出现的权重更高</p>
- 元素分类
- 块级元素(display:block)
每个块级元素都从一个新行开始,而其后的元素也需要另起一行开始。标题,段落,表格,层,body都是块级元素,块级元素只能作为其他块级元素的子元素。 - 内联元素(display:inline)
内联元素不需要在新行内显示,而且也不强迫其后的元素换行。a,em,span均为内联元素,内联元素可以为其他任何元素的子元素。 - 列表元素(display:list-item)
HTML中只有li元素默认是此类型。 - 隐藏元素(display:none)
浏览器会忽略掉这个元素,页面上不被显示也不占地方。
- 块级元素(display:block)
- 颜色
名称 写法 种类 命名颜色 p{color:red}
只有16种颜色 RGB颜色 如: p{color:rgb(132,20,180);} p{color:rgb(12%,15%,50%);
值可以是0-255中的整数,也可以使0-100%的百分数 16进制颜色 p{color:#101010}
值00-ff,用#开头,必须为两位,1前必须补0 - 长度
- 绝对单位
英寸(in),厘米(cm),磅(pt),pica(pc) - 相对单位
元素的字体高度(em),字母x的高度(ex)和像素(px)
em是本身元素给定的值。如果font-size:12pt,那么1em=12pt,如果当前元素没有给定值,则选择父类的给定值。
ex是元素中x字母的大小(略过)
px是根据显示器实际分辨率下,一个小点的大小。 - 百分比
用%表示。
- 绝对单位