CSS层叠样式表
1、CSS
1) 什么是css（cascading style sheet）
叫层叠样式表，又叫级联样式表
2) 作用
实现了内容与表现的分离；提高了代码的可重用性和可维护性
2、CSS样式表的使用方式
使用方式共分三种，使用任何一种都可以更改页面的样式
1) 内联样式
将css样式定义在html的标签中
特点：不通用，只能定义某一标签的单独样式
2）内部样式表
将一系列样式定义在html的<head>标签中
特点：当前网页任何一个标签都可以使用，体现出可重用性
3）外部样式表
将样式定义在外部的css文件中
特点：可以由任何一个页面进行样式表的引用，真正意义的实现了样式表的可重用性
3、内联样式的CSS
定义在html标签中的style属性里
<h2 style=”样式规则;样式规则”></h2>。多个样式规则之间，用; 进行区分
Css语法： 属性名称：属性值
4、内部样式表的CSS
样式内容要出现在<head>中的<style>标签中
<head>
<style>
选择器{
属性名称：属性值；/*样式规则*/
属性名称：属性值；
}
</style>
</head>
样式组成：选择器和样式声明
选择器：决定哪些元素能够使用定义好的规则
样式声明：由一对大括号包围着所有的样式规则
5、外部样式表
①创建一个文件以 .css作为后缀名；
②在css文件中写样式相关代码
选择器
{
属性名称：属性值；
}
③在页面中对css文件进行引用
<head>
<link rel=”stylesheet” type=”text/css” href=”引入样 式表的地址”>
</head>
<head>
<link rel=”stylesheet” type=”text/css” href=”引入样式表的地址”>
<style>
@import “css/style.css”
</style>
</head>
6、CSS样式表特征
1）继承性
大部分的样式属性是可以被继承的
2）层叠性
可以为一个标签定义多个样式；不冲突时，多个样式可以合并 成一个
3）优先级
样式定义冲突时，会根据样式规则的优先级进行应用样式。
级别最高：内联样式
其次：内部样式表 与 外部样式表 使用就近原则，谁离标签 近就先执行谁
4）调整优先级
将 !important 添加在样式规则后面，中间用空格隔开
语法：
选择器{属性：属性值 !important;}
7、选择器
规定了哪些元素能够使用定义好的样式
1）通用选择器
表示： *
可以与任何一个元素匹配；
多数用在设置网页整体的默认样式
*{
font-size:12px;
font-family:”微软雅黑”;
}
2）元素选择器
由html元素名称作为选择器；
用于修改当前选择器所对应的元素的默认样式
语法：元素名称{ }
p{
font-size:12px;
color:red;
}
3）类选择器
语法： . classname{ }
注意：类名不能以数字开始
使用：能够附带class属性的元素都能使用类选择器，将元素 的class属性设置为类名即可
一个标签可以同时引入多个类选择器
<div class=”c1 c2”>表示div同时引用了c1和c2两个类样式
类选择器和元素选择器结合使用：能够实现对某种元素中不同 样式的细分控制。又称之为“分类选择器”
语法：元素选择器.类选择器
p.classname{ }
4）id选择器
语法：#idname{ }
<div id=”idname”> </div>
特点：作用于指定id属性值的元素上
id属性作用：标识元素的唯一的值；引用样式表中的id样式。
5）群组选择器
语法：选择器1，选择器2，选择器3，......{ }
选择器的声明是以” , ”隔开的选择器列表
作用：将相同的规则用于多个元素中
6）后代选择器
语法：选择器1 选择器2 选择器3 ...{ }
选择器的声明是以”空格”隔开的选择器列表
作用：根据元素的位置关系（层次）找到元素，然后改掉样式
div span{} 修改div元素中的span元素的样式
div .classname{} 修改div元素中的class为classname的元 素的样式
7）子代选择器
语法：选择器1>选择器2{ }
只描述父子关系的元素，标签嵌套页局限于父子关系的嵌套
<fieldset>
<span class=”s1”></span>
<div>
<span class=”s2”></span>
</div>
</fieldset>
span.s1是fieldset的子代元素
span.s2不是fieldset的子代元素，是div的子代元素，是fieldset 的后代元素
fieldset>span 对
fieldset>.s1 对
8）伪类选择器
语法：通过 “ : ”作为结合符
选择器:伪类选择器
作用：为一些选择器添加特殊的效果，多数表示的是一个元素 （选择器）的不同状态
伪类选择器的分类：
链接伪类
:link 尚未访问的链接
:visited 访问过的链接
动态伪类
:hover 鼠标悬停在元素上的状态
:active 元素被激活时的状态
:focus 元素获取焦点时的状态
目标伪类
元素状态伪类
结构伪类
否定伪类
8、选择器的优先级
内联样式 > ID选择器 > 类（伪类）选择器 > 元素选择器
权值:1,0,0,0 0,1,0,0 0,0,1,0 0,0,0,1
1越靠左，其优先级别就越高
<div id=”d1” class=”red”></div>
div{color:blue;}
#d1{color:green;}
.red{color:red;}
9、颜色
#rrggbb：十六进制数 如#ff0000
每一位的范围：0—9 A—F
#rgb：简写的十六进制数 如 #f00
表示颜色的英文单词，如red
10、尺寸
尺寸属性是用于设置元素的宽度和高度
单位一般为像素或百分比
宽度属性：width
max-width
min-width
高度属性：height
max-height
min-height
在HTML中哪些元素适合使用尺寸属性
①所有的块级元素 div,p,h1,ol,li,ul...
②大部分行内元素不适合使用尺寸属性 span...
③存在width和height属性的元素适合使用尺寸 img，table
溢出：使用尺寸属性控制框的大小时，如果内容所需的空间大于框本 身的空间，会导致内容溢出
overflow 当内容溢出元素框时如何处理
属性：visible 显示
hidden 隐藏
scroll 滚动
auto 自动（只出现纵向滚动条）
overflow-x 横向溢出
overflow-y 纵向溢出
11、边框 border
border设置四个方向边框的宽度(width)，样式(style)，颜色(color)
border-left/right/top/bottom：width style color
定义四个边框某一方向的宽度 样式 颜色
border-width: 四个边框的宽度
border-style: 四个边框的样式
border-color: 四个边框的颜色
border-left/right/top/bottom-width： 定义某一方向的宽度
border-left/right/top/bottom-style： 定义某一方向的样式
border-left/right/top/bottom-color： 定义某一方向的颜色
边框倒角 border-radius
为简写属性，按顺时针顺序设置四个倒角
取值为绝对值或者百分比
单独定义：border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-left-radius 左下角
border-bottom-right-radius 右下角
12、边框阴影 box-shadow
box-shadow:h-shadow v-shadow blur spread color inset;
box-shadow:10px(水平) 10px(垂直) 5px(模糊程度) #ccc(颜色) inset(内阴影);
向方框添加阴影
取值：h-shadow 必选 水平阴影
v-shadow 必选 垂直阴影
blur 可选 模糊程度
spread 可选 阴影的尺寸
color 可选 阴影的颜色
inset 将外部阴影(outset)改为内部阴影
13、图片边框 border-image
由图像作为元素的边框显示效果
border-image：src width repeat
border-imagr:url(img/a.jpg) 26px repeat
repeat值： repeat 平铺
round 铺满
stretch 拉伸
border-image-source:url(img/a.jpg) 图片的路径
border-image-width: 图片边框的宽度
border-image-repeat:repeat/round/stretch 图片边框是否平铺
14、轮廓 outline
轮廓是绘制于元素周围的一条线，在边框的外围。
语法：
outline:color style width;
outline-color: 轮廓的颜色
outline-style: 轮廓的样式
outline-width: 轮廓的宽度
15、框模型(盒子模型)
定义了元素框处理元素内容、内边距padding、边框border和外边 距margin的方式。
Width和height指内容区域的宽度和高度
外边距margin
外边距是指围绕在边框外围的空白区域
默认情况下，html中的块级元素都存在外边距（body，h1,h2,..h6,p）
margin取值为auto时，实现的是水平方向居中显示的效果
取值：margin：10px； 表示上下左右各为10px
margin：5px 10px； 表示上下5px，左右10px
margin：5px 10px 5px； 表示上5px，左右10px，下5px
margin：5px 10px 5px 10px；表示上5px，右10px，下5px， 左10px
外边距合并
当上下外边距相遇时，他们将形成一个外边距，称为外边距合并 最终的外边距以数值大的为准
内边距padding
内边距时指内容区域与边框之间的距离
注意：会扩大元素边框所占用的区域
赋值：（取值与margin相似）
padding：value
内边距属性值可以为像素、百分比，不能是负数
padding-left
padding-right
padding-top
Padding-bottom
CSS重写
方式：将margin padding全部设置为0；将list-style-type：none；
*{margin:0px;padding:0px;list-style-type:none;}
目的：去除有些标签默认显示效果
hn,p,ul,ol,di,dt,dd,
16、背景
①背景颜色background-color
②背景图片 background-image
默认值是none，表示背景上没有放置任何图像
如果需要设置一个图像，需要用起始字母url附带一个URL地址
background-image：url(“image/a.jpg”)
③背景重复 background-repeat
取值： repeat 垂直、水平方向平铺
repeat-x 水平方向平铺
repeat-y 垂直方向平铺
no-repeat 不平铺，仅显示一次
④背景图像尺寸
属性：background-size
取值：v1 v2 宽度 高度
v1% v2% 原始大小的百分比
cover 扩展背景图像，使背景图完全覆盖背景区域
contain 将图像扩展至最大尺寸，让高度与宽度自适应 内容区域
⑤背景图片固定
属性：background-attachment
取值：scroll 默认情况下随着滚动条滚动
fixed 背景图像固定，不会随着滚动条而滚动，
实现水印效果
⑥背景定位
属性：background-position
取值：
left ：在页面左边显示
right ：页面右边显示
center ：页面中间显示
top ：页面顶部显示
bottom ：页面底部显示
x% y% ： 第一个值表示水平偏移量
第二个值表示垂直偏移量
x y ： x表示水平偏移量，y表示垂直偏移量
⑦背景绘制区域（颜色）
属性：background-clip
取值：border-box 背景被裁减到边框，默认值
padding-box 背景被裁减到内边距框
content-box 背景被裁减到内容框
⑧背景的定位区域（图像）
属性：background-origin
取值：border-box 背景图像相对于外边框来定位
padding-box 背景图像相对于内边距框来定位 content-box 背景图像相对于内容框来定位
⑨背景属性background
在一个属性中声明所有的相关的背景属性
语法：background：color url( ) repeat attachment position； 背景颜色 路径 平铺 固定 定位
background：red url(a.jpg) no-repeat fixed -35px -25px;
17、渐变属性
渐变是指两种或多种颜色之间的平滑过渡
线性渐变
径向渐变
重复渐变
渐变语法：使用background-image属性进行设置
取值：linear-gradient 线性渐变
radial-gradient 径向渐变
repeating-linear-gradient 重复线性渐变
repeating-radial-gradient 重复径向渐变
①线性渐变
linear-gradient(angle.color-point1,color-point2,...)
background-image：linear-gradient（to bottom,red 0%，green 30%， yellow 50%，blue 100%）
angle ： 为第一个参数，指定渐变的方向，可以是角度值，也可 以是关键词。如：angle：to top(odeg)/to right(90deg)/
to bottom(180deg)/to left(270deg)
color-point:表示颜色的起始点、中间点或者结束点，取值为颜色 和位置的组合。如：red 0%、green50%
②径向渐变
radial-gradient（size at position，color-point1，color-point2，...）
background-image:radial-gradient(200px at left top,red 0%,
blue 50%,yellow 100%);
position： 为第一个参数，指定渐变的圆心位置，默认值为center； 可以取值为数值、百分比或者关键字；可省略。
size表示半径；position可以为left right top bottom /x y(x 轴y轴)
如：200px at left top
color-point：表示颜色的起始点、中间点、最终点，取值为颜色和 位置的组合。如：red 10%，green 50%，blue 100%
③重复线性渐变
repeating-linear-gradient(angle，color-point1，color-point2，...)
background-image:repeating-linear-gradient(180deg,red 0px,
green 30px,red 60px);
④重复径向渐变
repeating-radial-gradien(size at position,color-point1,color-point2，...)
background-image:repeating-radial-gradient(50px at center,
red 0%,blue 50%,orange 100%);
浏览器兼容性
对于不支持的版本：
Firefox 需要加前缀 -moz-
Chrome 和Safari需要加前缀 -webkit-
Opera 需要加前缀 -o-
background-image:linear-gradient(angle.color-point1,color-point2,...)
background-image:-moz-linear-gradient(angle.color-point1,color-point2,...)
background-image:-webkit-linear-gradient(angle.color-point1,color-point2,...)
background-image:-o-linear-gradient(angle.color-point1,color-point2,...)
1、文本格式化
1）控制字体
指定字体：font-family：value value.....；
字体大小：font-size：value；（font-size:24px；）
字体加粗：font-weight：bold加粗/normal正常/value取值;
字体样式（斜体）：font-style:normal/italic;
小型大写字母显示：font-variant:normal/small-caps小型大写;
2）字体属性font
简写格式：font:font-style font-variant font-weight font-size font-family;
常用：font:12px Times,微软雅黑；
3）控制文本格式
文本颜色 color
文本水平对齐方式 text-align:left/center/right
文字线条修饰
text-decoration：none无/underline(下划线)/overline(上划 线)/line-through(删除线)
4）行高 line-height
注意：如果行高的高度高于文本自身的高度的话，那么文本将在这段区域内垂直居中。
属性：line-height：value；
取值：常用值 与所在容器设置相同高度
5) 首行文本缩进 text-indent
属性：text-indent：value；
取值：缩进的距离 比如20px
6）文本阴影 text-shadow
属性：text-shadow：h-shadow v-shadow blur color；
水平方向 垂直方向 阴影程度 颜色
7）溢出
处理空白white-space：normal/nowrap(不换行)；
文本溢出 text-overflow：clip(溢出)
elipsis(显示...);
8）文本换行（只对英文有效）
长单词换行 word-wrap:normal
break-word(强制换单词);
文本换行 word-break:normal
break-all 不关心单词显示完整问题，该换就换
keep-all; 当文本到达边界处后根据半角空 格” ”和连字符”-”进行换行
2、表格常用样式属性
边距属性：padding
尺寸属性： width height 设置表格或者单元格的尺寸
文本格式化属性
背景属性 ：设置表格或者单元格的背景色或者背景图像
Border属性 ：设置表格的边框
垂直方向对齐
vertical-align属性
取值：vertical-align:top/middle/bottom;
在表单元格中，设置单元格框中的单元格内容的对齐方式
表格特有属性
①边框合并 属性：border-collapse
取值：separate(默认值)
collapse(边框合并)
②边框边距 属性：border-spacing
取值：v1 ：水平和垂直方向的距离都是v1
v1 v2：v1表示水平间距
v2表示垂直间距
注意：必须是border-collapse为separate的时候才有作用
table的 属性cellspacing
③标题位置 属性：caption-side
取值：top 默认
bottom 靠下
④显示规则 属性：table-layout
取值：auto 列的宽度由单元格的内容决定，默认
fixed 列宽由表格宽度和列宽来决定，不受内 容来影响
3、定位
定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
①普通流定位
页面中的块级元素框从上到下一个接一个地排列。
内联元素将在一行中从左到右排列水平布置
②浮动定位
是指将元素排除在普通流之外，即元素脱离标准文档流；元素将不在页面占用空间；将浮动元素放置在包含框的左边或者右边；浮动元素依旧位于包含框之内。
浮动的框可以向左或向右移动，知道它的外边缘碰到包含框或另一个浮动框的边框为止；经常使用它来实现特殊的定位效果。
属性：float
取值：none/left(左浮动)/right(右浮动)
清除浮动
用来清除浮动所带来的影响，定义了元素哪边上不允许出现浮动 元素。
属性： clear
取值：left/right/both
float与overflow
包含框内的元素被应用了float之后，包含框的高度会发生变化，高度变成0.
在包含框内设置一个overflow属性后才能显示高度。
在父框中添加： overflow:hidden;
定位属性
position属性
取值：static 默认
relative 相对定位
absolute 绝对定位
fixed
偏移属性
top/bottom/right/left：value
堆叠顺序
z-index：value
value的数值越大，越靠近用户，就显示在上面
value的数值越小，离用户越远
如：z-index:10;显示在上面
z-index:5;显示在下面
相对定位
元素框相对于它原来的位置偏移某个距离
首先设置position：relative
然后使用 left或right、top或bottom属性设置水平方向的偏移量
绝对定位
将元素的内容从普通流中完全移除，不占据空间
相对于最近的已定位的元素来进行偏移，如果元素外围没有已定位的元素，那么他的位置是相对于body元素来进行偏移的
首先设置position：absolute
然后使用 left或right、top或bottom属性设置水平方向的偏移量
固定定位
将元素的内容固定在页面的某个位置
元素从普通流完全移除，不占用页面空间；当用户向下滚动页 面时元素框并不随着移动
首先设置position：fixed
然后使用 left或right、top或bottom属性设置水平方向的偏移量
显示方式
display属性
取值：none (隐藏)，框及其所有内容都不再显示，不占空间的隐藏
block 让行内元素表现为块级元素（显示）
inline 让块级元素表现为行内元素（显示）
inline-block 行内块元素，本身是行内元素但具备块元素的特点
显示效果
visibility属性
取值：visible 默认值，元素可见
hidden 元素不可见，但依然占据空间
collapse 用在表格元素时，可删除一行/列，不影响表格布局
opacity属性
取值：opacity：value；
value的取值从0.0（透明）到1.0（不透明）
vertical-align属性
取值：baseline 默认，元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
bottom 把元素的顶端与行中最低的元素的顶端对齐
middle 把此元素放置在父元素的中部
设置单元格框中的单元格<td>内容的垂直对齐方式。
修改图像周围的文本相对于图像的垂直对齐方式。
对于行内块级元素，如<img>，可设置垂直对齐方式。
定义行内元素的基线相对于该元素所在行的基线的垂直对齐 方式。
光 标
cursor属性
取值：default 三角
pointer 手状
crosshair 十字
text I状
wait 等待
help 箭头+问号
鼠标悬停在链接上时，光标变成手状
鼠标悬停在文本区域时，显示I形状
鼠标悬停在一个按钮上时，光标会显示箭头状
列表样式
列表项标志 list-style-type属性
无序列表取值：none 无标记
disc 实心圆
circle 空心圆
square 实心方块
有序列表取值： none 无标记
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
列表项位置 list-style-position属性
取值：outside 标记位于文本的左侧，放在文本外，默认
inside 标记放在文本内
列表项图像 list-style-image属性
list-style-image：url（“image/a.jpg”）
指定图像作为有序或无序列表的列表项标志
列表属性list-style
简写方式：list-style：type url position
标志 图像 位置
一般情况下，直接将list-style属性设置为none
CSS3 2D转换
transform属性
取值：translate(v1 v2); 左(X轴)和顶部(Y轴)位置给定的参数，
从当前元素位置移动。
rotate(30deg); 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale(2,4); 该元素增加或减少的大小，取决于宽度（X轴）和高度
（Y轴）的参数：
skew(30deg,20deg); 该元素会根据横向（X轴）和垂直（Y轴）
线参数给定角度.
matrix (0.866,0.5,-0.5,0.866,0,0); matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
2256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
