选择器的权重和字体样式

12选择器的权重（面试题）

样式冲突

优先级：

!important>内联>id选择器>class选择器/属性选择器>元素选择器>通配选择器>继承选择器

注意：1.选择器的权重一样，优先选用靠下的样式

2.如果是交集选择器，则所有选择器权重相加，最终谁大听谁的

3.如果是并集选择器，则选择器的权重各算各的

4.选择器的权重相加，再大也不会超过它上一级权重

总结：哪个选择器越具体，权重越大

实际应用过程中，样式没设置成功：

1.有没有选择2.选择器权重

04字体样式

01长度单位

像素 px、

百分比 % 是一个相对单位，相对于其父元素高宽，多用于流体式布局、

em 相对于当前字体的大小设置的，是一个相对单位，字体默认大小16px，若没设置字体大小，则继承其祖先元素字体大小，直到根标签默认字体大小16px、

rem 只相对于根标签字体大小来设置，是一个相对单位

02颜色单位

Rgb（red、green、blue）

Rgba（red、green、blue 、0—1） 0是透明，1是不透明

Hsla 表示亮度、色相、颜色、透明度

使用十六进制 0-9abcdef

03字体样式

Color 文字颜色

Font-family 文字字体

Font-size 文字大小

@font-face 自定义字体

Font简写：大小、字体必须写，而且大小在倒二，字体在倒一

04行间距

行高（line height）：文字占有的实际高度、上间距+下间距+字体大小

行间距=上间距+下间距

Line-heigh属性：1.直接放大小单位px、em、rem、%

2.直接放倍数（当前字体大小的倍数）例如：1 2 3

3.放百分比（当前字体大小的百分比）

单行文本在父元素中垂直居中：单行文本高度设置和高度一致，就会垂直居中

font也可以指定大小

07文本样式

text-transform：设置文本的大小写

可选值：none 默认值，正常显示

Uppercase 文本大写

Lowrcase 文本小写

Capitalize 首字母大写

text-décoration：设置文本的修饰

可选值：none 默认值，正常显示

Underline 下划线

Overline 上划线

Line-though 删除线

3. letter-spacing：字符距离

4. word- spacing：单词距离

5. text-align：对齐方式

可选值：center 居中、left（默认值）、right、justify（两端对齐）

6. text-indent：首行缩进

常用的 em单位

7. white-space：设置网页如何处理空白

可选值：normal 换行显示

Nowrap不换行

8. text-overflow：文本溢出包含元素的情况

可选值：clip 裁剪

ellipsis 显示省略号

Overflow属性：hidden 隐藏

9. vertical-align：设置元素垂直对齐

可选值：baseline 基线对齐，沿着x字母最下方对齐，默认值

Top、bottom、middle

功能：1. 设置元素垂直对齐（只针对图片、文字、表格）

2.解决图片三像素的问题：图片与图片之间有空白间隙（面试题）

a. vertical-align属性，设置一个非baseline的样式值

b.设置父元素font-size为0

c.将图片转成块元素（block）

d.将元素脱离文档流

10. text-shadow：（四个参数：）设置文本的阴影

四个参数：1.阴影水平位移距离（必填）正右负左

2.阴影垂直位移距离（必填）正下负上

3.阴影的模糊半径

4.阴影的颜色（默认字体颜色）

11. box-shadow：设置块元素的阴影

四个参数：1.阴影水平位移距离（必填）正右负左

2.阴影垂直位移距离（必填）正下负上

3.阴影的模糊半径

4.阴影的颜色（默认黑色）

选择器的权重和字体样式相关推荐

房子装修工程师CSS(一)之盒子模型/选择器的权重计算/常见样式属性/浮动float
一.盒子模型 (一)CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:margin.border.padding.content(width.height). (二)盒子模型分两种: 1. ...
样式的继承，选择器的权重，单位与颜色
样式的继承样式的继承,我们为一个元素设置的样式同时也会应用到它的后代元素上继承是发生在祖先后后代之间的继承的设计是为了方便我们的开发, 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上 ...
css字体样式，选择器，外观属性
css字体样式,选择器,外观属性字体样式 ont-size:字号大小 font-family:字体 css unicode 字体 font-weight:字体粗细 font-style:字体风格 f ...
css中的选择器及其权重
在 css (层叠样式表)中对 html 中的元素设定具体的样式,主要由选择器和声明块两个部分组成.选择器是用于指定所设置样式对应的 html 标签.声明块由若干个用分号分开的样式声明组成,这些样式声 ...
字体样式，文本样式，背景样式，边框样式，线性渐变，伪类选择器，css权重
`## CSS入门基础(二) 字体样式字体类型 font-family 字体大小 font-size 字体粗细 font-weight 100-700 400=normal 700=bold 字体得 ...
选择器权重及字体属性
目录继承性权重层叠 important 属性行高 font-size 字体大小 font-family 字体 font-weight字体粗细 font-style 字体样式溢出隐藏 text ...
css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式一.总结一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
CSS样式、字体样式、基本选择器的基础笔记
CSS:层叠样式表专门用来控制界面外观风格的文档 CSS注释:/* */ HTML注释: 使用方式行内样式 1.行内样式-写在标签里格式: <div style ...
java 字体选择器_常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读常用的选择器有:标签.id.类.关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的:基本选择 ...

选择器的权重和字体样式

选择器的权重和字体样式相关推荐

最新文章

热门文章