css3总结
一、css概括
css:Cascading style Sheets 层叠样式表,级联样式表,简称样式表
1.作用
修饰html元素的样式
2.HTML和css的关系
html负责页面的结构的搭建,数据的承载
css,负责让html元素变得好看
以html为基准,一层层的编写样式
3.html的属性和css的样式选择谁好?
W3C建议我们尽量使用css的方式来取代html的属性
css样式,可以让代码进行重用(重用效果有限)提供了可维护性
二.css的语法规范
1.使用css样式
①内联样式(行内样式)
任意任意元素都有style属性,在style中定义的样式,叫内联样式
如果style中有多个样式,使用 ; 来分割
< div style= "color:red;background-color:pink" > < /div> 内联样式
特点:1.不能重用
2.内联样式优先级最高项目中一般不用
②内部样式
在head标签中,定义styel标签
在style标签中,定义样式
选择器{ 样式声明; 样式声明; .. .. .}
特点:1.代码可以重用
2.重用只能在当前页面重用
项目中用的少
③外部样式
单独创建一个css文件编写样式
在html中的head标签中,调用这个样式
< link rel= "stylesheet" href= "名称.css" />
2.css特性
①继承性
多数样式是可以被子元素继承
( 尺寸,边框,内外边距.. .. .)
div {
color: red;
}
a标签不能继承父级的字体颜色
②层叠性
可以为一个元素定义多个样式规则
如果这些样式规则不冲突,那么都可以应用到元素上
③优先级
当为一个元素设置很多样式
其中样式发生了冲突,要按照样式的优先级来应用样式
默认优先级规则: 最高----内联样式
内部样式和外部样式,就近原则( 谁距离元素目标标签近使用谁)
最低---浏览器默认样式
④使用关键字调整样式的优先级
! important 提升优先级
h4{ color:
注意:1.! important比内联优先级还高
2.内联中,语义要求,不允许添加! important;
三.基础选择器(重点*****)
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式
选择器就是一个条件,符合这个条件的元素,都可以使用定义好的样式
2.选择器的详解
①通用选择器
*{ 样式声明} 所有元素都要匹配这个样式
要求尽量少用*,因为效率非常低
*{ margin:0; padding:0; } 所有元素的内外边距清空
css rest 样式重置
由于浏览器对同一篇代码的样式有可能不同
我们写代码的时候,需要把一些样式进行统一,或者清除
这种行为就叫做css rest
②标签选择器,元素选择器
一般用于定义某种元的公用样式
元素名称{ 样式声明} div{ color:red; }
页面中所有对应元素,都要应用这个样式
③id选择器
只对当前页面中,一个标签生效
一般项目中id选择器,单独使用比较少
项目中
< p id= "p1" >
④类选择器
定义页面上的一个样式片段,哪个元素想用,就使用class调用,可以不停的被重用
.类型{ 样式声明} 声明类名有点
< any class= "类名" > 调用类名没有点
类选择器的特殊使用方式
1.多类选择器,一个class中,引用多个类名
< h4 class= "text-red bg-yellow" > 类选择器< /h4>
2.分类选择器
1.标签选择器.类选择器{ 样式声明}
调用这个类名的这个标签,应用这个样式,提升权值
2 .类选择器.类选择器{ 样式声明}
同时引用了这两个类选择器的标签,应用这个样式
注意类名的定义规则
1.定义类选择的时候,点不能省略
2.类名不能以数字开头
3.只能包含- _
4.见名知意
⑤群组选择器
选择器1,选择器2,选择器3.. .. { 样式声明}
⑥后代选择器
元素的后代关系,匹配元素
后代关系,一级或多于一级的嵌套
选择器1 选择器2 选择器3 .. . { 样式声明}
⑦.子代选择器
通过元素的子代关系,匹配元素
子代关系,一级的嵌套
选择器1> 选择器2> 选择器3.. .. { 样式声明}
后代选择器和子代可以混写
⑧伪类选择器
匹配元素不同状态下的样式
1.链接未被访问时的状态
:link{ 样式声明}
2.链接已访问的状态
:visited{ 样式声明}
3.鼠标悬停时的状态
:hover{ 样式声明}
4.元素被激活时的状态
:active{ 样式声明}
5.元素获取焦点时的状态
:focus{ 样式声明}
⑨选择器权值问题
! imprtant > 1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器* 0
继承的样式 无
权值:便是当前选择器的重要程度,权值越大优先级越高
特点:
1.当一个选择器中含有多个选择器时,需要将所有选择器的权值进行相加,结果越大优先级越大
2.权值相同时,使用就近原则
3.群组选择器权值不能相加,单独计算
4.样式后面添加! important直接获得最高权值,内联样式不能添加! important
5.权值计算结果不能超过这个权值的最大数量级( 1万个1相加,也比10小)
四.尺寸和边框
1.尺寸(绝对单位 相对单位 宽高)
设置元素在页面中的宽高
width:
取值:以px为单位的数字
rem为单位的数字
%,父元素宽度百分比
height:
取值:以px为单位的数字
rem为单位的数字
%,父元素没有定义高度,就失效
父元素定义高度,就是这个高度的百分比
max-width 限制元素最大的宽度
min-width 限制元素最小的宽度
max-height
min-hieght
注意,如果给img设置max-width:100%
这里的100%是图片原始尺寸的100%
意味着,这张图片可以缩放,但是最大不能超过本身原始尺寸的100%
尺寸的单位
1.px像素
2.in尺寸 1 in= 2.54cm
3.pt磅值,多于用定义字号大小
1pt= 1/72in
4.cm
5.mm
6.em:以父元素设置的值为一个基本单位,1.5em 就是1.5个基本单位
7.rem:以html标签设置的值为一个基本danwei
如果html没有设置值,1rem 默认为16px
8.% 多数是父元素设置值的百分比
2.页面中可以设置尺寸的元素
1.所有块级元素都可以设置尺寸
2.大多数行内元素不能设置尺寸
3.所有行内块可以设置尺寸( input)
4.所有自带宽高属性的元素,都可以设置宽高( img,table)
3.元素默认的宽高值是多少
块级 行内 行内块 不写宽度,默认宽度是父元素的100%不写高度,高度靠内容撑开,如果没有内容,高度为0 不写宽高时,宽高都是靠内容撑开。没有内容就为0 不写宽高,浏览器会给一个默认的宽高。但是,不同浏览器给的默认宽高,大小不同。input是不同浏览器差异最大的元素,需要写css reset
4.溢出的处理+合法的颜色值
当内容较大,元素区域较小,就会发生溢出效果
默认都是纵向溢出
overflow: visible; 默认值,溢出部分可见
hidden; 溢出部分不显示
scroll; 显示滚动条
auto;不溢出就没有滚动条,溢出才有
overflow-x: 设置水平轴的滚动条
overflow-y: 设置水平轴的滚动条
实现横向溢出的方式
需要在比较宽的容器上,添加一个窄的父元素,给这个父元素写溢出属性
溢出的底层很特殊很复杂,可以解决很多css中的特殊问题
但是,最佳方案都不是用溢出解决
1.英文单词( red ,green,yellow.. .. .. .)
2.
3.
4.十进制 rgb( r,g,b) 每一个数的取值范围 0~255 0~ff
5.rgba( r,g,b,a) alpha透明度0~1 1为不透明,0为全透明
不常用的颜色取值
6.rgb( r%,g%,b%) 0~100% 0~255的百分比
7.hsl( h,s,l) 色段,饱和度,亮度
5.边框
①边框的简写方式
border: width style color;
width: 边框的宽度
style: 边框的样式
取值:solid 实线
dotted 虚线( 点)
dashed 虚线( 线)
double 双实线
color:边框的颜色,可以取合法的颜色值,transparent(rgba( ,,,0) )
细节:1.最简方式 border:style;
2.去除边框 border:0; border:none;
②边框单边的定义
单独定义一条边的3个属性
border-top/right/bottom/left: width style color;
③单属性的定义
同时设置4条边的某一个属性
border-width
border-style
border-color
④单边单属性定义
border-top-width
border-top-style
border-top-color
border-right-width
border-right-style
border-right-color
border-bottom-width
border-bottom-style
border-bottom-color
border-left-width
border-left-style
border-left-color
⑤边框的倒角
把边框倒成圆角
一次性过设置4个角
border-radius:
取值:以px为单位的数字
% 50%就是圆
单角的设置
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
⑥边框阴影(跟边框没关系)
box-shadow:h-shadow v-shadow blur spread color;
h-shadow 阴影水平偏移量
v-shadow 垂直偏移量
blur 阴影的模糊程度
spread 阴影大小
color 阴影的颜色
阴影的最简方式 box-shadow:h-shadow v-shadow;
内部阴影 box-shadow:h-shadow v-shadow blur spread color inset;
⑦轮廓
绘制于边框外的线条
outline:width style color;
outline:0; 取消轮廓
五.框模型—盒子模型
1.框模型是什么
框模型----元素在页面上实际占地空间的计算方式( 计算公式)
默认的盒子模型
元素实际占地宽度= 左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素实际占地高度= 上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距
2.外边距+外边距的特殊效果
改变外边距,元素会发生位移效果
当4个方向外边距发生了冲突,保证左和上准确
①语法
margin:v1; 同时设置4个方向外边距
margin-top:
margin-right
margin-bottom
margin-left
取值:1.以px为单位的数字
2.% 以父元素的宽度的百分比
3.auto 上下外边距auto无效
margin:auto; 让块级元素水平居中(块级元素定义了宽度)
margin-left:auto; margin-right:auto;
②简写方式
margin:v1; 同时设置4个方向外边距
margin:v1 v2; v1:上下 v2:左右
margin:0 auto; margin:20px auto;
margin:v1 v2 v3; v1:上 v2:左右 v3:下
margin:v1 v2 v3 v4; 上右下左
margin的使用时机:元素位置的微调
外边距的特殊效果
1.外边距合并
两个垂直( 纵向) 相遇的外边距会合并成一个,值以大的为准
2.自带外边距的元素 body有8px
写样式刚开始 就清空所有元素的内外边距 -----> css reset
3.块级,行内,行内块的差异
4.外边距溢出 在父元素的第一个儿子的位置处,添加空的< table> < /table>
3.内边距
边框到内容区域之间的距离
改变内边距,视觉上是改变元素的大小,但是元素的尺寸并没有改变
内边距的颜色,就是元素的背景色
内边距的使用场合,撑开元素
padding没有auto
padding:v1; 设置4个方向内边
padding-top
padding-right
padding-bottom
padding-left
简写方式
padding:v1;
padding:v1 v2; v1:上下 v2:左右
padding:v1 v2 v3; v1:上 v2:左右 v3:下
padding:v1 v2 v3 v4; 上右下左
4.设置框模型计算方式
默认
元素实际占地宽度= 左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
改变框模型的计算方式
box-sizing:content-box; 默认的框模型计算方式
border-box;设置width包含内容区+padding+border
元素实际占地宽度公式:设置width+左右外边距
当内部元素的尺寸使用百分比设置的时候,一般都要使用border-box
六.背景
1.背景颜色
background-color:合法颜色值 transparent
2.背景图片
background-image: url( 09.png) ; 资源添加双引号,单引号,不加引号都正确
3.背景图片的平铺
background-repeat: repeat; 默认值,平铺
no-repeat 不平铺
repeat-x x轴平铺
repeat-y y轴平铺
4.背景图片的定位
background-position:
取值 1.x y 以px为单位的数字
2.x% y%
3.关键字 x:left/center/right y:top/center/bottom
注意,当background-position:20%; 只取一个值,设置的x,y轴默认居中
5.设置背景图片的尺寸
background-size:
取值,1个值,同时设置x,y轴大小
2个值,分别设置x,y轴大小
3.以px为单位的数字
4.%
其他取值
5.cover 覆盖,背景图等比例缩放,完全充满容器,背景图有可能显示不完整!
6.contain,包含,背景图等比缩小,让容器显示一张完整背景图,容器可能有空白!
6.背景图片的固定
background-attachment:
scroll; 默认值,背景图随着页面滚动条,滚动
fixed; 背景图相对于body固定,不随着页面滚动条滚动
但是只会显示在本容器当中
当图片进行定位时,相对于body去定位
7.简写方式
background:color url( ) repeat attachment position;
注意,简写方式中没有size
最简方式 background:color
background:url()
使用简写方式要注意,不要用简写方式去替换之前的部分样式
七.渐变 gradient
1.什么是渐变
渐变是指多种颜色,平缓变化的一种效果
2.渐变的主要因素
色标: 一种颜色,这种出现的位置
一个渐变至少2个色标
3.渐变的分类
1.线性渐变,以直线的方式填充渐变色
2.径向渐变,以圆的方式填充渐变色
3.重复渐变,将线性,径向,反复的实现
4.线性渐变
属性 background-image:
取值:linear-gradient( 方向,色标1,色标2,.. .. .. .. .. ) ;
方向:1.关键字,写终点 to top ↑
to right →
to bottom ↓
to left ←
2.角度值 0deg to top
90deg to right
180deg to bottom
270deg to left
色标 1.位置%
2.位置px
3.不写位置,默认每个元素平均分配
5.径向渐变
background-image: radial-gradient( 半径 at 圆心x 圆心y,色标1,色标2,.. .. .. .. .. ) ;
半径,以px单位的数字
圆心,1.关键字 x:left/center/right y:top/center/bottom
2.以px为单位的数字
3.%
色标,1.位置使用%,是半径的百分比
2.位置使用px,使用px跟半径没关系了
6.重复渐变
①重复的线性
background-image:repeating-linear-gradient( 方向,色标1,色标2,.. .)
②重复的径向
background-image: repeating-radial-gradient( 半径 at 圆心x 圆心y,色标1,色标2,.. )
7.线性渐变的浏览器兼容性问题(IE8.0以下不考虑)
写css兼容的行为,叫做写css hack
在代码中添加,代表内核的前缀,使用不同浏览器打开,会自动执行对应内核的代码
-webkit- chrome/safari
-moz- firefox
-o- opera
-ms- IE
如果线性渐变,添加了前缀做兼容,方向一定写起点( 不能有to) ,不能写终点
不添加前缀,方向要加to,写终点
如果想做兼容,至少写4套
background: -moz-linear-gradient( top,
background: -webkit-linear-gradient( top,
background: -o-linear-gradient( top,
background: -ms-linear-gradient( top,
八.文本格式化(*******)
1.字体属性(字体大小,加粗,样式,简写)
1.设置字号的大小
font-size:
取值,px/pt为单位的数字
em/rem
2.font-family
font-family:微软雅黑,"mv boli" ,chiller;
3.字号的加粗
font-weight:
取值,1关键字 lighter normal bold bolder
2.100的整倍数 100~~1000 超过1000就失效了
400---normal 600---bold 700--bolder
4.字体的样式
font-style: italic 斜体
normal 普通,没有样式
5.小型大写字母
font-variant: small-caps;
6.字体设置的简写
font:style variant weight size family;
最简方式 font:size family;
2.文本属性(文本颜色,对齐方式,行高,文本线条的修饰,首行缩进,文本阴影)
1.文本颜色
color:合法的颜色值
2.文本对齐方式
text-align: left/center/right/justify
详细说明:块级水平对齐不能使用text-align:center. 只能用margin:0 auto;
text-align只对内部的文本,行内,行内块有效
3.文本的垂直对齐方式,行高
定义一行文本的高度
特点:如果行高大于文本本身的大小,文本会在行高范围内,垂直居中显示
line-height: 以px为单位的数字
不带单位的数字,代表字号的倍数
通常会把行高设置为与容器高度相同,让文本在容器垂直居中
但是,如果文本超过一行,不建议使用( 使用内边距去调整)
4.文本线条的修饰
text-decoration: none; a标签去除下划线
underline 添加下划线
overline 添加上划线
line-through 添加删除线
5.首行的缩进
text-indent: 取值以px为单位的数字
6.文本阴影
text-shadow: h-shadow v-shadow blur color;
h-shadow 水平偏移量
v-shadow 垂直偏移量
blur 模糊程度
color 颜色
九.表格的样式
1.表格的常用属性
①table
尺寸,边框,背景,文本,内外边距,都有效
但是,注意border只会设置table的边框,只有最外边的一圈
②td/th
尺寸,边框,背景,文本,内边距,都有效
外边距无效
vertical-align: 设置文本垂直对齐方式
取值 top/middle/bottom
2.table是一种特殊的显示方式
table的真正大小,设置的尺寸和内容,谁大听谁大
同一行中,所有列的高度,以最高的为准
不同行中,相同列的宽度,以最宽的为准
table在浏览器的渲染方式,先把所有内容读取到内存中,再一次性渲染。效率低
3.表格特有属性
①边框合并
border-collapse:separate ; 默认缺省值,边框分离状态
collapse 边框合并状态
②边框的边距(td不能设置margin,所以使用边框边距来设置)
border-spacing: 以px为单位的数字;
前提,边框是分离状态的时候才有效
③标题的位置
caption-side: top ; 默认 在表格的上方
bottom 在表格的下方
④设置表格显示规则
table-layout:auto;默认值 自动布局表格 fixed; 固定布局的表格
自动布局表格
单元格的大小会自动适应内容
表格复杂时,表格的加载速度较慢
自动布局比较灵活
适用于不确定每列大小,并且不复杂的表格
固定布局表格
单元格大小,严格遵循设置的尺寸
任何情况下,都会加速表格加载
不够灵活
适用于确定每列大小的表格
十.定位(*****)
1.什么是定位
控制元素在页面中的位置
2.分类
1.普通流定位
2.浮动定位
3.相对定位
4.绝对定位
5.固定位
3.普通流定位(默认文档流定位)
1.每个元素在页面上都有自己的空间( 所有元素皆为框)
2.每个元素都是从父元素的左上角开始渲染
3.块级元素是按照从上往下的方式,逐个排列,单独成行
4.行内和行内块是多个元素在一行中显示,从左往右排列,一行放不下就换行
4.浮动定位
让块级元素横向显示
float: none; 默认值,无任务浮动效果----> 默认文档流
left; 让元素浮动之后停靠在父元素的最左边,或者其他已浮动的后面
right; 让元素浮动之后停靠在父元素的最右边,或者其他已浮动的后面
浮动特点:
1.元素一旦浮动,脱离文档流(不占页面空间,后面没有脱离文档流的元素会上前补位)
2.浮动元素,会停靠在父元素的最左边/最右边,停靠其他已浮动元素的边缘上
3.父元素横向放不下所有的已浮动元素,最后显示不下的部分,会自动换行
4.浮动用于解决块级元素横向显示的问题
5.浮动引发的特殊情况
①浮动元素有占位问题
当父元素显示不下所有浮动元素时,显示不下的元素会自动换行
但是,已浮动元素,会根据自己的浮动方向发生占位。不让换行的元素占据自己的位置。
②元素一旦浮动,如果次元素没有设置宽度,浮动元素的宽度靠内容撑开
③元素一旦浮动,都会变为块级元素(设置尺寸有效,垂直外边距有效)
④文本,行内,行内块元素,table,是不会被浮动元素压在下面,而是避开浮动元素显示
ps:元素脱离文档,会发生4件事
1.元素不占页面空间
2.后续未脱离文档流的元素上前补位
3.如果脱离文档流的元素未设置宽度,宽度靠内容撑开
4.元素一旦脱离文档流,会自动变成块级元素
6.清除浮动元素带来的影响
浮动元素,会给后面不脱离文档流的元素带来影响,后续元素会上前补位
clear: left;清除左浮动带来的影响
right; 清除右浮动带来的影响
both;左浮动和右浮动,都清除
none; 不清除,默认值
7.高度坍塌
发生高度坍塌的原因
父元素没有设置高度,靠子元素撑开高度,但是所有子元素都浮动,父元素在文档流中失去了所有儿子,就认为自己没有高了
解决方案
1.给父元素设置高度,可行!!但是很多时候,不知道整体是多少!!!
2.父元素也浮动,弊端,会影响其他元素结构
3.给父元素设置overflow:hidden/auto; 弊端,父元素想溢出显示,就不行了,不推荐!!
4.给父元素添加一个不设置高不设置宽的空块级元素,当做小儿子
这个小儿子,设置clear:both.
5.使用伪类
::after{
content: "" ;
display: block;
clear: both;
}
8.浮动
元素一旦浮动,会脱离文档流
脱离文档流的元素会发生4件事
1.不占页面空间
2.后续元素上前补位
3.如果脱离文档流的元素,未定义宽度,元素脱离文档流后,宽度是靠内容撑开
4.元素一旦脱离文档流,会变成块级元素
9.其他样式属性(display visibility vertical-align 光标的设置)
1.显示方式
①什么是显示方式
决定了元素在网页中的表现形式( 块级,行内,行内块,table.. .. )
②语法
display:block 让元素按照块级元素的规则去显示
inline 让元素按照行内元素的规则去显示
inline-block 让元素按照行内块级元素的规则去显示
table 让元素按照table元素的规则去显示
none 隐藏,脱离文档流的隐藏
2.显示效果
visibility:visible; 默认值,可见的
hidden;隐藏
考试题,和面试
visibility:hidden和display:none;
答:visibility:hidden 的隐藏,是不脱离文档流的隐藏,占空间
display:none; 是脱离文档流的隐藏,不占空间
3.透明度
gba( r,g,b,alpha)
opacity:0~1 0全透明,1不透明
问题,rgba( r,g,b,alpha) 的区别opacity
rgba( ) 只会改变当前颜色的透明度
opacity要是跟元素相关的颜色,都会改变,包括后代元素的所有颜色
4.垂直对齐方式
vertical-align
①表格中使用td tr table
取值:top/middle/bottom
②给img或者行内块定义vertical-align
改变的是元素前后的文本/行内元素,与本元素的垂直对齐方式
img---> top/middle/bottom / baseline(默认值) 同常,会把默认的baseline修改成其他值
行内块 没有baseline 的取值 只有top/middle( 默认值) /bottom /
5.光标的设置
cursor:
取值:1.default 默认值,箭头
2.pointer 手指头
3.crosshair 十字
4.wait 等待
5.help 帮助
6.text 文本
6.列表的样式
1.设置列表项的样式
list-style-type: disc/circle/square/none;
2.把列表项设置成图片( 图片需要小)
list-style-image: url( sinablog.png) ;
3.列表项的位置 ul自带上下外边距16px。左内边距40px
list-style-position:outside( 默认) 在li外,在ul的左内边距中
inside; 在li内部
4.简写方式
list-style:type image position;
项目中最常用的写法 list-style:none; 给ul去点
项目,经常使用ul> li替代div布局
10.相对 绝对 固定 定位
1.公共语法
position
取值:static 默认值,静态(默认文档流)
relative 相对定位
absolute 绝对定位
fixed 固定定位
注意,当一个元素被position修饰,并且取值为relative,absolute,fixed其中一种时
1.这个元素被称为已定位元素
2.这个元素解锁了4个偏移属性
top:元素到顶端的距离
right:
bottom:
left: 元素到左边的距离
3.同时定义top/bottom,听top
同时定义left/right 听left
2.相对定位
position:relative; 配合偏移属性使用
1.相对定位是不脱离文档流
2.相对定位参照物,相对自己原来的位置做偏移
3.如果相对定位元素,不写偏移属性,效果和没写定位一样
使用相对定位的场合
1.元素位置的微调,类似于margin
2.相对定位,一般作为绝对定位元素的祖先级已定位元素,使用!!!!
3.绝对定位
position:absolute
1.绝对定位脱离文档流
2.相对谁偏移
①如果该元素,没有已定位的祖先级元素,相对body左上角做偏移
②相对于最近的,已定位的,祖先级元素做偏移
3.祖先级,已定位元素,用什么定位好
项目中,经常使用祖先级已定位元素为relative
4.固定定位
position:fixed;
永远以body左上角偏移
脱离文档流
5.堆叠顺序
1.默认的堆叠顺序,后写的定位元素,堆叠顺序高( html编写顺序) ,永远大于0,小于1
2.手动设置堆叠顺序 z-index:取值无单位数字
3.float的二楼,和定位的堆叠,不是一个体系,不能比较
4.只有已定位元素才支持z-index
5.堆叠顺序,对父子级关系无效,儿子永远在爹上面显示