css常⽤标签
选择符
⼀．元素选择符：
1. 通配符*{}
Hdml中所有标签属性
设置字体font-family：
设置字体⼤写font-size
2. 类选择器.hp{}
<div class="hp"></div>id
3. 选择符#hs
<div id="hs"></div>
4. 类型选择符（标签选择符）：div{}
<div></div>
⼆．关系选择符
1. ⼦元素选择器div>p{}
⽗亲>⼉⼦不包括孙⼦
2. 兄弟选择器p~p{}
选择同级别的标签
3. 相邻选择器p+p{}
同⼀级别相邻的元素
4. 包含选择器div p{}
包含所有⼦孙
三．属性选择符
包含指定属性的标签，属性与属性值均匹配的标签
四．伪类选择符
1. 元素link：设置超链接a在未被访问时的样式a:link{}
2. 元素：visited：设置超链接a在其链接地址已被访问过时的样式a:visited{}
3. 元素：hover：设置元素在其⿏标悬停时的样式a:hover
4. 元素：active：设置元素在被⽤户激活（在⿏标点击与释放之间发⽣的时间）时的样式）a:active 注意：a:hover必须位于a:link和a:visited之后，a:active必须位于a:hover之后
五．伪对象选择符
1. 元素::befofe{}  设置在对象前发⽣的内容。⽤来和content属性⼀起使⽤，并且必须定义content属性
2. 元素::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：背景是否平铺
颜⾊
1. 颜⾊值
color：red
color：#ff0000;
rgb(red, green, blue)
Reba( , , , )
透明⾊ color：transparent
2. 属性
透明度opacity：
0完全透明
1不透明
字体
1. 字体样式font-style：
normal正常；italic斜体；oblique倾斜
2. 字体⼤⼩font-size：
3. 字体粗细font-weight：
bold加粗；bolder更粗；lighter更细；400等同于normal;700相当于bold；
4.字体名称font-family：
Microsoft Yahei(微软雅⿊),SimSun(宋体),SimHei(⿊体
Font：样式粗细⼤⼩字体名称；
5.字体颜⾊color
6.字体引⼊
@font-face{
font-family:"abc";
src: url(/css/Day1/世纪园林/f);
}
*{
font-family: "abc";
}
⽂本
1. ⽂本颜⾊color
2. ⽂本⽔平对齐⽅式text-align
3. 垂直对齐⽅式vertical-align
4. ⾏⾼line-height
5. ⽂本⼤⼩写text-transform
capitalize 单词⾸字母⼤写    uppercase全⼤写 lowercase全⼩写
css固定定位6. ⽂本缩进text-indent
7. ⽂本修饰
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：⽔平位移垂直位移模糊度颜⾊；
8. ⽂本超出盒⼦设置overflow:
hidden；超出之后隐藏 scrol超出展⽰下拉框 visible超出展⽰9. ⽂本超出⾏设置text-overflow: ellipsis;⽂本超出显⽰省略号
10. 单词换⾏：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
1. 边框宽度 border-width:
2. 边框样式 border-style:
solid(实线)dotted(点线)dashed(虚线)double(双线) 3. 边框颜⾊ border-color
4. 设置圆⾓边框border-radius
5. 设置对象阴影 box-shadow
6.边框背景图⽚ border-image
7.宽⾼包含区域box-sizing:
content-box(默认内容)
border-box；从边框开始
外边距：margin
盒内布局
1.盒⼦尺⼨开始区域box-sizing:
content-box(默认内容)尺⼨包含内边距外边距和边框border-box；从边框开始尺⼨包含内边距和边框
2.盒内布局（⽼）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。