CSS资料整理

CSS资料整理

一、CSS概述

1. CSS 指层叠样式表 (Cascading Style Sheets)。
2. 样式主要定义 HTML 元素的外观和布局方式。
3. 样式通常存储在样式表中，定义为CSS文件。
4. CSS文件的后缀名为：.css

二、CSS语法

CSS 语法规则由两部分构成：选择器，一条或多条声明语句。

1. 选择器是需要改变的 HTML 元素样式。
2. 声明语句由一个属性和属性值组成，属性和属性值用:分开。
3. 声明语句是以分号;结束，声明总以大括号{}括起来:
4. 属性是您希望设置的样式属性。
5. 属性值是为属性所设置的样式效果。
6. 通常情况，为增加CSS可读性，一般每行只描述一个属性。

p {color:green;text-align:center;}

p{
    color:green;
    text-align:center;
}

注释是用来解释你的代码，并且可以随意编辑它，浏览器忽略。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/*这是个注释*/
p
{
    /*这也是一个注释*/
    color:black;
    text-align:center;
}

三、CSS选择器分类

CSS中的选择器很多，比如：标签选择器，ID选择器，类选择器，组选择器，伪类选择器等等，接下来主要介绍常用的几个：

1.标签选择器

1. 标签选择器可以为同一种 HTML 元素指定特定的样式。
2. 语法：标签名{ 属性:属性值; }

p {
    font-size: 15px;
}
//针对所有P段落标签设置样式

2.ID选择器

1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
2. HTML元素以id属性来设置id="xxx"，CSS 中 id 选择器以"#"来定义。
3. 注意：id 属性的值只能在每个 HTML 文档中出现一次，保持唯一性。

//以下的CSS样式设置：
#a {color:red;}
#b {color:green;}

//下面的 HTML 代码中:
<p id="a">这个段落是红色。</p>
<p id="b">这个段落是绿色。</p>

3.class类选择器

1. class 选择器可以为标有特定一类元素设置属性样式。
2. HTML元素以class属性来设置class="xxx", CSS 中类选择器以"."来定义。
3. 注意：class 选择器有别于id选择器，class可以在多个元素中使用。

//以下的CSS样式设置：
.center {text-align: center}

//下面的 HTML 代码中：让class属性值为center的元素内容居中显示
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

//以下的CSS样式设置：
p.center {text-align:center;}

//下面的 HTML 代码中：让class属性值为center的<p>元素内容居中显示
<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

4.分组选择器

1. 为了尽量减少代码，使用分组选择器。
2. 每个选择器用","分隔。

h1,h2,h3,h4,h5,h6,#abc
{
    color:red;
}
//为所有h1-h6标题标签和id="abc"的标签颜色设置为红色。

5.通配符选择器

1. 语法格式，语法：*{}。

*{
	font-size：16px
}
//将整个页面字体大小设为16px。

6.属性选择器

1. 为具有特定属性的HTML元素设置样式。
2. 选择器使用"[属性]"。
3. 注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。

[title]//包含标题（title）的所有元素变为蓝色
{
    color:blue;
}

[title=abc]//包含标题title='runoob'的所有元素变为蓝色
{
    color:blue;
}

7.组合选择器1：嵌套（后代）选择器

1. 嵌套选择器，用于设置选择器内部的选择器样式。
2. 嵌套选择器也称为后代选择器，用于选择某元素的直接或间接子元素。
3. 嵌套选择器，选择器之间使用" "空格隔开。

p{//为所有 p 元素指定样式。
    color:blue;
    text-align:center;
}
.sss{//为所有 class="sss" 的元素指定样式。
    background-color:red;
}
p.sss{//为所有 class="sss" 的 p 元素指定样式。
    text-decoration:green;
}
.sss  p{//为所有 class="sss " 元素内的 p 元素指定样式。(嵌套，后代：直接子元素和间接子元素)
    color:white;
}

8.组合选择器2：子元素选择器

1. 子元素选择器只能选择某元素的直接子元素。
2. 子元素选择器，选择器之间使用">"符号。

div>h1//设置div中所有直接子元素h1标签背景为红色
{
   background-color:red;
}

9.组合选择器4.后续兄弟选择器

1. 后续兄弟选择器，选取所有指定元素之后的相邻兄弟元素，有相同父元素。
2. 后续兄弟选择器，选择器之间使用"~"符号。

div~h1//设置div元素之后的所有相邻兄弟h1元素背景为红色，并且满足二者为同一父元素。
{
   background-color:red;
}

10.组合选择器3.相邻兄弟选择器

1. 相邻兄弟选择器，选择紧接在该元素后的元素，且二者有相同父元素。
2. 相邻兄弟选择器，选择器之间使用"+"符号。

div+h1//设置div元素后的第一个h1元素背景为红色，并且满足二者为同一父元素。
{
   background-color:red;
}

11.伪类和伪元素选择器

1. css伪类用于向某些选择器添加特殊的效果。
2. css伪元素用于向某些选择器设置特殊效果。

//伪类:
css伪类用于向某些选择器添加特殊的效果。
:link, :visited, :hover, :focus, :active, :first-child, :lang
css3新增的伪类：
:last-child, :only-child, :first-of-type, :last-of-type, :only-of-type, :nth-child(n), :nth-last-child(n), :nth-of-type(n),  :nth-last-of-type(n), :root, :empty, :target, :enabled, :disabled, :checked, :not(selector),

//伪元素:
css伪元素用于向某些选择器设置特殊效果。
::first-letter, ::first-line, ::before, ::after
css3新增的伪元素
::selection

备注：伪类和伪元素区别

1. 伪元素添加了一个页面中没有的元素（只是从视觉效果上添加了，不是在文档树中添加）；伪类是给页面中已经存在的元素添加一个类选择器。
2. 为了避免大家混淆伪类和伪元素，css3中的标准规定伪类使用单冒号“:” ，伪元素使用双冒号“::”，但在此之前都使用的单冒号“:”，所以为了保证兼容伪元素两种使用方法都是可以的。
3. 伪类可以叠加使用，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
4. 伪类与类优先级相同，伪元素与标签优先级相同。

//伪类：链接的不同状态都可以以不同的方式显示。
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

//任何元素的第一个子元素的 <p> 元素
p:first-child
{
    color:blue;
}

//匹配的所有<p>元素的第一个 <i> 元素
p > i:first-child
{
    color:blue;
}

总结.选择器优先级

1. css选择器：简单选择器，伪元素选择器和组合选择器。
2. 简单选择器：标签选择器，类选择器，ID选择器，通配符选择器，属性选择器和伪类选择器。
3. 组合选择器：后代选择器，子元素选择器，后续兄弟选择器，相邻兄弟选择器。
4. 选择器优先级：行内样式> ID选择器 > 类、伪类和属性选择器 > 标签，伪元素 > 通配符 > 继承 > 浏览器默认属性。
5. css优先级的计算方式可以用一下公式来解决value=a*1000+b*100+c*10+d，依据value值得大小来确定css的优先顺序。其中a表示行内样式，b表示ID选择器的数量，c表示类、伪类和属性选择器的数量，d表示标签选择器和伪元素选择器的数量。

四、CSS样式表的三种引用方式

1. 外部样式表(External style sheet)
2. 内部样式表(Internal style sheet)
3. 内联样式(Inline style)

1.外部样式表

1. 当样式需要应用于很多页面时，外部样式表将是理想的选择。
2. 外部样式表定义为.css文件
3. 每个HTML页面使用 标签链接到样式表。
4. <link>标签在文档的头部<head>内。

//css样式表文件
h1 {color:sienna;}
p {margin-left:20px;}

//引入
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

//使用
<h1>你好</h1>
<p>世界</p>

2.内部样式表

1. 当单个文档需要特殊的样式时，就应该使用内部样式表。
2. 使用 <style>标签在文档头部定义内部样式表。

//内部样式设置
<head>
	<style>
		hr {color:sienna;}
		p {margin-left:20px;}
	</style>
</head>

//使用
<h1>你好</h1>
<p>世界</p>

3.内联样式

1. html元素和css样式混杂在一起，没有分离，谨慎使用
2. 当样式仅需要在一个元素上应用一次时。
3. 标签内使用样式style属性设置即可。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4.多重样式优先级

一般情况下，优先级如下：就近原则

(内联样式） > （内部样式）>（外部样式）> 浏览器默认样式。