前端学习(9)~css学习(三)：样式表和选择器

本文主要内容

CSS概述
CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表
CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器
CSS几种扩展选择器：后代选择器、交集选择器、并集选择器
CSS样式优先级

CSS 概述

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1。

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

CSS的重点知识点

盒子模型、浮动、定位

CSS 整体感知

css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

CSS语法

语法格式：（其实就是键值对）

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

解释：

选择器代表页面上的某类元素，选择器后一定是大括号。
属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号）。
属性名和冒号之间最好不要有空格（经验）。
如果一个属性有多个值的话，那么多个值用空格隔开

举例：

p{color: red;}

css代码的注释

格式：

<style type="text/css">

    /*
        具体的注释
    */

    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

</style>

注意：CSS只有/* */这种注释，没有//这种注释。而且注释要写在<style>标签里面才算生效哦。

接下来，我们要开始真正地讲css的知识咯。

css怎么学？CSS有两个知识部分： 1）选择器，怎么选； 2）属性，样式是什么

CSS的一些简单常见的属性

字体颜色

color:red;

字号大小

font-size:40px;

背景颜色

background-color: blue;

加粗

font-weight: bold;

normal就是正常的意思。

斜体

font-style: italic;

不斜体是normal

下划线

text-decoration:none;

CSS和HTML结合的方式（样式表）

CSS和HTML的结合方式有3种：

行内样式：在某个特定的标签里采用style属性。范围只针对此标签。
内嵌样式表：在页面的head里采用<style>标签。范围针对此页面。
引入外部样式表css文件的方式。这种引入方式又分为两种：
- 1、采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 2、采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写import语句。

1、CSS和HTML结合方式一：行内样式

采用style属性。范围只针对此标签适用。

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>

2、CSS和HTML结合方式二：内嵌样式表

在head标签中加入<style>标签，对多个标签进行统一修改，范围针对此页面。

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

<style type="text/css">
    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

</style>

 <body>
    <p>洗白白</p>
    <p style="color:blue">你懂得</p>
 </body>

3、CSS和HTML结合方式三：引入外部样式表css文件

引入样式表文件的方式又分为两种：

（1）采用<link>标签。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
（2）采用import，必须写在<style>标签中，并且必须是第一句。例如：@import url(a.css) ;

两种引入样式方式的区别：外部样式表中不能写标签，但是可以写import语句。

这里再讲一个补充的知识：<link>标签的rel属性：。其属性值有以下两种：

stylesheet：定义的样式表
alternate stylesheet：候选的样式表

举例

然后我们在html文件中引用三个样式表：

<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>

上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在IE中打开网页）

CSS的四种基本选择器

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。

CSS的选择器分为两大类：基本选择题和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）

1、标签选择器：选择器的名字代表html页面上的标签

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

举例：

p{
    font-size:14px;
}

上方选择器的意思是说：所有的<p>标签里的内容都将显示14号字体。

【总结】需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

2、ID选择器：规定用`#`来定义

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

举例：

#mytitle{
    border:3px dashed green;
}