02CSS基础
文章目录
基本语法:
选择器名 {
属性: 值;
}
css根据写的位置,分三类:
行内样式:在需要样式的标签中使用 style 属性,指明样式和值,多个用;隔开
内部样式:在标签中,使用
CSS选择器:
基本选择器:
标签选择器:标签名作为选择器名,会选择页面中所有对应的标签
类选择器:在标签中使用 class 属性,起个名,在样式中,使用 .类名 选中具有相同class的元素,class名可以重复
ID选择器:在标签中使用 id 属性,起个名,在样式中,使用 #id名 选中指定id的元素,id不能重复
注意:起名时,不要用 数字 开头
优先级:ID > 类 > 标签
层次选择器:
E F:后代选择器,从E标签中选中后代标签F
E>F:子选择器,从E标签中选中子标签F
E+F: 相邻兄弟选择器,从E标签往下,选中同级的并且相邻的标签F
E~F: 通用兄弟选择器,从E标签往下,选中同级的标签F
结构伪类选择器:
E F:first-child:从E标签的后代中选中第一个子标签F,先查找第一个子标签,再看是不是F,如果不是F,则不选中
E:last-child
E F:nth-child(n): 选中指定第n个F标签
E F:first-of-type:从E标签的后代中选中第一个子标签F,先查找所有的F标签,再从中选中第一个
E:last-of-type:
E F:nth-of-type(n)
属性选择器:
E[attr]: 选中有attr属性的E标签
E[attr=val]:选中有attr属性并且值为val的E标签
E[attr^=val]:选中有attr属性并且值以val开头的E标签
E[attr$=val]:选中有attr属性并且值以val结尾的E标签
E[attr*=val]:选中有attr属性并且值包含val的E标签
div
span
样式:
字体样式:
font-family 设置字体类型
font-size 设置字体大小
font-style 设置字体风格
font-weight 设置字体的粗细
font 在一个声明中设置所有字体属性
字体属性的顺序:字体风格→字体粗细→字体大小→字体类型
文本样式:
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰,下划线、上划线、删除线
vertical-align 设置图片和文本的对齐
text-shadow 文本阴影:text-shadow: gray 10px 10px 10px;
超链接伪类样式:
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超链接样式
a:active 鼠标单击未释放的超链接样式
注意:顺序一般按照 LoVe/HAte
列表样式:
list-style-type 修改列表项前面的数字或者圆点等样式
list-style-image
list-style-position
list-style:一次性设置上面三个, 一般只设置一个:list-style: none;
背景样式:
background-color:背景颜色
background-image:背景图片,当和颜色同时存在时,会覆盖颜色
background-repeat:图片平铺
background-position:图片定位
background:一次性设置上面4个
eg:background:#C00 url(…/image/arrow-down.gif) 205px 10px no-repeat;}
背景定位
background-size:背景图片大小
渐变:
线性渐变:background: linear-gradient(to top, red, orange, yellow, green, blue);
径向渐变:background: radial-gradient(red, orange, yellow, green, blue)
盒子模型:
border:一次性设置下面3个属性
border-color: 下面4个汇总,可以有1、2、3、4个值
border-top-color:上边框颜色
border-bottom-color:下边框颜色
border-left-color:左边框颜色
border-right-color:右边框颜色
border-width:边框的粗细
border-top-width
border-bottom-width
border-left-width
border-right-width
border-style:边框样式
border-top-style
border-bottom-style
border-left-style
border-right-style
margin:外边距
margin-top
margin-right
margin-bottom
margin-left
块元素左右居中:margin: 0px auto;
padding: 内边距
padding-top
padding-right
padding-bottom
padding-left
box-sizing:盒子大小
值 :content-box:设置的宽和高是内容的宽高,如果有内边距,就会把边框放大
border-box: 设置的宽和高就是边框盒子的宽高,如果有内边距,内容可能会超出盒子
border-radius: 设置边框角的弧度,可以有1、2、3、4个值,从左上角开始顺时针赋值
box-shadow:颜色 x轴 y轴 晕染半径
鼠标变小手:
cursor: pointer;
display:块元素和行内元素之间改变
block 块元素:可以设置宽和高,单独一行 控制元素的显示和隐藏
inline 行内元素:设置宽和高无效,可以多个元素在一行
inline-block 行内块:即可以设置宽和高,又可以在一行 控制块元素排到一行
none 隐藏元素 控制元素的显示和隐藏
float 浮动:
边框塌陷
解决:
- 在塌陷的父节点的末尾加一个空的div,设置这个div样式 clear: both;
- 在塌陷的父节点中使用:after结构伪类,设置样式:content: “”; display: block; clear: both;
定位:position
相对定位:relative,相对于自己原来的位置进行定位
绝对定位:absolute,一但定位,自己会脱离标准文档流(自己的层级会升高),原位置内容会被下面的内容顶替,定位时,以最近已定位的祖先元素为基点,如果没有,以浏览器左上角为基点
固定定位:fixed,一但定位,自己会脱离标准文档流(自己的层级会升高),原位置内容会被下面的内容顶替,定位时,以浏览器左上角为基点,定位后,不管滚动条怎么拉动,位置固定不变