CSS(Cascading Style Sheets) 层叠样式表
css引入方式:
1、行内样式: <div style="color:red;">内容</div>
2、内嵌式: <style>div{color:red;}</style>
3、外链式:<link rel="stylesheet" href="css文件">
4、导入式:@import url("css文件");或@import "css文件";
css选择器:
1、通配符选择器 格式:*{样式属性名:属性值;} 权重 0.5
2、标签选择器 格式:标签名{样式属性名:属性值;} 权重 1
3、类选择器 格式:.类名{样式属性名:属性值;} 权重 10
4、id选择器 格式:#id值{样式属性名:属性值;} 权重 100
5、包含选择器 格式:选择器e 选择器f{样式属性名:属性值;} 权重 权重相加
6、分组选择器 格式:选择器e,选择器f{样式属性名:属性值;}
7、兄弟选择器 相邻兄弟选择器 E+F{} 紧邻E选择器后的那一个兄弟选择器F
通用兄弟选择器 E~F{} E选择器后代所有的F兄弟选择器
8、属性选择器 [attr] {} 选择含有属性attr的元素
[attr value] {} 选择属性attr的值是value的选择器
9、伪类选择器 :focus{} 当元素获取焦点时,会触发
:checked{} 选择有选择状态的元素
:disable{} 选择不可用状态的元素
:first-child{} 选择第一个子元素
:last-child{} 选择最后一个子元素
:nth-child (n) {} 选择第n个子元素
:first-of-type{} 选择同种类型的第一个子元素
:last-of-type{} 选择同种类型的最后一个元素
:nth-of-type (n) {} 选择同种类型的第n个元素
字体相关样式:
1、font-size 字体大小
2、font-family 字体系列 多个字体间用逗号隔开 英文字体名称中间有空格,用引号引起来
3、font-style 字体风格 normal 正常
italic 斜体
oblique 倾斜
4、font-weight 字体粗细 normal 正常
bold 粗体
bolder 加粗
100-900 9个层次
lighter 细体
5、line-height 行高 单位 px 若无单位,表示倍数
6、定义字体 定义字体 @font-face{font-family
文本相关样式
1、text-aligin 文本水平对齐方式 left 默认 左对齐
center 居中对齐
right 右对齐
justify 两端对齐
2、text-indent 文本首行缩进 常用单位 em
3、text-decoration 文本修饰 none 默认 无修饰
underline 下划线
line-through 中划线 删除线
overline 上划线
4、text-transform 英文字母大小转换 uppercase 全大写
lowercase 全小写
capitalize 首字母大写
5、letter-spacing 字符间的距离 (字母与字母或汉字与汉字之间的距离)
6、word-spacing 单词与单词之间的距离
7、单行省略标记 white-space:nowrap 不换行
overflow:hidden 内容溢出隐藏
text-overflow:ellipsis 文本溢出显示省略标记
8、 text-shadow 文本阴影 text-shadow: 水平方向阴影 垂直阴影 模糊距离 阴影颜色
9、box-shadow 盒子阴影(边框阴影)
box-shadow:水平方向阴影 垂直阴影 模糊距离 阴影扩展半径 阴影颜色 投影方式
阴影颜色:默认为黑色
投影方式:默认为外投影,若设置为inset,则为内投影
盒子模型
1、内容区域 width 宽度
height 高度
2、内容溢出内容区域处理 overflow visible 默认 溢出部分 可见
overflow-y hidden 溢出部分 隐藏
overflow-x scroll 显示滚动条
auto 浏览器自动处理
3、padding 内边距 padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
简写 padding : 值 ; 四个边的内边距一样
padding : 值1 值2 ; 值1是上、下内边距
值2是左、右内边距
padding : 值1 值2 值3 ; 值1是上内边距
值2是左、右内边距
值3是下内边距
padding : 值1 值2 值3 值4 ; 值1是上内边距
值2是右内边距
值3是下内边距
值4是左内边距
上、右、下、左 顺时针方向
border边框
1、border-width 边框宽度
2、border-color 边框颜色
3、border-style :none 无边框
solid 实线
dashed 虚线
dotted 点状边框
double 双线
简写:border:border-width值 border-style值 border-color值;
border-top 上边框
border-botton 下边框
border-left 左边框
border-right 右边框
margin 外边距 margin-top 上外边距
margin-botton 下外边距
margin-left 左外边距
margin-right 右外边距
简写 margin:值; 四个边的外边距一样
margin:值1 值2; 值1是上、下外边距
值2是左、右外边距
margin:值1 值2 值3; 值1是上外边距
值2是左、右外边距
值3是下外边距
margin:值1 值2 值3 值4; 值1是上外边距
值2是右外边距
值3是下外边距
值4是左外边距
上、右、下、左 顺时针方向
background-color 背景颜色
background-image 背景图片 url("图片路径")
background-repeat 背景图片重复方式 repeat 默认 垂直水平均重
no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复
background-position 背景图片位置 x y
background-size 背景图片大小 width值 height值
contain 包含 把背景图片等比例扩展至最大尺寸,以使他的宽和高适应整个背景区域 可能背景区域有留白
cover 覆盖 把背景图片等比例扩大至足够大,以使他铺满整个背景区域 可能会使图片裁剪
attachment 背景图片是否固定 scroll 默认 背景图片随页面滚动 fixed 背景图片固定不动
简写:background:bg-color值 bg-image值 bg-repeat值 bg-position值/bg-attachment值;中间空格隔开
background-image 渐变 线性渐变 background-image:linear-gradient(渐变角度,颜色1 颜色1位置,颜色2 颜色2位置,......)
渐变角度:1、单位deg 30度 30deg
2、可以用英文单词来表示渐变方向 to right 从左向右线性渐变
径向渐变 background-image:radial-gradient(shape at position,颜色1 颜色1位置,颜色2 颜色2位置,......)
1、shape 形状: ellipse 默认 椭圆
circle 圆形
2、size 渐变大小 farthest-corner(默认):指定径向渐变的半径长度为从圆心到离圆心最远的角
farthest-side 指定径向渐变的半径长度为从圆心到离圆心最远的边
closet-side 指定径向渐变的半径长度为从圆心到离圆心最近的边
closet-corner 指定径向渐变的半径长度为从圆心到离圆心最近的角
position 圆心位置 at x y
x y 取值 英文单词 left right center top bottom
数值+单位
百分比
圆角 border-radius:值; 四个圆角一样
border-radius:值1 值2; 值1是左上角、右下角
值2是左下角、右上角
border-radius:值1 值2 值3; 值1是左上角 值2是右上角、左下角 值3是右下角
border-radius:值1 值2 值3 值4; 值1是左上角 值2是右上角 值3是右下角 值4是左下角
float 浮动 none 默认 不浮动
left 左浮动
right 右浮动
position 定位 static 默认 正常文档流
relative 相对定位 相对于自己原来的位置,不会因为移动导致原来的位置不变
absoulute 绝对定位 包含框无定位 相对于浏览器定位
包含框有定位 相对于离自己很近的父元素定位
fixed 固定定位
sticky 粘性定位
过渡 transition transition-property 过渡属性 多个属性之间用逗号隔开或用all表示
transition-duration 过渡持续时间 单位:m秒或 ms秒
transition-timing-function 过渡速度 ease 默认 逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
cubic-bezier(x1,y1,x2,y2)
transition-delay 过渡延迟时间