层叠样式表（CSS），又称串样式列表，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
使用CSS可以让结构(HTML)与表现（CSS）分离，方便维护。
过去我们写网站都用table来布局，然后样式都直接加在table上面，这样一来页面显得特别的臃肿，然后想修改一下也显得非常困难。
后来w3c推出了css，把结构和样式分离，html只负责结构，样式交给css来实现。这样一来开发者工作量和效率大大提升了，页面也变得更加容易维护，想要修改某个字体或者样式，直接在css文件中修改，不需要修改html结构。
CSS语法有三个部分组成：选择器、属性、属性值。
selector { property: value }
selector 选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性（property）和一个属性值（value）组成。
属性（property）是希望设置的样式属性（style attribute）。
每个属性有一个属性值（value）。
属性和属性值被冒号分开。
在html样式中有四种css引用方式：行间样式、内部样式、外部样式、导入外部样式
· 行间样式：应用内嵌样式到各个网页元素
· 内部样式表：在网页上创建嵌入的样式表
· 链入外部样式表：将网页链接到外部样式表
· 导入外部样式表：
· css通过@import引入其它的css文件
· html链接一个css可以使用多个css中的样式
通配符选择器匹配html中所以元素。
标签选择器为HTML元素指定特定的样式。
类选择器可以为标有特定class的HTML元素指定特定的样式。类选择器以"."来定义。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
/* 指定p标签下的所有span标签颜色为红色 */p span { color: red; }/* 指定p标签下的子元素span标签颜色为红色 */p > span { color: red; }
对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
CSS继承是指被包在内部的标签拥有外部标签的样式性质。CSS的一个主要特征就是继承，它依赖于祖先-后代关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以用于它的后代。
多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况 一般情况下，优先级如下：（外部样式）<（内部样式）<（内联样式）
优先权值：
我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
· 内联样表的权值最高为1000 。
· ID选择器的权值为100 。
· 类选择器的权值为10 。
· 元素选择器的权值为1。
网页设计师要懂的前端知识之CSS基础
图1-1 优先权值
CSS 优先级法则：
· 选择器都有一个权值，权值越大越优先。
· 当权值相等时，后出现的样式表设置要优于先出现的样式表设置。
· 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
· 继承的CSS 样式不如后来指定的CSS 样式。
· 在同一组属性设置中标有"!important"规则的优先级最大。
font-size: 设置文本大小
· 属性值
· {number+px}：固定值尺寸像素
· {number+%}：其百分比取值是基于父对象中字体的尺寸大小
· 示例
· p { font-size: 20px; }p { font-size: 100%; }
font-family: 设置文本字体
· 属性值
· name： 字体名称 ,按优先顺序排列,以逗号隔开.如果字体名称包含空格,则应使用引号括起
· 示例
· p { font-family: Courier, "Courier New", monospace; }
font-style: 设置文本字体的样式
· 属性值
· normal：默认值.正常的字体
· italic：斜体.对于没有斜体变量的特殊字体,将应用 oblique
· oblique：倾斜的字体
· 示例
font-weight: 设置文本字体的粗细
· 属性值
· normal：默认值.正常的字体
· bold：粗体
· bolder: 比 bold 粗
· lighter: 比 normal 细
· {100-900}：定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
· 示例
color: 设置文本字体的颜色
· 属性值
· name：颜色名称指定 color
· rgb：指定颜色为RGB值
· {颜色16进制}:指定颜色为16进制
· 示例
line-height: 设置文本字体的行高。即字体最底端与字体内部顶端之间的距离
· 属性值
· normal：默认值，默认行高
· {number+px}：指定行高为长度像素
· {number}: 指定行高为字体大小的倍数
· 示例
text-decoration: 设置文本字体的修饰
· 属性值
· normal：默认值，无修饰
· underline：下划线
· line-through : 贯穿线
· overline : 上划线
· 示例
text-align: 设置文本字体的对齐方式
· 属性值
· left：默认值，左对齐
· center：居中对齐
· right : 右对齐
· 示例
text-transform: 设置文本字体的大小写
· 属性值
· none：默认值(无转换发生)
· capitalize：将每个单词的第一个字母转换成大写.
· uppercase: 转换成大写
· lowercase: 转换成小写
· 示例
text-indent: 设置文本字体的首行缩进。
· 属性值
· {number+px}：首行缩进number 像素
· {number+em}：首行缩进number 字符
· 示例
background-color: 设置对象的背景颜色。
· 属性值
transparent：默认值(背景色透明)。
{color}：指定颜色。
· 示例
background-image: 设置对象的背景图像。
· 属性值
none：默认值(无背景图)。
url({url})：使用绝对或相对 url 地址指定背景图像。
· 示例
background-repeat: 设置对象的背景图像铺排方式。
· 属性值
repeat：默认值(背景图像在纵向和横向平铺)。
no-repeat：背景图像不平铺。
repeat-x ：背景图像仅在横向平铺。
repeat-y：背景图像仅在纵向平铺。
· 示例
background-position: 设置对象的背景图像位置。
· 属性值
{x-number | top | center | bottom } {y-number | left | center | right }：控制背景图片在元素的位置：x轴 、y轴。其铺排方式为no-repeat。
· 示例
background-attachment: 设置对象的背景图像滚动位置。
· 属性值
· scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
· fixed: 当页面的其余部分滚动时，背景图像不会移动。
· 示例
background 简写属性：在一个声明中设置所有的背景属性。
· 语法
background: color image repeat attachment position
· 示例
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态
· 选择器
· a:visited：已被访问状态 a:link：未访问状态 a:hover：鼠标悬停状态 a:active：用户激活
· 语法
:focus表单获得焦点时触发样式
:first-child 伪类来选择元素的第一个子元素
:lang 伪类允许您为不同的语言定义特殊的规则
属性选择器可以根据元素的属性及属性值来选择元素。
Elector[attr]
Elector[attr]：选择具有attr属性的Elector元素。
Elector[attr=val]
Elector[attr=val]：选择具有attr属性且属性值等于val的Elector元素。
关系选择器可以根据元素与元素之间所处关系来选择元素。
后代选择器
后代选择器可以选择作为某元素后代的元素。
子元素选择器
子元素选择器只能选择作为某元素子元素的元素。
相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
<ul> <li>不显示红字1</li> <li>显示红字2</li> <li>显示红字3</li></ul><style>li + li { color: red; }</style>
伪元素：用于向某些选择器设置特殊效果。
:first-letter
:first-letter：向文本的第一个字母添加特殊样式。
:first-line
:first-line：向文本的首行添加特殊样式。
:before
:before：在元素之前添加内容。
:after
:after：在元素之后添加内容。
通过这篇文章，你可以学到以下知识点：
· CSS 介绍
· CSS 字体
· CSS 背景
· CSS 伪类选择器
· CSS 属性&&关系选择器
· CSS 伪元素
|
网页设计师要懂的前端知识之CSS基础
推荐阅读
