CSS的基本内容

一、css概念及特点

css——cascading style sheet（层叠样式表）

作用：规定html元素如何在网页中显示

特点：实现了结构与表现相分离（可维护性更高）

二、css语法

选择器{属性:属性值;}

eg:  h1{color:red;}

三、样式表的创建

1.行内样式（内联样式）

eg: <h1 style="color:red;">hello</h1>

2.内部样式（嵌入式样式）

eg: <style type="text/css">
    h1{color:red;}
    </style>

注：建议将style标签放在head部分

3.外部样式表

首先创建一个后缀名为.css的外部文件，然后在html页面的head部分使用link引入，语法如下：

<link rel="stylesheet" href="1.css">

注：rel用来设置引入文件和当前文件之间的关系

注：当多种样式表出现在同一个html页面中产生冲突时，采取就近原则，即离被设置的元素越近，优先级越高

    当样式中出现!important关键词时，不再遵循就近原则，优先级最高

四、css选择器

1.id选择器

eg:  <h1 id="city">北京</h1>

样式中： #city{color:red;}

注：a) id名命名要语义化，常用命名方法：

       驼峰命名法：myFavCity    中划线连接命名法：my-fav-city

    b) id名是唯一的，不要出现同名的id

2.class选择器（类选择器）

eg: <h1 class="city">上海</h1>

样式中： .city{color:blue;}

注：a) class命名也要语义化，驼峰命名或中划线连接命名

    b) 我们可以给具有相同样式的元素添加相同的class名

c) 类名词列表语法如下：  

    <div class="box box1"></div>

3.标签选择器（类型选择器）

eg:  p{color:red;}

注：匹配网页中这类型的所有元素

4.后代选择器

eg: .ul-one li{color:red;}

注：使用后代选择器的前提是元素必须是嵌套关系（包含与被包含的关系）

5.群组选择器

eg: h1,h2,h3,h4,h5,h6{font-weight:normal;}

注：当需要给不同类型的元素设置相同的样式时可以使用群组选择器

6.通配符

eg: *{margin:0; padding:0;}   去掉所有元素默认的间距

7.伪类选择器

注：超链接的四个状态如下：

a) a:link   超链接的初始状态

b) a:visited   链接访问过后的状态

c) a:hover     鼠标划过（悬停）时的状态

d) a:active    鼠标按下（链接被激活）时的状态

注：实际应用中会简写超链接的四个状态，如下：

a{color:black;}  a:hover{color:blue;}

五、css选择器权重

当有两个选择器匹配到了同一个元素时，设置了相同的css属性产生冲突，以权重较高的为准

我们把选择器的权重分为以下四个等级：

1.行内样式      权重：1000

2.id选择器      权重：100

3.class选择器，伪类选择器    权重：10

4.标签选择器      权重：1

----------------------------------------

后代选择器    权重：所有选择器权重之和