选择符
一.元素选择符:
- 通配符*{}
Hdml中所有标签属性
设置字体font-family:
设置字体大写font-size
- 类选择器.hp{}
- 选择符#hs
- 类型选择符(标签选择符):div{}
- 关系选择符
- 子元素选择器div>p{}
父亲>儿子 不包括孙子
- 兄弟选择器p~p{}
选择同级别的标签
- 相邻选择器p+p{}
同一级别相邻的元素
- 包含选择器div p{}
包含所有子孙
- 属性选择符
包含指定属性的标签,属性与属性值均匹配的标签
- 伪类选择符
- 元素link:设置超链接a在未被访问时的样式a:link{}
- 元素:visited:设置超链接a在其链接地址已被访问过时的样式a:visited{}
- 元素:hover:设置元素在其鼠标悬停时的样式a:hover
- 元素:active:设置元素在被用户激活(在鼠标点击与释放之间发生的时间)时的样式)a:active
注意:a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后
- 伪对象选择符
- 元素::befofe{} 设置在对象前发生的内容。用来和content属性一起使用,并且必须定义content属性
- 元素::after{} 设置在对象前发生的内容。用来和content属性一起使用,并且必须定义content属性
li:befofe{
content:”>”
}
选择器的优先级
!Imporeant>内联>ID>类>标签|伪类|属性选择器>伪对象>继承>通配符
注意:!important要写在属性值后面,分号的后面
例如;
P{
color:red ! important
}
背景
background-attachment: | 背景图像是否固定或者跟随滚动 |
background-image: url(); | 背景图插入 |
background-color: | 背景颜色 |
background-position: | 背景位置 |
background-size: | 背景大小 |
background-repeat: | 背景是否平铺 |
颜色
- 颜色值
color:red
color:#ff0000;
rgb(red, green, blue)
Reba( , , , )
透明色 color:transparent
- 属性
透明度opacity:
0完全透明
1不透明
字体
- 字体样式font-style:
normal正常;italic斜体;oblique倾斜
- 字体大小font-size:
- 字体粗细font-weight:
bold加粗;bolder更粗;lighter更细;400等同于normal;700相当于bold;
4.字体名称font-family:
Microsoft Yahei(微软雅黑),SimSun(宋体),SimHei(黑体
Font:样式 粗细 大小 字体名称;
5.字体颜色color
6.字体引入
(阿里图标字体库:https://www.iconfont.cn/)
@font-face{
font-family:"abc";
src: url(/css/Day1/世纪园林/Americratika.ttf);
}
*{
font-family: "abc";
}
文本
- 文本颜色color
- 文本水平对齐方式text-align
- 垂直对齐方式vertical-align
- 行高line-height
- 文本大小写text-transform
capitalize 单词首字母大写 uppercase全大写 lowercase全小写
- 文本缩进text-indent
- 文本修饰
7.1 装饰线text-decoration-line:
下划线underline、删除线line-through、顶划线overline;
7.2 装饰线颜色 text-decoration-color:
7.3 装饰线样式 text-decoration-style:
solid(实线)dotted(点线)dashed(虚线)double(双线)wavy(波浪 线)
7.4 装饰线、文本阴影
text-shadow:水平位移 垂直位移 模糊度 颜色;
- 文本超出盒子设置overflow:
hidden;超出之后隐藏 scrol超出展示下拉框 visible超出展示
- 文本超出行设置text-overflow:
ellipsis;文本超出显示省略号
- 单词换行:word-break:
nowrap;文本不换行
列表
列表项标记的类型;list-style-type:
列表标记的图像;list-style-image:
list-style-position:
inside; 边框内显示文本以内 inherit outside边框外
表格
边框重叠border-collapse:
collapse重叠边框 separate边框独立
边框颜色border-color:
文字居中text-a'lign:center
背景色background-color:
元素
块级元素
可用{display:block}把内联元素设为块级元素
内联元素(行内元素)
可用{display:inline}把内联元素设为块级元素
内联块级元素
可用{display:inline-block}把元素设为内联块级元素
盒子模型
内边距:padding
边框:border
- 边框宽度 border-width:
- 边框样式 border-style:
solid(实线)dotted(点线)dashed(虚线)double(双线)
- 边框颜色 border-color
- 设置圆角边框border-radius
- 设置对象阴影 box-shadow
6.边框背景图片 border-image
7.宽高包含区域box-sizing:
content-box(默认内容)
border-box;从边框开始
外边距:margin
盒内布局
1.盒子尺寸开始区域box-sizing:
content-box(默认内容)尺寸包含内边距外边距和边框
border-box;从边框开始尺寸包含内边距和边框
2.盒内布局(老)
定义浏览器内核
display: -webkit-box; 谷歌浏览器
Ie:ms
Opera:o
Firefox:moz
- 子元素排列方式box-orient
默认值水平排列horizontal;
垂直排列vertical;
- 水平居中box-pack
- 垂直居中box-align
- 子元素比例box-flex
- 子元素排列顺序box-direction:
倒序排列reverse;
默认正序排列:
3.盒内布局(新)
1.按比例分配flex-grow
2.子元素排列方式flex-flow
3子元素flex-direction
4.子元素超出父级盒子后是否换行flex-wrap
- 子元素出现顺序order
定位position
- 默认没有定位:position: static;
- 想对于浏览器窗口定位:position:fixed;
- 相对定位,相对正常位置position:relative;
- 绝对定位,相对不是static的父元素定位position:absolute;
- 元素堆叠顺序值最大的在最上面:z-index:1;
fixed和absolute是不占据空间的,fixed不设置top,是相对于原来位置显示
除static外可根据top:;left:;right:;bottom:;设置上、左、右、下偏移量
浮动
- 浮动float
左浮动float:left;
右浮动float:right;
- 清除浮动
clear:both;
1》父级元素后加元素:
2》父级元素加::after{display:block;content:” ”;clear:both}
3》父级元素{overflow:hidden}
可视方式
是否可视visibility
- 对象可视:visible
- 对象隐藏:hidden
溢出展示方式overflow
- 对溢出内容不做处理:overflow:visible;
- 隐藏溢出容器的内容且不出现滚动条overflow:hidden;
- 隐藏溢出内容,隐藏内容以滚动条方式展示overflow:scroll;
- 按需出现滚动条auto
动画效果
2D/3Dtransform
2D效果
- 移动translate:;
transform: translate(10px 10px);
- 旋转rotate
- 缩放scale
- 倾斜skew
3D效果
- rotateX
- rotateY
过渡transition
- 规定应用过度CSS属性名称transition-property
- 过度效果时长transition-duration
- 过渡时间曲线transition-timing-function
- 线性过度linerar
- 平滑过度ease
- 由慢到快ease-in
- 由快到慢ease-out
- 由慢到快再到慢ease-in-out
- 过渡延迟时间transition-delay
动画
@keyframes创建动画; animate.css
@keyframes myfirst
{
from{background:red;}
to{background:yellow;}
}
animation:动画名 2s;
animate.css扩展文件
多列columns
- 列数column-count:
- 每列宽度column-width
- 列与列之间间隙column-gap
- 列与列之间边框column-rule
- 边框厚度column-rule-width
- 边框样式column-rule-style
- 边框颜色column-rule-color
媒体
检测浏览器尺寸并展示对应样式
居中总结
水平居中
- margin:0 auto;
- 文字居中:
line-height
text-alingn:center
- 基于盒子居中
{dispalay:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}