css基础语法简记

目录

1.1 内嵌式

写在style标签里

1.2 外联式 引入css文件

1.3 行内式

写在标签里面

2.1 标签选择器 p{属性名：属性值}

2.2 类选择器 可以控制多个标签 .day{}

2.3 id选择器 只能用于控制一个标签 #day{}

2.4 通配符 *{}

3.1 样式简记

垂直居中 单行 行高=高度

优先级 继承<通配符<标签<类<行内

3.2 清除默认样式

3.3 版心居中

3.4 外边距塌陷

3.5 行内元素垂直内外边距

3.6 结构伪类选择器

3.7 伪元素

3.8 浮动

3.81 清除浮动

3.9 定位

4.0 垂直对齐方式

4.1 光标的类型

4.2 圆角边框

4.3 overflow

4.4 扩展

---

1.1 内嵌式

写在style标签里

1.2 外联式 引入css文件

<link rel="stylesheet" href="">

1.3 行内式

写在标签里面 <div style="color:red"></div>

2.1 标签选择器 p{属性名：属性值}

2.2 类选择器 可以控制多个标签 .day{} <div class="day"></div>

2.3 id选择器 只能用于控制一个标签 #day{} <div id="day"></div>

2.4 通配符 *{}

3.1 样式简记

字体大小:font-size:12px; 字体粗细:font-weigth:normal/bold; 100~900纯数字 normal=400,bold=700 字体倾斜:font-style:normal/italic; 字体:font-family font复合属性:font:style weight size/line-height 字体;缩进:text-indent:2em;(2个字大小) 水平居中text-align:left/center/right;(文本/span/a/input/img) 文本修饰:text-decoration:underline/line-through/overline/none; 行高line-height;

text-overflow:ellipsis;溢出文字用省略号显示;cursor:pointer;鼠标小手;vertical-align:middle;行内块居中对齐

input::placeholder{}

垂直居中 单行 行高=高度

margin:0 auto;

父选择器 后代选择器{}

子代：选择器1>选择器2{}

并集选择器:选择器1，选择器2{}

交集选择器：选择器1.选择器2{}（同时满足多个选择器的标签）

伪类选择器 a:hover{}

背景图片:background-img:url()

background-repeat:repeat/no-repeat/repeat-x/repeat-y;

background-position:水平 垂直;

display:block/inline-block/inline；

优先级 继承<通配符<标签<类<id<行内<!important

复合选择器权重(行内,id,类,标签)

solid dashed dotted

border-方向词:1px solid #ccc;

padding：上 右 下 左；/上 左右 下/上下 左右 margin

box-sizing:border-box;(加了padding,border不会撑大盒子)

3.2 清除默认样式

*{

margin:0;

paddding:0;

}

ul{

list-style:none;

}

a{

text-decoration:none;

}

input{

outline:0;

}

IE6 *zoom:1;

3.3 版心居中

margin:0 auto;

3.4 外边距塌陷

给父级添加border/给父级添加overflow:hidden;/父级转换成行内块display:inline-block;/设置浮动

3.5 行内元素垂直内外边距

line-height:;

3.6 结构伪类选择器

E:first-child{} E:last-child{} E:nth-child(n){} E:nth-last-child(n){}

偶数:2n/even; 奇数:2n+1/2n-1/odd; 前5个:-n+5 找到从第5个往后:n+5

li:first-child a:nth-child(3){}

3.7 伪元素

::before{} ::after{}

3.8 浮动

（浏览器解析行内块或行内标签时，如果标签换行会产生一个空格的距离）

float:left;

脱离标准流的控制，不占原来的位置；可以覆盖标准流中的元素；下一个浮动会在上一个浮动元素后面左右浮动；一行可以显示多个

css书写顺序 1、浮动/display;2、盒子模型 ；3、文字样式

3.81 清除浮动

父级浮动无高度，子级标准流则受浮动影响

1.父级高度 2.额外标签法：父元素内容最后添加一个块级元素 .clearfix{clear:both;}

3.单伪元素清除法：父标签加clearfix类 .clearfix::after{content:'';display:block;clear:both;height:0;visibility:hidden;}

4.双伪元素清除法：父标签加clearfix类

.clearfix::before,

.clearfix::after{

content:'';

display:table;

}

.clearfix::after{

clear:both;

}

5.overflow;父标签样式加overflow:hidden;

所有网站的首页index.html

3.9 定位

position:static/relative/absolute/fixed;

static:标准流

relative:相对定位 （1.占有原来的位置 2.相对自己原来的位置3.任具有标签原有显示的特点）left>right top>bottom

absolute:若父级有定位则以这个父级为参照物、若父级没有定位则以body为参照物

绝对定位的盒子不能使用margin: 0 auto居中; left:50%;top:50%; (参照物的50%)[margin-left:-盒子宽度的一半;margin-top:-盒子高度的一半];/位移自己宽度高度的一半:transform:translate(-50%,-50%);

fixed:固定定位；(改变位置参考浏览器窗口位置)

两标签定位，后者在上/z-index:;

4.0 垂直对齐方式

vertical-align:baseline/top/middle/bottom;

浏览器遇到行内和行内块标签当做文字处理，默认文字是按基线对齐

4.1 光标的类型

cursor:default/pointer/text/move;

4.2 圆角边框

border-radius:10px;4个角 左上 右上 右下 左下 左上 右上左下 右下 没值看对角

4.3 overflow

overflow:visible/hidden/scroll/auto;

visible:溢出部分可见；hidden:溢出部分隐藏；scroll:无论是否溢出均显示滚动条; auto:根据是否溢出，自动显示滚动条;

4.4 扩展

display:none;不占位

透明属性:opacity:0~1;

表格边框合并table{border-collapse:collapse;}

三角形 1.设置一个盒子 2.设置四周不同颜色的边框 3.将盒子宽高设置为0，仅保留边框 4.保留一个边框其余设为transparent

获得焦点伪类选择器 input:focus{}

属性选择器

E[attr] {}选择具有attr属性的E元素

E[attr="val"]{}选择具有attr属性并且属性值等于val的E元素