层叠样式表 (Cascading Style Sheets,缩写为 CSS), 是一种 样式表 语言,用来描述 HTML 或 XML(包含如 SVG、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒介上的元素应该怎样被渲染的问题。
CSS的构成属性(Propertie):一些人类可理解的标识符,这些标识符指出你想修改哪有些样式,例如:字体,宽度,背景颜色等。属性值(Value):每一个指定的属性都必须给定一个值,这个值暗示你想把哪些样式特征修改成什么样,例如,你想把字体,宽度或背景颜色改成什么 color:red;
CSS的声明
声明按块分组,每一组声明都用一对大括号包裹,用 ({) 起始,用 (}) 结束。
声明块里的每一个声明必要用半角分号(;)分隔,否则代码会不生效(最少不会按预期结果生效)。声明块里的最后一个声明结束的地区,不必须加分号,然则最后加分号是个好习惯,由于能够防止在后续增多声明时忘记加分号。
CSS选取器
只声明CSS还是无功效的,必须指定它的功效域,这时候就用到选取器了。 类选取器 经过设置HTML标签的class属性,能够为标签设置class类名,类名由研发者自己决定,文档中的多个元素能够持有相同的类名。
<div class="user">第1个DIV</div>
<div class="user">第二个DIV</div>
<div class="user">第三个DIV</div>
.user{
border:1px solid red;
}
ID选取器 经过设置HTML标签的id属性,能够为标签设置Id,Id由研发者自己决定,文档中的Id是独一的,不可重复。
<div class="user" id="user1">第1个DIV</div>
<br>
<div class="user" id="user2">第二个DIV</div>
<br>
<div class="user" id="user3">第三个DIV</div>
#user1{
border:1px solid red;
}
#user2{
border:1px solid gray;
}
#user3{
border:1px solid green;
}
伪类选取器 CSS伪类(pseudo-class)是加在选取器后面的用来指定元素状态的重要字。例如,:hover 会在鼠标悬停在选中元素上时应用相应的样式。
#user1{
border:1px solid red;
}
#user2{
border:1px solid gray;
}
#user3{
border:1px solid green;
}
#user3:hover{
border:1px solid blue;
}
伪类列表:link:visited:active:hover:focus:first-child :nth-child :nth-last-child:nth-of-type :first-of-type:last-of-type :empty :target :checked :enabled :disabled
创建CSS
常用的方式有三种 外边样式表 运用link标签引入,link标签在head中。
内部样式表 能够运用 style 标签在文档头部定义内部样式表
内联方式便是在HTML的标签中运用style属性来设置css样式
她们的优先级:当样式冲突时,便是采用就近原则,是值css属性离被修饰的内容近期的为主。
若无样式冲突则采用叠加效果
|