前端 - CSS

impress 2020-05-07

参考地址:https://www.cnblogs.com/Dominic-Ji/p/10474769.html

选择器:

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% }

相关推荐

AlisaClass / 0评论 2020-06-10

somboy / 0评论 2020-05-13