0.CSS快速入门
0.1什么是CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS相当于华丽衣服，HTML就是网页的骨架。可以通过CSS调整网页的展示风格。
0.2 CSS规则
编写一段HTML
使用CSS样式表将P标签中的所有的文本修改为红色的24号字体大小，隶书。
样式规则：
0.3简单文本样式
CSS 文本属性可定义文本的外观。
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
[1]文本的大小 使用font-szie属性设置。
[2]字体的颜色 使用 color 属性设置字体的颜色
[3]文本的字体 使用 font-family设置文本的字体
[4]缩进文本 p {text-indent: 5px;}
Tips:缩进的距离可以使用负值和百分比。
[5]文本对其方式 text-align: (left|right|center)
text-align:不止能设置文本的对其方式，而且也会影响子元素的对其方法。
[6]设置文本的字间距 word-spacing设置
[7]设置字母的间距 letter-spacing
[8] text-transform 属性处理文本的大小写。这个属性有 4 个值：
- none
- uppercase
- lowercase
- capitalize
[9]文本的修饰 text-decoration
取值
None:什么修饰都没有。
Underline：下划线
Overline：上划线
line-through：删除线
blink：闪烁
[10]文本的方向 direction
| 值 | 描述 |
| ltr | 默认。文本方向从左到右。 |
| rtl | 文本方向从右到左。 |
| inherit | 规定应该从父元素继承 direction 属性的值。 |
1 CSS编写位置。
[1]内联样式表（内部样式表）前面写过的方式
在head标签中添加style标签，在style标签中别写CSS。
内联样式表的作用范围是当前的页面。
[2]外部样式表
专门编写一个CSS文件（后缀是.css），在文件中编写样式表。在HTML页面中使用link标签导入样式表。
Tips：导入外部样式表的语法规则
| <link href="css/css.css" rel="stylesheet"/> |
| Href指向外部样式表文件。 Rel=“stylesheet” 固定值，表示导入的是一个样式表。此值必不可少。 |
外部样式表可以同时被多个网页引用，所以推荐使用。
[3] 行样式
在HTML标签的开始标签中使用style属性设置样式
行样式只能在当前的标签中有效，其他标签无法使用此样式，所以非必要情况不要用。
样式表位置的优先级
行样式 > 内联样式表 > 外置（外部）样式表
2 CSS选择器。
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
[1] * 选择所有元素。
[2] 标签选择器 element p 选择所有 <p> 元素。
[3] ID选择器 #id #firstname 选择 id="firstname" 的所有元素。
Tips:理论上一个网页上的任何一个HTML元素都可以有ID属性。而ID绝对是唯一的。 实际上一些临时工程序猿会写出重复的ID的HTML元素，而浏览器都忍了。
ID选择器和行样式几乎没有什么区别，理论上只能被一个元素使用。
[4] 类选择器 .class .intro 选择 class="intro" 的所有元素。
类选择器是定义一类HTML元素的样式，这一类HTML元素可以没有任何关系。
定义样式 ：.className{样式规则}
使用样式 ：class属性指定样式名称 class=”className”
Tips: 一个元素可以采用多各类。 使用空格隔开样式名称
如果多个类样式中定义了相同的样式属性，不出意外会采用后面使用的类样式属性。
[5]组合选择器 element,element div,p 选择所有 <div> 元素和所有 <p> 元素。
可以同时定义多个选择器，并且给这些选择器定义相同的样式
[6] 后代选择器 element element div p 选择 <div> 元素内部的所有 <p> 元素。
[7]子元素选择器 element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。
[8]兄弟元素选择器 element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。
[9] 属性选择器
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
[10]使用伪类设置超链接的几种样式
| /*使用伪类设置超链接样式*/ /*所有a标签通用样式*/ a{font-size: 28px;} /*鼠标悬浮式的样式*/ a:hover{ color:green; font-size: 36px; } /*设置访问过的样式*/ a:visited{ color:#ccc; } /*这是访问前的样式*/ a:link{ color:#fe4545; } /*访问中，激活，鼠标按下是的样式*/ a:active{ color:#000; } |
[11]其他伪类
| :focus | input:focus | 选择获得焦点的 input 元素。 |
| ||
| :first-letter | p:first-letter | 选择每个 <p> 元素的首字母。 |
| ||
| :first-line | p:first-line | 选择每个 <p> 元素的首行。 |
| ||
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 |
| ||
| :before | p:before | 在每个 <p> 元素的内容之前插入内容。 |
| ||
| :after | p:after | 在每个 <p> 元素的内容之后插入内容。 |
| ||
| :lang(language) | p:lang(it) | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 |
| ||
| :first-of-type | p:first-of-type | 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 |
| ||
| :last-of-type | p:last-of-type | 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 |
| ||
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。 |
| ||
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个 <p> 元素。 |
| ||
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
| ||
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数。 |
| ||
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
| ||
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数。 |
| ||
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
| ||
| :root | :root | 选择文档的根元素。 |
| ||
| :empty | p:empty | 选择没有子元素的每个 <p> 元素（包括文本节点）。 |
| ||
| :target | #news:target | 选择当前活动的 #news 元素。 |
| ||
| :enabled | input:enabled | 选择每个启用的 <input> 元素。 |
| ||
| :disabled | input:disabled | 选择每个禁用的 <input> 元素 |
| ||
| :checked | input:checked | 选择每个被选中的 <input> 元素。 |
| ||
| :not(selector) | :not(p) | 选择非 <p> 元素的每个元素。 |
| ||
| ::selection | ::selection | 选择被用户选取的元素部分。 |
| ||
|
| element1~element2 | p~ul | 选择前面有 <p> 元素的每个 <ul> 元素。 | ||
|
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 | ||
|
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。 | ||
|
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 | ||
选择器的优先级:
哪个选择器更能明确的确定该元素，就选择哪个。
Id > class > element
3 背景
3.1背景颜色
使用属性background-color 设置背景颜色。
3.2背景图片
S1:使用属性background-image设置背景图片。
S2:通过属性background-repeat设置背景图片的平铺状态
取值： no-repeat; 不平铺，只出现一次。
Repeat-x: 在X轴平铺。
Repeat-y: 在Y轴平铺。
Repeat：默认值，在X和Y轴都平铺。
S3： 通过属性background-position设置图片开始现实的位置
可能的值
| 值 | 描述 |
| 如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 |
案例：
效果：
S4: 使用属性background-attachment设置背景图片滚动还是固定
S5:通过属性background-size设置背景图片的大小（CSS3新增特定）
S6: 通过background同时设置多个背景属性
4 盒子模型
4.1块级元素和内联元素
块元素又名块级元素(block element)，和其对应的是内联元素(inline element)，都是html规范中的概念。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）
区分：
块级元素是独占一行，而内联元素不是独占一行。
常见的块级元素：
- H1 .. h6
- P标签
- Li
- Table
- Div
- Artice（html5）
- Footer（html5）
- Section（html5）
其他学习过的元素都是内联元素。
内联元素和块级元素相互转换：
通过样式属性display设置：
取值： block 表示元素是块级元素。 可以将内联元素调整为块级元素。
取值：inline 表示元素是内联元素。 将块级元素修改为内联元素。
取值：none 表示元素隐藏。 无论是块级还是内联都会隐藏不见。
4.2 border
通过border属性设置任何一个元素的边框情况
4.2.1 border – style
设置4个边的样式。默认情况下边是看不见的。
Border-style的取值：
| none | 定义无边框。 |
| hidden | 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式 |
可以通过border-xxx-style 分别设置4个边的样式：
可以分组设置：
一次性逐个设置：
4.2.2 border-width
设置一个边框厚度。
取值：就是一个 n > 0 ;
设置边框厚度的前提是边框的style不能是none；
边框的厚度的其他设置技巧和style的完全一致。
分别设置
按组设置
当然也可以一次性逐个设置。
4.2.3border-color
所有的操作只要把4.2.2中的width替换，最后的取值只要取color的就可以了。
4.2.4细线边框
border: 1px solid red;
4.2.5css3的边框新特性
圆角：border-radius
使用图片作为边框： border-image
添加阴影效果：box-shadow
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
4.3 外边距 （margin）
当前元素和其他元素（父元素）之间的距离。
在加一个div
Margin的设置方式：
设置方式和border的各种设置方式完全一致。
只设置上面DIV的margin-bottom
同时设置了下面DIV的margin-top
两个相邻的元素，相邻的margin会合并， 并不会叠加。
4.4内边距(padding)
内边距指的是当前容器内部的元素到当前容器边框的距离。
Tips：所有尺寸如图所示。
外部的div的实际空间是蓝色虚线，尺寸为200*200。总宽度由于padding的设置编程了400*400。
Padding是蓝色虚线到外面的DIV的边框的距离。
浏览器中的效果：
Padding的设置方式和margin的设置方式完全一致。不再赘述。
内部元素的margin不会和外部元素的padding合并。
4.5 宽度和高度
使用width设置宽度，使用height设置高度。
标准盒子（现在几乎所有的浏览器都是标准盒子）
标准盒子的宽度和高度是不包含border和padding的。
非标准盒子（ie6以前（包含ie6））
非标准盒子的宽度和高度是包含了border和padding。
5定位
Position属性设置定位方式：
默认使用的是相对定位。
设置Position：absolute 为绝对定位。 相对于最外层的定位方式。
Left和top
元素离最外层元素边框的上边的距离和左边的距离。
块级元素的浮动：
Float属性可以让元素浮动。理论上会让出当前元素在当前平面上的位置。
如果两个元素都浮动：
块级元素不再独占一行。也能解决块级元素独占一行的问题。
Float之后同样可以使用padding和margin属性，没有影响。
Tips：DIV在不设置大小的情况下，会包裹内部内容。一旦内部的内容float之后，DIV不再会被内部内容撑大。
Float：两个DIV可以同行显示。
DIV的水平居中：
块级元素的滚动条：
Overflow属性设置滚动条。
| 值 | 描述 |
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
未完待续。。。
142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
