1、 CSS为文档定义了一个样式显示规则,一个样式规则由两部分组成:选择器和样式声明。
比如:h1{color:red;},文档中的所有<h1>标签都应用这个样式规则(声明此样式在<head>标签中定义,而且没有为<h1>定义内联样式)
2、CSS选择器:类型选择器,类选择器,ID选择器
类型选择器基于元素的选择器()
比如:div h1{color:red;},div内的所有h1标签都应用这个样式规则(声明此样式在<head>标签中定义,而且没有为<h1>定义内联样式)
类选择器
通过定义与元素无关的样式类来设置样式,比如 .loud{color:red;} .ms{width:20px;},html元素用class关键字来引用这个样式(该元素没有定义内联样式),如:<div class="loud"></div>当然一个元素可以运用多个样式<div class="loud ms"></div>(通过组合样式类定义元素的显示)
也可以混合样式类基于元素的规定来定义元素的显示,当然,此时是为了定义一个仅仅针对特定标签类型的样式类。如div.color{color:red},甚至可以与父子关系的选择器联合使用,如 div.color span.width{color:red;width:34px;},这个标签仅仅会用在设置了color样式类的<div>标签嵌套的,设置了width样式类的<span>标签。
ID选择器
每一个html元素都有一个唯一的id来表示该元素,通过设置元素的id属性来定义元素的显示,这样的做法通常是用于一个页面上特定的标签。如:#ddd{color:red},一个页面上只有一个特定的标签能运用此样式。
3、插入样式表
外部引用样式表
<link href="css.css" rel="stylesheet" type="text/css"/>引用了外部名为css的样式表
内部样式表
在<head>标签中定义
<style type="type/css">div{color:red}</style>
内联样式表
<div style="height:20px'">
注意:当页面中只引入外部样式表时,以外部样式表为准
页面中有外部样式表和内部样式表时,首先内部样式表会继承外部样式表,其次当其中对页面中一个元素都有定义时,以内部样式表为准。(使用的是一种靠内的原则)
页面中三种都有时,同样内联样式表会继承外部样式表和内部样式表,其次当其中对页面中一个元素都有定义时,以内联样式表为准。(使用的是一种靠内的原则)