一、CSS概述

1、什么是CSS

Cascading style sheets，层叠样式表、级联样式表，简称样式表

2、css的作用

设置HTML网页中元素的样式

3、HTML与CSS的关系

HTML：负责网页的搭建，内容展示--网页骨架

CSS：负责网页的修饰，样式的构建--给网页化妆

4、HTML属性和CSS的使用原则

W3C建议我们尽量使用CSS的方式来取代HTML属性

二、CSS的语法规范

1、使用CSS的方式

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

将css样式定义在html标签中

样式声明：样式属性：值；样式属性：值

2、内部样式

在网页head标签中创建style标签，在style标签内部定义样式

<style>

样式规则1；

样式规则2；

</style>

样式规则：由选择器和样式声明组成

元素选择器，由元素名称作为选择器，页面上匹配这个元素的名称的元素，都可以用这个样式

div{

color:red;

}

3、外部样式

独立于任何一个网页，声明一个样式文件（.css），在css文件中写样式规则

使用步骤

创建样式表文件
在css文件中编写样式规则
在网页的头部引入css文件<link href="css的url" rel="stylesheet">

4、Css特性

（1）继承性：大部分的css效果是可以直接继承的，必须父子结构（有层级嵌套），子继承父

（2）层叠性：可以为一个元素定义多个样式规则，规则中属性不冲突时，多个样式可以同时应用到当前元素上

（3）优先级：如果多个样式冲突，按照样式的优先级应用样式

最高：内联样式

中间：内部样式和外部样式就近原则

最低：浏览器默认样式

调整样式优先级, !importnt放在属性值之后，与值之间用空格隔开

三、基础选择器

1、选择器的作用

规范了页面中哪些元素能够使用定义好的样式

2、选择器详解

（1）通用选择器

页面上所有的元素

*{样式声明}，唯一使用到的地方 *{margin:0px;padding:0px},使所有元素内外边距清0

（2）元素选择器，标签选择器

设置页面中某种元素的默认样式

div{样式声明}

(3)id选择器

设置指定id元素的样式

#d1{样式声明}

（4）类选择器

定义页面上某个或者某类元素的样式（公共样式，都可以用）

.类名{样式声明}

（4）分类选择器

将元素选择器和类选择器结合的一种方式,指向更金准，优先级更高

<style>
        .my_font{
            color: #c1c6ff;
            font-size: 24px;
        }
        p.my_font{
            color:red ;
        }

    </style>
</head>
<body>
    <div class="my_font">p标签内内容1</div>
    <p class="my_font">p标签内内容2</p>
</body>

(5)群组选择器

将多个选择器放到一起定义公共样式

选择器1，选择器2.。。选择器n{

样式声明

}

<style>
        div,#s1,h4,.foncolor{
            color: #4dc71f;
            background-color: #f56e6c;
        }
    </style>
</head>
<body>
    <div>迪奥</div>
    <p class="foncolor">香奈儿</p>
    <span id="s1">MC</span>
    <h4>大包</h4>
</body>

（6）后代选择器

后代：以及或者多于一级的嵌套关系

语法：选择器1 选择器2 选择器3{样式声明}

（7）子代选择器

通过元素的子代（一级嵌套关系）匹配元素

选择器>选择器2>选择器3{样式声明}

(8)伪类选择器

匹配元素的不同状态的选择器

选择器：伪类选择器{}在这个标签的某一个状态下，才应用次样式

链接伪类：

    /*未点击过的链接*/
        a:link{color: red}
        /*点击过的链接*/
        a:visited{color: gray}
<a href="#">链接</a>

动态伪类：

/*鼠标点击不放*/
        a:active{font-style: italic}
        /*获取焦点*/
        input:focus{background-color: gray}
        /*鼠标悬停时状态*/
        img:hover{width: 300px}

(9)选择器的权值

权值：表示当前选择器的重要度，权值越大，优先级越高

!important > 1000

内联样式 1000

id选择器 100

类和伪类 10

元素选择器 1

通用选择器 0

继承的样式无

注： * 当一个选择器含有多个选择器时，需要将所有的选择器的权值进行相加，然后再比较，权值高的优先级高

*分组选择器权值不相加，单独计算

*权值的计算不会超过其数量级，内联样式不能添加important

*权值相同按照就近原则

wytao1995

CSS