CSS
CSS ：层叠样式表 (Cascading Style Sheets)
HTML 标签被设计为用于定义文档内容，样式表定义如何显示 HTML 元素。样式通常保存在外部的 .css 文件中。只需要编辑CSS文档就可以改变所选元素的布局和外观。
CSS语法
CSS 语法规则由两个主要的部分构成：选择器，以及一条或多条声明，每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute），每个属性有一个值且属性和值被冒号分开。
选择器{
属性：值;
属性：值;
···}
属性选择器和派生选择器
派生选择器
外层标签 内层标签{
属性:值}
外层标签和内层标签之间用空格分开
属性选择器
在标签内部设置目标属性并进行选择
[title]{
属性:值} /*属性选择器*/
<p title='t'>属性选择器</p>
[title=te]{
属性:值} /*属性和值选择器*/
<p title='te'>属性选择器</p>
id选择器
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
#id {
属性：值;
属性：值;
···}
注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
id选择器可以为标有特定 id 的 HTML 元素指定特定的样式，而且id是唯一的。
目前常用的方式是id选择器尝尝用于建立派生选择器
id选择器 目标标签{
属性:值}
类(class)选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用(class不是唯一的)。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示。
.class {
属性：值;
属性：值;
···}
注：类名的第一个字符不能使用数字，无法在 Mozilla 或 Firefox 中起作用。
类选择器和派生选择器结合使用
.class 目标选择器{
属性：值;}
CSS创建
插入样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
外部样式表
当样式需要应用于很多页面时，一般引入外部样式表。每个页面使用 标签链接到样式表。 标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
注：不要在属性值与单位之间留有空格
内部样式表
当单个文档需要特殊的样式时，可以使用内部样式表。可以通过
<head>
<style>
hr {
color:sienna;}
p {
margin-left:20px;}
body {
background-image:url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会丢失样式表的许多优势。不推荐使用这种方法。
要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color:red;
text-align:left;
font-size:8pt; }
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align:right;
font-size:20pt; }
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
多重样式优先级
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
css 7 种基础选择器：
- ID 选择器， 如 #id{}
- 类选择器， 如 .class{}
- 属性选择器， 如 a[href=“segmentfault.com”]{}
- 伪类选择器， 如 :hover{}
- 伪元素选择器， 如 ::before{}
- 标签选择器， 如 span{}
- 通配选择器， 如 *{}
CSS 优先规则：
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
!important 规则例外
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了样式表本来的级联规则，从而使其难以调试。
经验法则：
- Always 要优化考虑使用样式规则的优先级来解决问题而不是
!important - Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用
!important - Never 永远不要在全站范围的 css 上使用
!important - Never 永远不要在你的插件中使用
!important
css背景
CSS 背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中:
body {
background-color:#b0c4de;}
背景图像
background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {
background-image:url('paper.gif');}
若不需要重复显示，则加入声明：background-repeat:no-repeat;
若只需要沿水平方向平铺，则加入声明：background-repeat:repeat-x;
若只需要沿垂直方向平铺，则加入声明：background-repeat:repeat-y;
若需要改变图像的位置，则加入声明：background-position: right top;(右上显示)
背景- 简写属性
为了简化代码，可以将背景属性合并到"background"属性中.
body{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px; /*(非背景属性)*/
}
当使用简写属性时，属性值的顺序为：:3
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
以上属性无需全部使用，你可以按照页面的实际需要使用.
CSS 背景属性
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
css文本格式
文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
注： 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
选择器 {
color:red;}
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
选择器 {
text-align:center;}
### 文本修饰
text-decoration 属性用来设置或删除文本的装饰。
选择器 {
text-decoration:overline;}
选择器 {
text-decoration:line-through;}
选择器 {
text-decoration:underline;}
选择器 {
text-decoration:none;}
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
选择器 {
text-transform:uppercase;}
选择器 {
text-transform:lowercase;}
选择器 {
text-transform:capitalize;}
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
选择器 {
text-indent:50px;}
css文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
css字体属性
| 属性 | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
css链接
不同的链接可以有不同的样式，比如任何CSS属性（如颜色，字体，背景等）
四个链接状态：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
css列表
CSS 列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
在 HTML中，有两种类型的列表：
- 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 ol - 列表项的标记有数字或字母
ul.类属性名 {
list-style-type: circle;}
ul.类属性名 {
list-style-type: square;}
/*无序列表*/
ol.类属性名 {
list-style-type: upper-roman;}
ol.类属性名 {
list-style-type: lower-alpha;
最低0.47元/天 解锁文章
20万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
