CSS 概述

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

HTML 标签原本被设计为用于定义文档内容。通过使用

、

、

所有的主流浏览器均支持层叠样式表

div和span的理解

div是一个html标签, 一个块级元素(单独显示一行), 单独使用没有任何意义, 必须结合CSS来使用, 主要用于页面的布局;

span是一个html标签, 一个内联元素(显示一行), 它单独使用没有任何意义, 必须结合css使用, 主要对括起来的内容进行样式的修饰;

类选择器

使用类选择器前要对世纪文档做标记，才能发挥类选择器作用。

.name{text-align:center}

在文档后面的部分，通过包含与样式相关的'class'属性，且将其中一个预定义的样式指定为'name'值，就一块明确选择要对该标签的特定情况用何种样式

.sheen{font-size: large;color: salmon}

ID选择器

ID 选择器类似于类选择器，ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。与类选择器一样，ID 选择器中可以忽略通配选择器。

ID是唯一标识，只能被使用一次

#sheen{font-size: x-large;color: rosybrown}

#star{font-size: large;color: #c0ffff}

#clotho{font-size: xx-large;color: darkgreen}

标签选择器

div{margin: 0 auto;border: 1px;color: darkgreen;font-size: larger;text-align: center}

使用CSS

设置链接的样式

能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

CSS样式的引入

引入方式:

1). 行内引入:

2). 内部引入: 写在head标签里面的style标签里面的样式;

3). 外部引入: 将css样式独立成一个文件， 通过与当前html文件链接在一起.

三种引入方式的优先级: 就近原则

//CSS文件

div {

width: 80%;

margin: 0 auto;

padding: 0;

}

ul {

list-style-type: none

}

li {

display: inline-block;

width: 20%;

background: snow;

color: #333333;

padding-top: 10px;

padding-bottom: 10px;

text-align: center;

font-size: large;

text-transform: capitalize;

}

li:hover {

background: green;

color: snow;

}

a:hover {

color: snow;

}

li {

background: red;

}