css知识点汇总（包括css思维导图，⽂章最后）⽬录
⼀、css三种引⼊⽅式
1.内部样式表-----head标签内部的style
<style>
#yy{color: blue;}
</style>
2.内联样式----在标签⾥写style（开发时不要使⽤）
<h1 id="yy">宇宇是个⼤笨蛋</h1>
3.外链式---- <link rel="stylesheet" href="css/style.css"> ----推荐使⽤
<link rel="stylesheet" href="style.css">
⼆、css选择器有哪⼏种？
（1）id选择器
相当于每⼀个的⾝份证号，id唯⼀(id的名不能重复)开发⼀个页⾯时，id不能出现多次（以京东⽹页为例）
（2）class选择器
类选择器（可以实现重复使⽤）
（3）标签选择器
（4）伪类选择器 a标签
a:link----------定义了正常链接的样式（有可能存在缓存问题）
a:visited-------定义访问过链接的样式
a:hover------⿏标悬停时候的链接样式
a:active-----⿏标按下时的链接样式
(5)派⽣选择器-----隔离作⽤域-------（常⽤）
.work h1 {
color: violet;
background: orangered;}
(6)后代选择器
1.  A B------A选择器⾥层的B选择器
2.  A,B------它的样式既有A选择器的样式，也满⾜B选择器的样式
3.  A>B-----直接⼦元素（只能管ul的⼀级⽬录li, 也就是li⾥层的ul li 样式不会被外层影响）空格表⽰⾥层
· 样式写法:
#id {
属性名1: 属性值1,
属性名2: 属性值2 }
.class {
属性名1: 属性值1,
属性名2: 属性值2 }
标签 {
属性名1: 属性值1,
属性名2: 属性值2}
·选择器优先级:
!important>内联选择器>id选择器>类选择器>标签选择器>伪类>*通配符选择器（匹配页⾯中所有的标签）技巧: 选择器选择的范围越⼴，那么它的优先级越低
!important(慎⽤)
三、⾏标签和快标签
⾏标签  ---- 宽度和⾼度设置⽆效
span a
块标签  --- 宽度和⾼度设置有效
div p h1-h6  ul li dl dt dd
(1)如何把⾏标签转化成块标签:
属性: display:block;(常⽤)
(2)块转⾏
属性: display:inline;(基本不使⽤)
(3)将块元素转成⾏内块
属性: display:inline-block; (既能让块元素并排显⽰，同时也能设置容器的宽度和⾼度) (常⽤) * {padding: 0;----内边距
margin: 0;----外边距}
清空默认边距-----同时处理了不同浏览器的兼容问题（默认边距）
！浏览器默认的外边距  8px
！display:inline-block；本⾝存在bug  （默认有空隙）text align center
四、⽂字相关的样式
（1）⽂本颜⾊
关键字  ---  color:red;
⼗六进制 --- color:#333333;
rgb --- (255,255,0)---------red  green  blue
权重相同的情况下，后⾯的样式会覆盖前⾯的样式
(2) ⽂字⼤⼩
浏览器默认的字号16px  最⼩字号12px，不允许⽐12px再⼩啦！font-size:16px;
(3) ⽂字背景⾊
background: red;
(4) ⽂字加粗
font-weight:bold;
(5) ⽂字字体
font-family: '微软雅⿊'
(6)⽂字下划线
去掉下划线    text-decoration:none;
加下划线 text-decoration:underline;
(7) 边框线
实线-----solid      border: 1px solid #333333; (常⽤)
虚线-----dashed    border: 1px dashed yellow;
点状-----dottded  border: 1px dotted red;
(8)默认加粗⽂字样式去掉（h1）
font-weight:normal;
(9) 如何让⽂字⽔平居中
text-align:center;  left;  right;
text-align:center；作⽤是让块元素⾥的⾏内元素居中(10) 如何让⽂字垂直居中
height = line-height时
(11)段落⾸⾏缩进
实际应⽤场景（⽂章详情页⾯）
text-indent:2em;    ⾸⾏缩进了2个⽂字的宽度  em单位必须加如果数值为0，后⾯不⽤加单位（px  em  rem）
⽂字省略号:
overflow:hidden;----溢出隐藏
overflow: auto;----⾃适应（内容过多会⾃动出滚动条）
text-overflow: ellipsis;---省略号
⽂字⾃动出省略号
overflow:hidden;
text-overflow: ellipsis;
容器的宽度；
white-space: nowrap；不换⾏
p{
width: 200px;
/* height: 100px;  */
border: 1px solid blue;
color: palevioletred;
/* text-indent: 2em; */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
⾏⾼
段落 line-height:2;  (不⽤加单位)
⾸⾏缩进  line-height:2em;（加单位）
2em=⾸⾏缩进了2个⽂字的⼤⼩
五、背景:
背景图⽚的写法
background:url("img/a.jpg");
背景不平铺
background-repeat: no-repeat;
背景图⽚的位置 x,y
(x--------⽔平⽅向 单位可以是 px  %    left/right/center 任意均可）(y--------垂直⽅向 单位可以是 px  %    top/bottom/center 任意均可）background-position: x,y;
background-position: left center;(常⽤)
background: url("img/a.jpg") no-repeat left center;
实现带有背景颜⾊的背景图⽚
background:#333 url("img/a.jpg") no-repeat left center;
六、前端规范:
· html页⾯部分
(1)标签要成对出现
(2)标签与标签对齐，⾥层的标签要有⼀个tab缩进
(3)开发项⽬的时候⼀定要写好注释

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