CSS样式学习（一）

一、CSS样式语法
1、CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:每条声明由一个属性和一个值组成。声明组以大括号({})括起来，多个声明之间用分号分隔。

注意：多个样式声明没有分隔符，类似函数声明。样式声明中相同样式，按照从里到外的原则替换。
2、CSS注释以 "/*" 开始, 以 "*/" 结束。

二、选择器
选择器用于指定网页中的对应元素，实现指定展示对应的样式。
1、元素选择器又称为类型选择器，即HTML中的常用标签，多个标签用英文逗号分隔。
2、类选择器：通过指定元素的class属性实现类选择器，语法：类选择器前面加个"."。可以配合标签或通配符使用。
注意：（1）class属性可以取多个值，用空格分隔。意义：通过对元素指定多个class属性值，来实现多个不同元素相同class属性值使用同一样式。多个类选择器用英文逗号分隔。使用时先后顺序无关紧要。
（2）把两个类选择器链接在一起（两个类选择器之间没有空格），仅可以选择同时包含这些类名的元素（类名的顺序不限），如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。
（3）元素标签配合类选择器使用，例如：p.urgent只匹配 class 属性值为urgent 的p元素；p.urgent.important只匹配 class 属性中同时包含词 important 和 urgent 的 p 元素。
意义：通过对元素指定多个class属性值，来实现多个不同元素相同class属性值使用同一样式。多个类选择器用英文逗号分隔。
3、ID选择器通过指定元素的id属性实现id选择器，语法：ID选择器前面有个"#"。
注意：id和class属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用；id和class在HTML和XHTML中是区分大小写的。
4、通配符选择器：显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。例如：* {color:red;}
5、属性选择器：可以根据元素的属性及属性值来选择元素。语法：使用中括号[attribute]。可以配合标签或者通配符使用。
（1）属性选择器，语法[attribute]，选择所有带有target属性元素
（2）属性选择器配合标签，语法：element[attribute]，选取具备该属性的标签。
（3）多个属性选择，语法[attribute][attribute]，表示选择所有同时具备这些属性的元素；
（4）属性值完全匹配选择，语法[attribute = value]，用于选取带有指定属性和值的元素。注意：是进行完全值匹配。
（5）属性值指定匹配，语法：[attribute ~= value]，用于选取属性值中包含指定词汇的元素，该值匹配是没有空格的字符串。
（6）字符串匹配属性值选择器，语法：[attribute *= value]，匹配属性值中包含指定字符串的每个元素，该值可以是任意值，推荐使用。例如：[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素。
6、组合选择器说明了两个选择器直接的关系。
（1）后代选择器：以空格分隔，注意：后代选择器两个元素之间的层次间隔可以是无限的。
（2）子元素选择器：以大于号分隔，只能选择作为某元素子元素的元素。
（3）相邻兄弟选择器：以加号分隔，可选择紧接在另一元素后的元素，且二者有相同父元素。
（4）普通兄弟选择器：以破折号分隔，可选择所有的兄弟元素，且二者有相同父元素。

三、伪类
CSS伪类是用来添加一些选择器的特殊效果。伪类是需要用户做出某种动作之后才显示的效果。用于表示元素的状态，弥补了CSS选择器无法选取的不足，用来更方便地获取信息。
1、伪类
伪类用单冒号:表示，语法：selector : pseudo-class {property: value}。同时CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}。CSS伪类是用来添加一些选择器的特殊效果。伪类是需要用户做出某种动作之后才显示的效果。

注意：伪类和伪元素区分开，伪元素是一个虚拟容器可以在其中添加内容或样式，其中伪元素用双冒号::表示。
（1）格式化DOM树以外的信息。比如： <a> 标签的:link、:visited 等。这些信息不存在于DOM树中。
（2）不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。
2、锚点伪类
（1）a:link：未访问的链接；
（2）a:visited：已访问的链接；
（3）a:hover：鼠标移动到链接上；
（4）a:active：已选中的链接即点击时的链接；
注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。
3、E:checked：匹配表单中被选中的radio或checkbox元素；
4、E:focus：匹配获得当前焦点的E元素，常用于<input>标签。
5、E:first-child：匹配元素E的第一个子元素
6、:not(selector) 选择器匹配每个元素不是指定的元素/选择器。
注意：该选择器多用于配合菜单点击元素选择，例如：li a:hover:not(.active)表示：导航菜单中超链接的类不是active的元素。

四、伪元素
伪元素用双冒号::表示，语法：伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。同时，伪元素还可以创建源文档不存在的内容，比如使用 ::before 或  ::after。
注意：:before和:after在css1中就有了，但是在css3中写法改为了::before 和 ::after以便于和之前做区别，用哪种方式无所谓，但是IE8只支持 :after这种写法。
1、::first-letter：向文本的第一个字母添加特殊样式。
2、::first-line：向文本的首行添加特殊样式。
3、::before：在元素之前添加内容。其中，使用content属性来指定要插入的内容。content属性值可以为字符串;url(url):设置某种媒体（图像，声音，视频等内容）;counter:设定计数器内容
4、::after：在元素之后添加内容。其中，使用content属性来指定要插入的内容。

五、插入样式表
1、外部样式表：每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部。
例如：<link rel="stylesheet" type="text/css" href="mystyle.css" />
2、内部样式表：使用 <style> 标签在文档头部定义内部样式表。
3、内联样式：使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
4、在使用多重样式时，优先级是由内到外，内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式。
注意：!important规则使样式属性声明具有最高优先级。语法：选择器{样式:值!import;} 。

六、背景样式
1、背景属性缩写语法：background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
2、背景图像：background-image，通过url('URL')属性指定图像的url。例如： background-image:url('paper.gif');

七、文本样式（段落样式）
1、文本颜色：color；
2、文本方向：direction；
3、letter-spacing：设置字符间距；
4、word-spacing：设置字间距；
注意：letter-spacing 这个样式使用在英文单词时，是设置字母与字母之间的间距。如果想设置英文单词之间的间距，可以使用 word-spacing 来实现。汉字的间隔调节也是用 letter-spacing 来实现的。因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用。
5、text-indent：缩进元素中文本的首行；
6、text-align：对齐元素中的文本即文本的对齐方式；
7、line-height：设置行高即行间距；
8、text-decoration 属性规定添加到文本的修饰。即给文本加一条线。

八、字体样式
CSS字体属性定义字体类型，加粗，大小，文字样式。
font属性简写可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
注意：font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
1、font-family属性指定一个元素的字体。可以取多个值，用逗号分隔。
注意：如果字体名称包含空格，它必须加上引号。在HTML中使用"style"属性时，必须使用单引号。

九、列表样式
1、list-style简写属性用于定义列表的样式。
2、list-style简写属性设置的样式顺序： list-style-type, list-style-position, list-style-image.
注意：可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
注意：在使用列表实现导航时，要使用list-style:none;去除列表的默认样式；

十、表格样式
1、border简写属性用于把针对四个边的属性设置在一个声明。可以设置的属性分别（按顺序）：border-width, border-style,和border-color。
注意：对4个边框的设置分别为：border-top、border-right、border-bottom、border-left4个简写属性。
2、表格边框：为了显示一个表的单个边框，使用 border-collapse属性。例如：border-collapse:collapse;
3、表格的高度和宽度：height和width。
4、表格文字对齐：（1）水平对齐方式使用text-align属性定义向左，右，或中心：（2）垂值对齐属性vertical-align设置垂直对齐，比如顶部，底部或中间。
5、padding内边距属性定义元素边框与元素内容之间的空间，即上下左右的内边距。该属性可以有1到4个值。其中，padding取4个值为上、右、下、左；三个值为：上、左右、下；
6、设置表格中表格的背景颜色和文字颜色通过background-color和color属性来设置。

十一、盒子模型
所有HTML元素可以看作盒子，CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。用来设计和布局时使用。
1、边框border
border简写属性用于把针对四个边的属性设置在一个声明。可以设置的属性分别（按顺序）：border-width, border-style,和border-color。
注意：对4个边框的设置分别为：border-top、border-right、border-bottom、border-left4个简写属性。其中，每个边框可以设置的属性分别（按顺序）：border-width, border-style,和border-color。
2、轮廓outline
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
注意：轮廓是位于边框（border）边缘的外围即边框的外边轮廓。
outline简写属性在一个声明中设置所有的轮廓属性。可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width；
3、外边距margin
margin(外边距)属性定义元素周围的空间。margin 没有背景颜色，是完全透明的。其中，即上下左右的外边距。该属性可以有1到4个值。其中，margin取4个值为上、右、下、左；三个值为：上、左右、下；
4、内边距（填充padding）
padding内边距属性定义元素边框与元素内容之间的空间，即上下左右的内边距。该属性可以有1到4个值。其中，padding取4个值为上、右、下、左；三个值为：上、左右、下；
注意：Css3的box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。Css3之前的要区分开元素的 width 和 height是不包括 padding(内边距) 和 border(边框)；

十二、Display(显示) 与 Visibility（可见性）
1、display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
注意：visibility: hidden 相当于 display:none，能把元素隐藏起来，其中display:none 元素不再占用空间。visibility: hidden 使元素在网页上不可见，但仍占用空间。
2、display属性可以更改内联元素和块元素的显示。
（1）display:inline;此元素会被显示为内联元素，元素前后没有换行符。
注意：元素显示为内联元素之后的高度、宽度、内部距、外边距都不可设置改变，就是里面文字或图片的大小;
（2）display:block;此元素将显示为块级元素，此元素前后会带有换行符。
（3）display:none; 表示将该元素隐藏起来，不占用空间，同visibility: hidden;区分开。
注意：实现下拉菜单利用伪类(:hover)，选中隐藏的该元素设置display:block;即可。或者利用visibility属性
3、visibility属性
visibility:visible;默认值。元素是可见的。
visibility:hidden;元素是不可见的。

十三、定位样式属性（position、top、right、bottom、left）
1、position 属性指定了元素的定位类型，top、right、bottom、left属性定义了该元素和包含它的元素上右下左的边界之间的偏移距离。
（1）static 定位：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。
（2）fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。配合top、right、bottom、left属性对元素进行定位。
注意：fixed定位使元素的位置与文档流无关，因此不占据空间。fixed定位会造成元素之间的重叠。
（3）relative 定位：相对定位元素的定位是相对其正常位置。（即相对该元素原本在的位置）。
注意：使用相对定位该元素原来占有的空间不会改变即仍然存在。
（4）absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。
注意：absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位会会造成元素之间的重叠。
（5）sticky 定位基于用户的滚动位置来定位。
2、重叠的元素通过z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。
3、overflow属性设置当元素的内容溢出其区域时发生的事情。

十四、元素浮动样式（float）
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
注意：浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。其中，几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
1、清除浮动属性clear
clear 属性指定元素两侧不能出现浮动元素。即该元素两侧不能出现具有浮动样式的元素，但是可以出现不具备浮动样式的元素。

十五、利用css各种样式属性实现元素水平和垂直对齐
1、元素的水平居中对齐
要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。必须设置元素的宽度将防止它溢出到容器的边缘。
注意：如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。
2、文本居中对齐
如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;
3、图片居中对齐
要让图片居中对齐, 可以使用 margin: auto; 同时，图片元素块状显示。例如：img{display:block;margin:auto;}即可。
4、左右对齐
（1）可以使用 position: absolute; 属性来对齐元素，配合left和right属性实现左右对齐。
注意：绝对定位元素会被从正常流中删除，并且能够交叠元素。
（2）可以使用 float 属性来对齐元素
注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题
5、文本垂直居中对齐
通过padding属性设置文本在元素中的上下内边距即可实现垂直居中，要水平和垂直都居中，可以使用 padding 和 text-align: center。
6、垂直居中 
（1）使用 line-height；
（2）使用 position 和 transform；

十六、元素的透明度
IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。
在CSS3中属性的透明度是 opacity。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

十七、表单元素样式
1、设置输入框的样式
利用属性选择器设置输入框的样式，语法：element[type=value]，例如：input[type=text] - 选取文本输入框；input[type=password] - 选择密码的输入框；
（1）、 border-radius 属性可以给 input 输入框添加圆角。
（2）、 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色；
（3）、使用 :focus 选择器可以设置输入框在获取焦点时的样式；
（4）、使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间；
注意：利用 background-repeat: no-repeat;禁止背景图标重复显示；

十八、CSS计数器
1、CSS 计数器通过一个变量来设置，根据规则递增变量。计数器有以下几个属性：
（1）、counter-reset - 创建或者重置计数器；创建或重置一个或多个计数器；
（2）、counter-increment - 递增变量；递增一个或多个值；
（3）、content - 插入生成的内容；使用 ::before 和 ::after 伪元素来插入自动生成的内容；
（4）、counter() 或 counters() 函数 - 将计数器的值添加到元素；
2、使用计数器时，先使用counter-reset创建计数器才可以使用。
使用样例：h2::before { counter-increment: section; content: "Section " counter(section) ": "; }；

十九、网页布局
在网页布局时，元素的水平排列使用float属性来实现。