WEB CSS

一.CSS

CSS有三种用法：内联样式；内部样式；外部样式

二.CSS语法规范

CSS由多个样式规则组成，每个样式规则有两个部分：选择器和样式声明

eg: h1 {color:red; font-size:14px;}

这里的h1为选择器，color:red为一组声明key:value

三.CSS规则特性

1.继承性

父元素的CSS声明可以被子元素继承，如字体颜色等。

2.层叠性

同一个元素若存在多个css规则，对于不冲突的声明可以叠加。

3.优先级

同一个元素若存在多个css规则，对于冲突的声明以优先级高者为准。

样式优先级：浏览器缺省值—>外部样式或内部样式表（就近即后面的优先即）—>内联样式

四.选择器

     1.元素选择器

通过元素名来选择css作用目标.eg:<p><h>。

适用场景：页面中有多个相同的元素需要重用同样的效果时建议使用元素选择器

     2.类选择器

允许以一种独立于文档元素的方式来指定样式

语法：.className {color:red;}

所有带class属性的元素都可以使用此样式声明，将元素的class属性值设置为样式类名。

适用场景：页面中有多个不同元素需要重用同样的效果时建议使用类选择器

     3.ID选择器

以一种独立于文档元素的方式来指定样式，它仅作用于id属性的值。

语法：#id{}

     4.选择器组

选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素。

     5.派生选择器

用来选择子元素，分为2种。

后代选择器：选择某元素的所有的后代（子孙）元素。

子元素选择器：选择某元素的所有子元素。

     6.伪类选择器

伪类用于设置同一个元素在不同状态下的样式。

常用伪类：

—:link

向未被防伪的超链接添加样式

—:visited

向已被访问的超链接添加样式

—:active

向被激活的元素添加样式

—:hover

当鼠标悬停至元素上方时，向该元素添加样式

—:focus

当元素获取焦点时，向该元素添加样式

     7.border与box

1) border属性：用来设置元素的边框

四边设置：

—border.width值 style值 color值

单边设置：

—border-left:width值 style值 code值;

—border-right:width值 style值 color值;

—border-top:width值 style值 color值;

—border-bottom:width值 style值 color值;

样式单位：

—％: 百分比

—in:英寸

—cm:厘米

—mm:毫米

—pt:磅（1pt等于1/72英寸）

—px:像素（计算机屏幕上的一个点）

—em:1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍（一般用于设置首行缩进:2em；行间距:1.6em）

颜色：

—#rrggbb:十六进制数，如#ff0000

—#rgb:简写的十六进制数，如#f00

—rgb(x,x,x):RGB值，如rgb(255,0,0)

—rgb(x%,x%,x%):RGB百分比值，如rgb(100%,0%,0%)

—表示颜色的英文单词，如red

overflow:当内容溢出元素框时如何处理

—visible

—hidden

—scroll

—auto

2) box框模型(box module)定义了元素框处理元素内容，内边距，边框和外边距的方式

width和height指内容区域的宽度和高度

增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸

四边设置：padding:20px;margin:30px;

单边设置：{padding:20px 30px 20px 30px;

margin:20px 30px 20px 30px;}(上边距，右边距，下边距，左边距即顺时针方向)

{padding-top:20px;

padding-right:30px;

padding-bottom:20px;

padding-left:30px;

margin-top;

margin-right:30px;

margin-bottom:20px;

margin-left:30px;}

对边设置：{padding: 20px 40px;

margin: 20px 40px;}

     8.背景图片

background-image属性用于设置背景图片

默认值时none，表示背景图赏没有防置任何图像

如果需要设置一个背景图像，需要用起始字母url附带一个图像的URL值

可以是相对URL值

可以是相对URL或绝对URL

默认情况下，背景图片在水平和垂直方向上重复出现，创建一种称为“墙纸”效果

background-repeat属性可以控制背景图片的平铺效果

background-repeat可取值为

—repeat:在垂直和水平方向重复，为重复值

—repeat-x:仅在水平方向重复

—repeat-y:仅在垂直方向重复

—no-repeat:仅显示一次

background-position属性用于改变背景图片在元素中的位置，该属性的取值为：

默认情况下，背景图像会随着页面的滚动而移动

可以通过background-attachment属性来改变此特征

—默认值是scroll：默认情况下，背景会随文档滚动

—可取值为fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像。

9.控制文本

指定字体：font-family:value1,value2;

字体大小：font-size: value;

字体加粗：font-weight:normal/bold;

10.设置字体颜色

文本颜色：color:value

文本排列：text-align:left/right/center;

文字修饰：text-decoration:none/underline;

行高：line-height:value(1.6em);

首行文本缩进：text-indent:value(2em);

11.表格样式属性

如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框。

border-collapse属性：合并相邻的边框

—设置是否将表格边框合并为单一边框

—border-collapse:separate/collapse;

12.定位

定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。

     —流定位

页面中的块级元素框从上到下一个接一个地排列

每一个块级元素都会出现在一个新行中（比如<p>元素，<div>元素）

元素框之间的垂直距离是由框的垂直外边距计算出来的

行内元素将在一行中从左到右排列水平布置

不需要从新行开始

可以使用水平内边距，边框和外边距调整她们的间距

     —浮动定位: float

浮动定位是指：让元素脱离普通流定位，将浮动元素放置在元素的左边或右边。浮动元素依旧位于父元素之内。

浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框位置。

经常使用浮动定位来实现特殊的定位效果。

浮动的目的是使块元素能够水平布局。

如果需要设置框浮动在元素的左边或右边，可以通过float属性来实现。

float属性定义元素在哪个方向浮动

float: none/left/right

clear属性用于清除浮动所带来的影响，定义了元素的哪边上不允许出现浮动元素

clear:none/left/right/both

浮动的方向仅仅影响的是元素的排序，左浮动就是正序排列，右浮动是倒叙排列。

     —相对定位

元素原本所占的空间不释放。

元素框会相对于它原来的位置偏移某个距离

设置水平或垂直位置，让元素相对于它的起点进行移动

设置元素为相对定位

首先需要设置position属性值为relative

然后使用left属性或者right属性设置水平方向的偏移量

也可以使用top属性或者bottom属性设置垂直方向偏移量

     —绝对定位

将元素的内容从当前定位中移除，释放空间

并使用偏移属性来固定该元素的位置

相对于最近的已定位祖先元素，绝对定位是特殊的相对定位

如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如：body元素

设置元素为绝对定位

首先需要设置position属性的值为absolute

然后使用left属性或者right属性设置元素的水平位置

也可以使用top属性或者bottom属性设置元素的垂直位置

     —固定定位

将元素的内容固定在页面的某个位置

元素从普通流中完全移除，不占用页面空间

当用户向下滚动页面时元素框并不随着移动

设置固定定位

首先需要设置position属性值为fixed

通过left, top, right以及bottom这些偏移属性来定义元素的位置

     —堆叠顺序

一旦修改了元素的定位方式，则元素可能会发生堆叠

可以使用z-index属性来控制元素框出现的重叠顺序

z-index属性

值为数值：数值越大表示堆叠顺序更高，即离用户更近

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面

可以设置为负值：表示离用户更远

13.列表样式： 

list-style-type属性用于控制列表中列表项标志的样式

—无序列表：出现在各列表项旁边的圆点

无序列表取值：none无标记, disc实心圆（默认值）, circle空心圆, square实心方块

—有序列表：可能是字母，数字或另外某种计数体系中的一个符号

有序列表取值：none无标记, decimal数字（如1，2，3，为默认值）, lower-roam小写罗马数字（如i, ii, iv,v）, upper-roman（大写罗马数字如I，II，III，IV，V）, 等

list-style-image属性使用图像来替换列表项的标记

取值为：url(),指定图像作为有序或无序列表项的标志

14.显示方式

元素都有自己的显示方式

—块元素：从上至下，可以设置宽高，如<h1>,<p>,<div>等

—行内元素：从左至右，不能设置宽高，如<span>,<a>等

—行内块：从左至右，可以设置宽高，如<input>,<img>等

改变显示方式属性：none, block, inline, inline-block

—none:不显示该元素，释放其占用位置

—block: 将元素显示方式设置为块，如可以将行内元素<a>转换为块元素

—inline: 将元素显示方式设置为行内，如可以将块元素<p>转换为行内元素

—inline-block: 将元素显示方式设置为行内元块，如可以将行内元素<span>设置为行内块元素

15.鼠标形状

默认情况下，光标会根据用户的操作发生改变

当鼠标总悬停在一个链接上时，光标将从指针形状变为手形状

当鼠标悬停在文本区域时，会显示I形状

当鼠标悬停在一个按钮上时，光标会显示为箭头

可以使用cursor属性指定显示给用户的鼠标光标类型（形状）

可以为用户提供一种可视化的暗示，提示可以进行的操作

cursor属性定义了鼠标的指针放在一个元素边界范围内时所用的光标形状。

default, pointer, crosshair, text, wait, help等