css样式
层叠样式表,让页面更好看
css样式语法
例:选择器{属性:值;}
css样式创建方式
1:内部样式:在head标签中添加
例:<style type="text/css">
选择器{属性:值;}
</style>
2:外部样式:
(1):创建一个独立的html文件,后缀为.html
(2):创建一个独立的css文件,后缀为.css
(3):关联
引入方式一:(推荐使用)
在HTML页面中的head标签中添加
<link rel="stylesheet" type="text/css" href="文件地址">
rel="stylesheet" 关联="层叠样式表"
type="text/css" 类型="文本类型的样式表"
href="css文件地址"
引入方式二:(了解)
在html页面中的style标签中的第一行添加 @import url("css文件地址")
两种引入方式的区别:<br>
1:本质不同,link是标签,@import是css提供的一种写法
2:加载顺序不同,link同时加载,@import后加载
3:兼容性问题,link没有兼容性问题,@import低版本ie不兼容
4:DOM操作，link能被操作，而@import不能被操作
3:内联样式:
<标签 style="属性:值;"></标签>
<标签 style="属性:值;">
样式表优先级:
内联样式 > 内部样式 / 外部样式
css选择器
1:类型选择器(标签选择器):div a u p h1.....
标签名{} 例:div{}
2:id选择器:
<标签 id="box"></标签>
例#box{}<br>
3:类选择器(class选择器):<br>
<标签 class="box"></标签>
例:.box{}
4:群组选择器/并集选择器
选择器1,选择器2,选择器3{} 选中1 2 3,最后选中的是3个元素
.box,.btn,#box,a{}
5:交集选择器:
选择器1选择器2{} 选中选择器1,且选择器1还能通过选择器2的方式选中
<div class="box1"></div>
div.box1{}
6:通配符:选中页面中所有的元素
*{margin:0px;padding:0px;}
7:包含选择器(后代选择器):
选择器1 选择器2 选择器3{} 选中1里面的2里面的3,最终选中的是3
8:子选择器:
选择器1>选择器2{} 选中1里面的子元素2
9:伪类选择器:
a:link{} 未访问之前
a:visited{} 访问过后
a:hover{} 鼠标悬停
a:active{} 鼠标按下
【注】有顺序要求 爱恨原则 LoVe-HAte
.box1:hover{} 鼠标移入box1,改变box1
.box1:hover .box2{} 鼠标移入box1,改变box2
选择器权重
类型选择器 < 类选择器(class选择器) < id选择器
伪类选择器:0010
包含选择器:选择器权重之和
内联样式权重:1000
继承样式权重:0000 写在父元素身上,但是作用到了子元素身上,这就是继承
最高权重:!important
总结:
权重高的覆盖权重低的<br>
权重相同时,后写的覆盖先写的
css核心属性
` font-size:文本大小;
16px 默认文本大小
12px 最小文本大小
9pt=12px
em 跟随最近的被作用上的文本大小成倍数关系
rem 跟随根元素(html)的文本大小成倍数关系
font-family:字体1,字体2,字体3...;
color:文本颜色;
颜色单词:red green yellowgreen
十六进制:# 0-9 a-f #aabbcc 缩写为#abc
光色模式:rgb() rgba()
r:red g:green b:blue 0-255
a:alpha 透明度 0-1
font-weight:文本粗细;
bold 加粗视觉效果
bolder 粗体字(具有强调作用)
normal 常规文本
100-300 变细
400==normal 不加粗
500 不加粗
600-900 加粗
font-style:文本倾斜;
italic 斜体字
oblique 倾斜的视觉效果
normal 常规文本
text-align:文本水平对齐方式;
left 左对齐
center 居中
right 右对齐
justify 两段对齐
text-align:文本水平对齐方式;
left 左对齐
center 居中
right 右对齐
justify 两段对齐
vertical-align:垂直对齐方式;
top 顶部对齐
middle 居中
mottom 底部对齐
baseline 文本底部对齐
lin-height:行高; 文本垂直对齐方式
px em
行高值 < 高度值 偏上
行高值 = 高度值 居中
行高值 > 高度值 偏下
【注】当值不写单位时,默认是em为单位
text-decoration:文本修饰;
underline 下划线
line-through 删除线
overline 上划线
none 没有线
text-indent:首行缩进;
px em
【注】只针对首行有效,可以为负数
font:倾斜 加粗 文本大小/行高 字体类型;
letter-spacing:字符间距;
word-spacing:词间距;
list-style:none;取消列表符号`
背景相关属性
background-color:背景颜色;
颜色单词:red green yellowgreen
十六进制:# 0-9 a-f #aabbcc 缩写为#abc
光色模式:rgb() rgba()
r:red g:green b:blue 0-255
a:alpha 透明度 0-1
background-image:url("图片地址");
background-repeat:背景图是否重复;
repeat 重复
repeat-x 水平重复
repeat-y 垂直重复
no-repeat 不重复
background-position:水平 垂直;
px %
left center right
top center bottom
【注】只写一个数值,表示的是水平方向,且垂直方向默认居中
只写一个关键字,表示的是对应方向,另一边将居中
background-attachment:背景关联;
scroll 滚动查看
fixed 固定不动
background-size:背景图大小;
px %
【注】只写一个值,表示宽度,且高度将等比例缩放
cover 等比例缩放,图片有可能超出元素
contain 等比例缩放,元素有可能留白
background:颜色 url("背景图片") 是否重复 定位/大小 是否关联;
浮动
浮动的作用:让原本竖着排列的元素横着排列
特点:添加浮动后,将脱离文档流
文档流:元素默认从上至下,从左至右的排列顺序
盒模型的组成
内容区域: width height
内边距区域: padding
外边框区域: border
外边距区域: margin
盒模型大小计算:
w=width+左右padding+左右边框+左右外边距
h=height+上下padding+上下边框+上下外边框
内边距:
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;
padding:四个方向;
padding:上下 左右;
padding:上 左右 下;
padding:上 右 下 左;
【注】没有负数,没有auto
会撑大元素的大小
外边距：
margin-top：上外边距;
margin-left:左外边距;
margin-bottom:下外边距;
margin-right:右外边距;
margin:四个方向;
margin:上下 左右;
margin:上 左右 下;
margin:上 右 下 左;
【注】有负数,有auto 表示自适应
不会撑大元素的大小
margin常见的bug:垂直方向的外边距相遇会重合
边框:
border:边框大小 边框形态 边框颜色;
border-top:上边框大小 形态 颜色;
border-top-width:上边框大小;
border-top-style:上边框形态;
border-top-color:上边框颜色;
三角形:
width:0px;
height:0px;
border:30px solid transparent;
border-top-color:red;
文本溢出
文本溢出相关属性:
overflow:;
visibile 默认值
hidden 超出隐藏
auto 自适应
scroll 滚动查看
white-space:nowrap;
强制不换行,但是遇到br标签就换行
text-overflow:是否显示省略号;
clip 裁剪 默认值
ellipsis 显示省略号
【注】省略号步骤
width:200px;设置宽度
overflow:hidden;超出隐藏
white-space:nowrap;强制不换行
text-overflow:ellipsis;显示省略号
定位
定位：用来改变元素的位置
定位属性：position
坐标属性：left right top bottom
定位属性值：
static：默认定位，不能设置坐标
absolute：绝对定位
脱离文档流
能设置坐标
默认参考浏览器窗口改变自己的位置
或者参考最近的有定位的父级元素（默认定位除外）
relative：相对定位
占据文档流
能设置坐标
参考自身加载到页面中的初始位置
fixed：固定定位
脱离文档流
能设置坐标
参考当前浏览器窗口
在页面中固定不动
sticky:粘性定位
结合了相对定位和固定定位的特征
层级关系:
必须添加了定位的元素才能改变层级关系,默认地位除外
并列关系:都能修改层级
嵌套关系:只能改子元素的层级关系
z-index:层级关系
auto 默认值
number 具体数字,数字越大,层级越高,反之越低,可以为负数
包含块:给添加了绝对定位的子元素设置参考物,从而改变子元素的位置
1:嵌套关系
2:父元素设置position:relative;
子元素设置position:absolute;
相对定位和绝对定位的区别:
1:是否占据文档流:相对定位占据文档流,绝对定位脱离文档流
2:参考物不同:相对定位参考自身加载到页面中的初始位置
绝对地位默认参考浏览器窗口或者参考有地位的父元素(默认地位除外)
定位居中:
方式一:
position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
方式二:
position:absolute;
left:50%;
margin-left:宽度的一半;
top:50%;
margin-top:高度的一半;
锚点:
<a href="#name">点击位置</a>
<标签 id="name">跳转位置</标签>
透明度:
opacity:0.4;取值范围:0-1
filter:alpha(opacity=40); 取值范围:0-100 ie低版本识别
BFC
BFC:块级格式化上下文,内部的元素不会影响到外面的元素
触发方式:
1:根元素的最大的BFC
2：添加浮动，且浮动不为none
3：添加overflow，且值不为visible
4：添加display，且值为inline-block table-cell table-caption flex inline-flex
5：添加position，且值为absolute或者fixed
应用：
1：解决垂直方向的外边距相遇重合问题
2：两列布局
3：解决高度塌陷问题
高度塌陷：父元素未设置高度，子元素设置了浮动，父元素将高度消失，造成页面布局混乱
BFC特性：
BFC内部的元素会在垂直方向排列
BFC内的子元素的左外边距挨着BFC的左边框
BFC内的子元素不会影响到外边的元素
同属于同一个BFC内的子元素垂直距离由margin决定的，相邻的两个子元素的margin相遇会重合
BFC元素不会与浮动元素重合
BFC内的子元素将参与高度计算
表格
table > tr > td:表格 > 行 > 单元格
th:单元格标题
colspan="合并列" 左右合并
rowspan="合并行" 上下合并
border-collapse:合并为单边框;
separate 默认值
collapse 合并为单边框
table-layout:行和列的算法;
auto 默认值,自动分配宽高
fixed 固定宽度
empty-cells:空元素的显示隐藏;
show 显示,默认值
hide 隐藏
rules="添加组分割线"
groups 组分割线
rows 行分割线
cols 列分割线
all 行和列分割线
none 没有分割线
maxlength="最大输入长度"
placeholder="提示信息"
input:
type="radio"单选按钮
【注】同组的单选按钮name值需要相同,进行互斥
type="checkbox" 多选按钮
checked="checked" 默认选中
disabled="disabled" 禁用
enabled="enabled" 可用状态
select > option:下拉菜单 > 下拉菜单项目
disabled="disabled" 禁用
selected="selected" 默认选中
textarea:多行文本输入框
cols="字符宽度"
rows="行数"
resize:none;禁止拖拽 css样式
type="button"普通按钮,没有提交功能
type="file" 文件上传域
multiple="multiple" 上传多个文件
type="image" 图像域(提交按钮)
src="图片地址"
width:"宽度"
height:"高度"
alt="提示文本"
type="hidden" 隐藏文本框
PC端自适应
PC端自适应:元素的大小能够跟随这窗口或者子元素的大小自动调整
宽高自适应:
宽度:块级元素默认宽度100%
或者width:auto;
或者高度不写,默认跟随浏览器窗口或跟随父元素宽度
高度:html,body{height:100%;}
或者height:auto;
或者不写,由子元素撑起来
浮动元素的高度自适应:
高度塌陷:父元素未设置高度,子元素进行了浮动,那父元素的高度将会塌陷
解决办法:
方法1:父元素设置overflow:hidde;
缺点:超出父元素的内容会被隐藏
方法2:给父元素设置具体的高度
缺点:不灵活
方法3:在浮动子元素的下方添加一个块级兄弟元素并设置clear:both;
缺点:代码冗余
方法4:万能清除法
.clearFix:after{
content：".";
display:block;
width:0;
height:0;
overflow:hidden;
visibility:hidden;
}
伪元素选择器:
:after{content:"";} 在...之后
:before{content:"";} 在...之后
:first-letter{} 第一个字的样式
:first-line{} 第一行字的样式
【注】只针对块级元素有效
显示隐藏:
visibility:;
visible 显示,默认值
hidden 隐藏
【注】隐藏后占据文档流
关于多种隐藏方式:
1:display:none;脱离文档流
2:visibility:hidden; 占据文档流
3:opacity:0; 以透明的方式隐藏 占据文档流
4:height:0; 不占据文档流
【注】如果有文字内容,需要结合font-size:0;overflow:hidden; visibility:hidden;
5:transform:scale(0); 采用缩放的方式来隐藏,占据文档流
关于透明:
transparent 背景透明
rgba(0,0,0,0) a--alpha 透明度 0-1
opacity:0; 0-1 透明度
兼容写法:filter:alpha(opacity=0);
最小最大宽高:
min-width:最小宽度;
max-height:最大高度;
【注】低版本浏览器不支持
