impress 2020-05-07
1. 基本选择器
元素选择器 标签选择器 div {color: red;} 类选择器 关键性符号 点号. .c1 {color:green;} id选择器 关键性符号 警号# #d1 {color: blue;} 通用选择器 选择所有 * {color: orange;}
2、组合选择器
1. 后代选择器(空格): div span {color:red} # 找到div下面的所有span,不考虑层级2. 儿子选择器(大于): div > span{color:red} # 找到div的字标签span3. 毗邻选择器(加号): div + span{color:red} # 找到同级别div后面的一个span标签(必须相邻,中间不能有其他标签,必须是在div后面的span)4. 弟弟选择器(~) : div ~ span{color:red} # 同级别div后面所有的span标签
3. 属性选择器
标志:[ ]1. [name] { color:red } # 找到所有含有name属性的标签2. [name=‘username‘] { color:red } # 找到所有name值为username的标签3. input [name=‘username‘] {color:red} # 找到所有name值为username的input标签
4. 分组与嵌套
1. div , span, p { color:red } # 三者是或的关系,逗号隔开 注意区分 div span,p { color:red } # div标签内的span,或者p标签2. #d1, .c1, span { color:red } # 多个选择器可以混合使用
5. 伪类选择器
a标签有四种状态 1. 未点击状态: a:link 2. 鼠标悬浮态(常用): a:hover 3. 被点击状态: a:active 4. 点击之后的状态: a:visitedinput 1.input输入框获取焦点时样式(常用): input:focus
6. 伪元素选择器
作用:可以通过css代码来添加文本内容p:before{ content:‘‘; color:red; }p:after{ content:‘‘; color:red; } # 可以清楚浮动带来的影响
1. 选择器相同,引入方式不同
就近原则,谁离得近,就按照哪个方式的选择器
2. 选择器不同,引入方式不同
行内选择器 > id选择器 > 类选择器 > 标签选择器行内选择器: <div style="color:red">
1. 长宽
只有块级标签可以设置长宽 行内标签无法设置长宽 设置方法:使用选择器找到对应标签,设置height,width div { height:30px, width:50px }
2. 字体属性
div { font-family: 字体样式,font-size:字体大小, font-weitht: 粗细等, color:颜色(英文,#ffffff, rgb,rgba) }
3. 文字属性
div { text-align:位置(默认左对齐),text-decoration:下划线,上划线,中间线 text-indent:首行缩进} a { text-decoration:none } # 去除a标签的下划线
4. 背景属性
1. 背景颜色:div { height:50px; width:100; background-color:orange; } 2. 背景图片:div { height:50px; width:100; background-image:url("图片地址"); background-repeat:调节是否平铺; background-position:左右位置 上下位置} 3. 支持简写:div { background:orange, url("") no_repeat center center } # 没有位置要求
5. 边框属性
基本使用:p { border-style: solid; border-color:red; border-width:2px } 调节某一边的样式:p { border-left-color:red; border-left-style:solid }支持简写:p { border: solid red 5px; } # 没有位置要求改为圆形或者椭圆形:p { height:400px; width:300px; background:red; border-radious:50% }