CSS选择器补充，CSS三大特性以及字体、文本样式。
用户投稿 学习笔记 9阅读
使用伪元素来表示元素中的一些特殊的位置 ::after 表示元素的最后边的部分 一般需要结合content这个样式一起使用， 通过content可以向after的位置添加一些内容 ::before 表示元素最前边的部分 一般需要结合content这个样式一起使用， 通过content可以向before的位置添加一些内容 ::first-letter 为第一个字符来设置一个样式 ::first-line 为第一行设置一个样式
<p class="pse">伪元素选择器伪元素选择器伪元素选择器</p>.pse::after{ content: '我是一个after'; } .pse::before{ content: '我是一个before'; } .pse::first-letter{ background-color: black; } .pse::first-line{ background-color: green; }效果：
属性选择器 作用: 根据指定的属性名称找到对应的标签, 然后设置属性 格式: [attribute]
[attribute=value] 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性 最常见的应用场景, 就是用于区分input属性 2.属性的取值是以特定文本开头的 [attribute|=value] CSS2 [attribute^=value] CSS3 两者之间的区别: CSS2中的只能找到value开头,并且value是被-和其它内容隔开的 CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开3.属性的取值是以什么结尾的 [attribute$=value] CSS3
4.属性的取值是否包含某个特定的值 [attribute~=value] CSS2 [attribute*=value] CSS3 两者之间的区别: CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的 CSS3中的只要包含value就可以找到
账号 <input type="text" class="user-name"><br> 密码 <input type="password" name="" class="username"><br>/* 属性选择器 */ #id[type='text'] { background-color: red; } /* 以关键字开头 css2 */ input[class|='user']{ background-color: red; } /* 以关键字开头 css3 */ input[class^='user']{ background-color: red; }效果:
通配符选择器 作用: 给当前界面上所有的标签设置属性
格式: *{ 属性:值; } 注意点: 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
/* 通配符选择器 （普遍选择器） */ *{ /* 去除标签下划线 */ text-decoration: none; /* 去除列表样式 */ list-style-type: none; /* 优先级最低 */ margin: 0; } CSS的三大特性 1.继承性 作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性 注意点: 1.并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 2.在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 3.继承性中的特殊性 3.1 a标签的文字颜色和下划线是不能继承的,当做子元素 3.2 h标签的文字大小是不能继承的，再做子元素 应用场景: 一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容。
2.层叠性 作用: 层叠性就是CSS处理冲突的一种能力 注意点: 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性。
3.优先级 优先级判断的三种方式 -间接选中就是指继承 如果是间接选中, 那么就是谁离目标标签比较近就听谁的
-相同选择器(直接选中) 如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的
-不同选择器(直接选中) 如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠 id>类>标签>通配符>继承>浏览器默认
优先级之!important 作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高
注意点: 1.!important只能用于直接选中, 不能用于间接选中 2.通配符选择器选中的标签也是直接选中的 3.!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升 4.!important必须写在属性值的后面，分号前面 5.!important前面的感叹号不能省略 6.但是一般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。
-优先级权重 作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
-权重的计算规则
==!important优先级最高 == 内联样式，如: style=“…”，权值为1000。 ID选择器，如：#content，权值为0100。 类，伪类、属性选择器，如.content，权值为0010。 标签选择器、伪元素选择器，如div p，权值为0001。 通配符、复合选择器（+、>、~等）、否定伪类（：not）没有影响，权值为0000。 继承的样式没有权值
首先先计算选择器中有多少个id, id多的选择器优先级最高如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的 也就是说优先级如果一样, 那么谁写在后面听谁的
注意点: 1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
文本与字体样式 颜色属性 在CSS中如何通过color属性来修改文字颜色格式: color: 值; 取值:
英文单词 一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达
rgb rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色) 格式: rgb(0,0,0) 那么这个格式中的 第一个数字就是用来设置三原色的光源元件红色显示的亮度 第二个数字就是用来设置三原色的光源元件绿色显示的亮度 第三个数字就是用来设置三原色的光源元件蓝色显示的亮度 这其中的每一个数字它的取值是0-255之间, 0代表不发光, 255代表发光, 值越大就越亮
红色: rgb(255,0,0); 绿色: rgb(0,255,0); 蓝色: rgb(0,0,255); 黑色: rgb(0,0,0); 白色: rgb(255,255,255);
在前端开发中其实并不常用黑色 只要让红色/绿色/蓝色的值都一样就是灰色 而且如果这三个值越小那么就越偏黑色, 越大就越偏白色 例如: color: rgb(200,200,200);
rgba rgba中的rgb和前面讲解的一样, 只不过多了一个a 那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明 例如: color: rgba(255,0,0,0.2);
十六进制 在前端开发中通过十六进制来表示颜色, 其实本质就是RGB 十六进制中是通过每两位表示一个颜色 例如: #FFEE00 FF表示R EE表示G 00表示B
font-style 用于打开和关闭斜体文本 格式：font-style: italic; 取值： normal ： 正常的， 默认就是正常的 italic : 倾斜的
font-weight 为字体设置粗细程度 格式： font-weight: bold; 取值: bold 加粗 bolder 比加粗还要粗 lighter 细线， 默认就是细线 数字取值： 100-900之间整百的数字 400 等同于 normal 700 等同于 bold
font-size 为文字指定大小 格式：font-size: 30px; 单位：px（像素 pixel） 注意点： 通过font-size设置大小一定要带单位， 也就是一定要写px
font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体 格式：font-family:“楷体”;
通用字体 (直接使用，不需要加引号) serif:有衬线的字体,笔画结尾有特殊的装饰线或衬线 sans-serif:无衬线的字体，笔画结尾是平滑的字体 monospace:等宽字体，用于代码，字体中每个字宽度相同 cursive:草书，这种字体有的有连笔，有的还有特殊的斜体效果。 fantasy:装饰字体 ，具有特殊艺术效果的字体
注意点： 1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加
2.设置的字体必须是用户电脑里面已经安装的字体
3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体
4.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办? 可以给字体设置备选方案 格式:font-family:“字体1”, “备选方案1”, …;
5.如果想给中文和英文分别单独设置字体, 怎么办? 但凡是中文字体, 里面都包含了英文 但凡是英文字体, 里面都没有包含中文 也就是说中文字体可以处理英文, 而英文字体不能处理中文 注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
6.补充在企业开发中最常见的字体有以下几个 中文: 宋体/黑体/微软雅黑 英文: “Times New Roman”/Arial
还需要知道一点, 就是并不是名称是英文就一定是英文字体 因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei
缩写格式 缩写格式: font:style weight size family; 例如: font:italic bold 10px “楷体”;
注意点:
1.在这种缩写格式中有的属性值可以省略 sytle可以省略 weight可以省略
2.在这种缩写格式中style和weight的位置可以交换
3.在这种缩写格式中有的属性值是不可以省略的 size不能省略 family不能省略
4.size和family的位置是不能随便乱放的 size一定要写在family的前面, 而且size和family必须写在所有属性的最后
Web Fonthttps://www.ziti163.com/webfont/ 当用户电脑中没有安装对应字体的时候，webFont可以加载网络字体进行显示。
@font-face { font-family: 'myfont'; src: url(“/fonts/test.woff”), url("/fonts/test.ttf"); } div { font-family: myfont; }<div> test </div> 字体图标 在开发网站的时候需要各种各样的小图标，这些图标如果要求美工绘制可能比较麻烦，那么我们可以直接使用开源的字体图标库，这些字体图标库使用webFont原理，我们加载一个图标就好像加载一个字体一样简单，通过控制字体大小，字体颜色来控制图标的大小与颜色。 目前比较流行的开源字体图标库有
iconfont http://www.iconfont.cn/font-awesome http://fontawesome.dashgame.com/ 文本装饰的属性 格式:text-decoration: underline; 取值: underline 下划线 line-through 删除线 overline 上划线 none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
文本水平对齐的属性 格式: text-align: right; 取值: left 左 right 右 center 中 快捷键 ta text-align: left; tar text-align: right; tac text-align: center;
文本缩进的属性 格式: text-indent: 2em; 取值: 2em, 其中是em单位, 一个em代表缩进一个文字的宽度
设置或者取消字体改变 用于使文本显示为全大写或全小写
text-transform 允许字体改变，文本变形
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体
字体阴影 格式: text-shadow: h-shadow v-shadow blur color; 取值: none:取消所有阴影 h-shadow :必需。水平阴影的位置。允许负值。 v-shadow :必需。垂直阴影的位置。允许负值。 blur:可选。模糊的距离。 color:可选。阴影的颜色。
2.列表样式 默认样式 ul,ol 元素的margin-top，margin-bottom均为16px(1em) ， padding-left为40px(2.5em) li 元素没有设置默认的空白（行间距） dl 元素的margin-top，margin-bottom均为16px(1em),但是没有内边距 dd 元素的margin-left为40px(2.5em) p 元素的margin-top，margin-bottom为16px(1em)
list-style-type 设置列表项标志类型 取值:
none : No item marker is shown. disc : A filled circle (default value) circle : A hollow circle square : A filled square decimal : Decimal numbers，Beginning with 1 lower-roman : Lowercase roman numerals，E.g. i, ii, iii, iv, v… upper-roman : Uppercase roman numerals，E.g. I, II, III, IV, V… decimal-leading-zero : Decimal numbers，Padded by initial zeros，E.g. 01, 02, 03, … 98, 99 …
list-style-position 设置列表项标志出现的位置 取值: outside : 列表项标志出现在主块框的外部 inside : 列表项标志出现在主块框的内部
list-style-image 自定义设置列表项标志 取值: url() : 指定图标位置
list-style列表样式的速记写法 取值:
[<type>][<image>][<position>]我们最常用的就是list-style:none;设置没有任何样式，通过CSS去自定义样式。
3.其他样式 line-height 设置文本的行高 取值为绝对单位或者相对单位
display 显示方式的切换
inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 为了能够让元素既能够不独占一行, 又可以设置宽度和高度, 那么就出现了行内块级元素， 行内显示同时宽高有效
none 不显示，不占据屏幕空间
flex 伸缩盒布局
visibility 显示与隐藏
hidden 隐藏，占据屏幕空间
visible 显示
opacity 透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间
overflow 溢出处理 hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条
/* 默认值。内容不会被修剪，会呈现在元素框之外 */overflow: visible;/* 内容会被修剪，并且其余内容不可见 */overflow: hidden;/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */overflow: scroll;/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */overflow: auto; cursor指定光标的样式
default默认光标（通常是一个箭头）auto默认。浏览器设置的光标。crosshair光标呈现为十字线。pointer光标呈现为指示链接的指针（一只手）move此光标指示某对象可被移动。e-resize此光标指示矩形框的边缘可被向右（东）移动。ne-resize此光标指示矩形框的边缘可被向上及向右移动（北/东）。nw-resize此光标指示矩形框的边缘可被向上及向左移动（北/西）。n-resize此光标指示矩形框的边缘可被向上（北）移动。se-resize此光标指示矩形框的边缘可被向下及向右移动（南/东）。sw-resize此光标指示矩形框的边缘可被向下及向左移动（南/西）。s-resize此光标指示矩形框的边缘可被向下移动（南）。w-resize此光标指示矩形框的边缘可被向左移动（西）。text此光标指示文本。wait此光标指示程序正忙（通常是一只表或沙漏）。help此光标指示可用的帮助（通常是一个问号或一个气球）。