CSS概述

CSS简介

层叠样式表Cascading Style Sheets)。
也是一种标记语言。
主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
CSS让我们的网页更加丰富多彩，布局更加灵活自如。
CSS最大价值: 由HTML专注去做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离。

CSS规则

CSS规则由两个主要的部分构成：选择器和声明。

<style type="text/css">
    P {
        font-size: 20px;
        color: #00ff00;
    }
</style>
<!-- <style>一般写到<head>内部。 -->

CSS书写规范

CSS书写顺序

位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)

CSS语法

命名一般为小写英文字母。
为了代码的易读性，在每个声明块的左花括号前添加一个空格。
每条声明语句的 : 后应该插入一个空格。
所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。
对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
十六进制值应该全部小写，例如，#fff。
尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。
长度为 0 时须省略单位。 (也只有长度单位可省)。
当数值为 0 - 1 之间的小数时，省略整数部分的 0。
颜色值不允许使用命名色值，RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。

CSS简单选择器

标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器。
标签选择器可以把某一类标签全部选择出来。
能快速为页面中同类型的标签统一设置样式。
不能设计差异化样式，只能选择全部的当前标签。

1
2
3

p {
    color: #00ff00;
}

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法：

.类名 {
　　属性1：属性值1;
　　…
}

例如：

.red {
    color: red;
}
/*
结构需要用class属性来调用 。
<div class='red'>红色</div>
*/

可以给一个标签指定多个类名。

各个类名中间用空格隔开。
简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字。

多类名选择器在布局复杂的情况下较多使用。

使用场景

把一些标签元素相同的样式(共同的部分)放到一个类里面。
这些标签都可以调用这个公共的类,然后再调用自己独有的类。
从而节省CSS代码,统一修改也非常方便。

id选择器

语法：

#id名 {
　　属性1: 属性值1;
　　…
}

例如，将id为nav元素中的内容设置为红色。

#nav {
    color: red;
}
/*
结构需要用id属性来调用 。
<div id=‘nav’>红色</div>
*/

id选择器和类选择器最大的不同在于使用次数上。
类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比身份证号码，唯一的，不得重复。
id选择器的优先级别要高于class选择器的优先级。
id属性一般在一个页面中只可以使用一次，而class可以被多次引用。目前浏览器都能允许在同一个页面内出现多个相同属性值的id，一般情况下也能正常显示，不过当使用javascript通过id来控制元素时就会出现错误。

通配符选择器

使用"*"定义，它表示选取页面中所有标签。不需要调用，自动就给所有的元素使用样式

语法：

* {
　　属性1: 属性值1;
　　…
}

例如，清除所有的元素标签的内外边距。

* {
    margin: 0;
    padding: 0;
}

CSS常用样式

字体

属性名	描述
font-family	字体系列
font-size	字体大小
font-style	字体样式
font-variant	以小型大写字体或正常字体显示文本
font-weight	字体粗细
font	复合

font-family

例如：

1
2
3

p {
    font-family: "JetBrainsMono";
}

可以写多个字体名称，如果浏览器不支持第一个字体，则会尝试下一个。

1
2
3

div {
    font-family: "JetBrainsMono", "Arial";
}

font-size

绝对值，不允许用户在浏览器中更改大小
xx-small、x-small、small、medium（默认）、large、x-large、xx-large
相对值(父元素)，允许在浏览器中更改大小
larger、smaller、80%
具体值
12px、.8em;
px（像素）大小是网页的最常用的单位。
大多浏览器默认的文字大小为16px（相当于小四）。
常见用法是使用px、em或百分比（%）来显示字体尺寸。1em=16px。
不同浏览器可能默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小。

font-style

取值	描述
normal	默认值
italic	斜体的字体样式
oblique	倾斜的字体样式，让没有斜体属性的文字倾斜（有的字体没有设计斜体）

font-weight

取值	描述
normal	关键字
bold	关键字
bolder	相对粗细值，是相对于上级元素的继承值而言的
lighter	相对粗细值，是相对于上级元素的继承值而言的
100-900	数字法，包括从“100”到“900”的9个数字序列（注意，只能是100、200之类的整百数）。数字400等价于normal，而700等价于bold。

font-variant

值	描述
normal	默认值
small-caps	所有的小写字母均会被转换为大写，但是与其余文本相比，其字体尺寸更小

font

字体复合属性可以把以上文字样式综合来写, 这样可以更节约代码。

顺序：

font-style
font-weight
font-size/line-height
font-family;

使用时，必须按上面的顺序书写，不能更换顺序，并且各个属性间以空格隔开。
不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

例如：

p {
    font-style: italic;
    font-size: 20px;
    font-family: "Microsoft Yahei";
}

可以简写为：

1
2
3

p {
    font: italic 20px "Microsoft Yahei";
}

文本

属性名	描述
color	设置文本颜色
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-transform	控制元素中的字母
line-height	设置行高

color

颜色表达方式

名称：pink, blue, brown, lightseagreen等，不区分大小写（不推荐使用）
十六进制： #ff0000、#c700c7
RGB：rgb(255, 0, 51)
RGBa：设定一个颜色的透明度。0=透明；1=不透明，rgba(255,0,0,0.7)

text-align

值	描述
left	左对齐(默认值）
right	右对齐
center	水平居中
justify	两端对齐（将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的）

text-decoration

值	描述
none	默认（定义标准的文本）
underline	下划线
overline	上划线
line-through	删除线

text-indent

是段落的首行缩进。可以设置为负值。
可以使用所有长度单位、百分比值。
百分数是相对于父元素而言。即缩进其父元素宽度的百分比。

例如：

div {
    width: 500px;
    height: 400px;
    background-color:yellow;
}
.p3 {
    text-indent: 50%;
}
<div>
    <p class = p3>this is a paragragh</p>
</div>

text-transform

值	描述
none	默认
capitalize	每个单词以大写字母开头
uppercase	仅有大写字母
lowercase	仅有小写字母

line-height

line-height属性用于设置行高，是指文本行基线间的垂直距离。
基线（base line）并不是汉字文字的下端沿，而是英文字母"x"的下端沿。
行距 = (line-height)—(font-size)

背景

属性名	描述
background-color	背景颜色
background-image	背景图片
background-attachment	背景图像是固定或者滚动
background-repeat	背景图像是否及如何重复
background-position	背景图像的起始位置
background	复合

background-image

默认情况下，图片放置在元素的左上角，并重复垂直和水平方向。
建议设置背景颜色，假如图片不可用，可使其代替。

例如：

1
2
3

div {
    background-image: url(image/flower.jpg)
}

background-attachment

值	描述
scroll	背景图片随着页面的滚动而滚动(默认值)
fixed	背景图片不会随着页面的滚动而滚动

background-repeat

值	描述
repeat	默认(背景图像将在垂直方向和水平方向重复)
repeat-x	背景图像将在水平方向重复
repeat-y	背景图像将在垂直方向重复
no-repeat	背景图像将仅显示一次

background-position

1	background-position: 100 50;

参数是精确单位：第一个是x坐标，第二个是y坐标。如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。

1	background-position: center top;

参数是方位名词（center、left、right、top、bottom），两个值前后顺序无关。如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

1	background-position: center 50;

参数是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

background

没有特定的书写顺序。
一般习惯约定
background: 背景颜色背景图片是否平铺是否滚动位置;
例如：

1 2	background: transparent url(image.jpg) repeat-y fixed top; background: silver url(image/football.png) no-repeat;

CSS引入方式

行内样式

行内样式是在元素标签内部的 style 属性中设定CSS 样式。适合于修改简单样式。

1 2	<div style="color: red; font-size: 12px;">星垂平野阔，月涌大江流</div> <h1 style="color:blue; backgroundcolor: yellow;">我美丽的家乡</h1>

在双引号中间，写法要符合 CSS 规范。
不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。

内部样式

内部样式表是写到html页面内部。将所有的CSS代码抽取出来，单独放到一个<style>标签中。<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

代码结构清晰，没有实现结构与样式完全分离。
这种方式是练习时常用的方式。

外部样式

实际开发都是外部样式表，适合于样式比较多的情况。样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。引入外部样式表分为两步：

新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
在 HTML 页面中，使用<link>标签引入这个文件。

1	<link rel="stylesheet" href="css文件路径">

行内样式表、内嵌样式表、外部样式表各有优势，实际的开发中常常需要混合使用：

有关整个网站统一风格的样式代码，放置在独立的样式文件*.css，控制多个页面。
某些样式不同的页面，除了链接外部样式文件，还需定义内嵌样式，控制一个页面。
某张网页内，部分内容"与众不同"，采用行内样式。
对于某个HTML标签，如果有多种样式：
1. 如果规定的样式没有冲突，则叠加。
2. 如果有冲突，则按行内样式、内部样式、外部样式优先级显示。

CSS复合选择器

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

语法：元素1 元素2 { 样式声明 }

例如： ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */

元素1是父级，元素2是子级，最终选择的是元素2。
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。
元素1和元素2可以是任意基础选择器。

将下面的链接文字修改为红色：

<div class="nav">
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">百度</a></li>
    </ul>
</div>

.nav ul li a {
    color: red;
}

div ul li a {
    color: red;
}

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。元素1和元素2中间用大于号隔开。

语法：元素1 > 元素2 { 样式声明 }

例如：div > p { 样式声明 }
/* 选择 div 里面所有最近一级 p 标签元素 */

元素1是父级，元素2是子级，最终选择的是元素2。
元素2必须是亲儿子，其孙子、重孙之类都不归他管。也可以叫"亲儿子选择器"

将下面的计算机学院文字修改为红色:

<div class="hot">
    <a href="#">计算机学院</a>
    <ul>
        <li><a href="#">网络专业</a></li>
        <li><a href="#">计算机专业</a></li>
    </ul>
</div>

.hot>a {
    color: red;
}

相邻兄弟选择器

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。

语法：元素1 + 元素2 { 样式声明 }

例如：div + p { 样式声明 }
/* 选择<div>元素之后的第一个<p>元素元素 */

将下面的段落2文字修改为红色:

<div>
    <p> 段落1在div中。</p>
</div>
    <p> 段落2不在div中。</p>
    <p> 段落3不在div中。</p>
<style>
    div + p {
        color: red;
}
</style>

并集选择器

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：元素1,元素2 { 样式声明 }

例如：ul,div { 样式声明 }
/* 选择 ul 和 div标签元素 */

并集选择器可以选择多组标签, 同时为他们定义相同的样式。
逗号可以理解为和的意思。
并集选择器通常用于集体声明。

把辛弃疾的词都改为红色:

<div>醉里挑灯看剑</div>
<p>梦回吹角连营</p>
<span>不尽长江滚滚来</span>
<ul class="pozhenzi">
    <li>八百里分麾下炙</li>
    <li>五十弦翻塞外声</li>
    <li>沙场秋点兵</li>
</ul>

div,
p,
.pozhenzi li{
    color: red;
}

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
…

伪类选择器书写最大的特点是用冒号（:）表示，比如:hover、:first-child。

链接伪类选择器

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

为了确保生效，请按照顺序声明 :link－:visited－:hover－:active。
因为a链接在浏览器中具有默认样式，所以实际工作中都需要给链接单独指定样式。

<style>
div {
    background-color:yellow;
    text-align: center;
}
div:hover {
    background-color: blue;
}
</style>
</head>
<body>
    <div>把鼠标移到我上面</div>
</body>

焦点伪类选择器

:focus 伪类选择器。

用于选取获得焦点的表单元素，主要针对于表单元素来说。

input:focus {
    background-color:yellow;
}
<form action="" method="get">
    姓名: <input type="text" /><br />
    地址: <input type="text" /><br />
    <input type="submit" value="确认" />
</form>

:first-child 伪类选择器

:first-child伪类选择器。

用于选取属于其父元素的首个子元素的指定选择器。

用法：

1
2
3

E:first-child {
    color:yellow;
}

只要E元素是它的父级的第一个子元素，就选中。它必须同时满足两个条件，一个是“第一个子元素”，另一个是“这个子元素刚好是E”。

同理，:last-child 选择器用于选取其父元素的最后一个子元素的指定选择器。

<style>
    div:first-child{
        color: red;
}
</style>
<div class="demo">
    <p>第一个段落</p>
    <p>第二个段落</p>
</div>

<style>
    p:first-child{
        color: red;
}
</style>
<div class="demo">
    <p>第一个段落</p>
    <p>第二个段落</p>
</div>

<style>
    p:first-child {
        color:red;
}
</style>
</head>
<body>
    <p>这个段落是其父元素（body）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
<div>
    <p>这个段落是其父元素（div）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
</div>
</body>

<style>
    p:first-child {
        color: red;
}
</style>
<body>
    <p>这个段落是其父元素（body）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
    <div>
        <span>我是div中的首个子元素。</span>
        <p>这个段落包含<span>span元素</span>。</p>
    </div>
</body>

<style>
    p:first-child {
        color: red;
}
</style>
<body>
    <p>这个段落是其父元素（body）的首个子元素。</p>
    <p>这个段落不是其父元素的首个子元素。</p>
    <div>
        <span>我是div中的首个子元素。</span>
        <p>这个段落包含<span>span元素</span>。</p>
    </div>
</body>

元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的。

特点：

自己独占一行。
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%。
是一个容器及盒子，里面可以放行内或者块级元素。

注意：

文字类的元素内不能使用块级元素。
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。
同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的。

特点：

相邻行内元素在一行上可以显示多个。
高、宽直接设置是无效的。
宽度默认就是它本身内容的宽度。
行内元素只能容纳文本或其他行内元素。
链接里面不能再放链接，特殊情况<a>里面可以放块级元素，但是给<a>转换成块级模式最安全。

span {
    background-color:red;
}
<span>马作的卢飞快</span><span>弓如霹雳弦惊</span>
<span>马作的卢飞快</span>
<span>弓如霹雳弦惊</span>

行内块元素

<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。

特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
高度，宽度、行高、外边距以及内边距都可以控制（块级元素特点）。
宽度默认就是它本身内容的宽度（行内元素特点）。

元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性。比如想要增加链接<a>的触发范围。

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;