CSS-初识CSS3

0 前言

        CSS是一种用来为HTML文档添加样式和布局的语言，它可以让网页的外观更加美观和多样化。CSS使用一系列的规则来控制HTML元素的字体、颜色、大小、间距、背景、边框等属性。CSS还可以实现一些动画和交互效果，提高网页的用户体验。在本文中，我们将介绍CSS的基本语法，如何编写和引用CSS文件，如何使用选择器和属性来定位和修改HTML元素。

1 初识CSS

1.1 CSS定义

Cascading Style Sheet 级联样式表
用于修饰网页（不是必须的），例如字体大小、颜色、高度、宽度等等。

1.2 CSS应用

一般用于对网页的效果进行修饰（美化）的工作。

1.3 CSS的发展史

1996年CSS 1.0诞生，2010年新版本CSS 3.0发布。

1.4 CSS的优势

1） 内容与表现分离
2） 网页的表现统一，容易修改
3） 丰富的样式，使得页面布局更加灵活
4） 减少网页的代码量，增加网页的浏览速度，节省网络带宽
5） 运用独立于页面的CSS，有利于网页被搜索引擎搜录

1.5 CSS语法

选择器{属性名1：属性值；
属性名2：属性值；
}
1） 选择器包含基本选择器和高级选择器，用来获取html元素
2） {}代表语法体，用来存放CSS代码
3） 属性名一般是css中的语法
4） 属性值一般是属性的内容或范围
5） 基于W3C标准，不建议省略分号；
6） style标签使CSS代码在网页中生效，type=“text/css”代表当前style标签中的代码是css代码

1.6 引入CSS的方式

行内样式
在html标签行当中引入style属性，并对属性名设置属性值，或者对多个属性名设置多个属性值。

<p style="color:red"></p>

内部样式表
在head标签中引入style标签，type=“text/css”代表当前style标签中的代码是css代码，方便在同页面中修改网页。

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

外部样式表
在head标签中引入link标签，rel=“stylesheet”代表使用外部样式表，type=“text/css”代表当前文件中的代码是css代码，href为css文件所在的路径。

<link rel="stylesheet" type="text/css" href="文件路径">

样式优先级
行内样式>内部样式>外部样式（特例：就近原则）

2 基本选择器

2.1 标签选择器

HTML标签名作为选择器，无前缀

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

2.2 类选择器

类名作为选择器，以.作前缀

<style type="text/css">
    .class{
    color:red;
    }
</style>

2.3 id选择器

id名作为选择器，以#作前缀

<style type="text/css">
    .id{
    color:red;
    }
</style>

3 高级选择器

3.1 层次选择器

后代选择器
元素1 元素2 选择元素1内所有元素2

<style type="text/css">
    div p{
    color:red;
    }
</style>

子代选择器
元素1>元素2 只选择父代是元素1的元素2

<style type="text/css">
    div>p{
    color:red;
    }
</style>

相邻兄弟选择器
元素1+元素2 选择在紧邻在元素1后的元素2

<style type="text/css">
    div+p{
    color:red;
    }
</style>

通用兄弟选择器
元素1~元素2 选择元素1后的所有元素2

<style type="text/css">
    div~p{
    color:red;
    }
</style>

3.2 结构伪类选择器

常用种类
1）first-child
2）last-child
匹配某元素的父元素的第一个或是最后一个元素，利用特殊字符“:”模拟类选择器的作用实现第一个或是最后一个元素标签

3.3 属性选择器

E[attr]
选择匹配具有属性attr的E元素

<style type="text/css">
    a[target]{
    background:red;
    }
</style>

E[attr=value]
选择匹配具有属性attr且属性值为value的E元素

<style type="text/css">
    a[target="_blank"]{
    background:red;
    }
</style>

E[attr^=value]
选择匹配具有属性attr且属性值以value开头的E元素

<style type="text/css">
    a[target^="_b"]{
    background:red;
    }
</style>

E[attr$=value]
选择匹配具有属性arrt且属性值以value结尾的E元素

<style type="text/css">
    a[target$="k"]{
    background:red;
    }
</style>

E[attr*=value]
选择匹配具有属性attr且属性值包含value的E元素

<style type="text/css">
    a[target*="a"]{
    background:red;
    }
</style>