美文网首页
2019-05-28

2019-05-28

作者: CC__XX | 来源:发表于2019-05-28 23:31 被阅读0次

选择器的优先级

优先级的规则:1.内联样式:优先级1000

                        2.id选择器:优先级100

                        3.类和伪类:优先级10

                        4.通配符*:优先级0

                        5.继承样式:没有优先级

                 当选择器中包含多种选择器时,需要将多种选择器的优先级相加,然后再比较,但是注意,选择器优先级计算不会超过他的最大的数量级如果选择器的优先级一样,则使用靠后的样式并集选择器的优先级是单独计算的div, p, #p1, .hello{}可以在样式的最后添加一个!important,则此时该样式将会获取一个最高的优先级,将会优先于所有的样式显示,甚至超过内联样式,但是在开发中,尽量避免使用!important

a的伪类优先级:

涉及到a的伪类一共有四个()

:link

:visited

:hover

:active

而这四个选择器的优先级是一样的

文本标签

em:表示语气上的强调,在游览器中默认使用斜体显示

strong: 表示强调内容,比em更强烈,在游览器中默认使用粗体显示

i:i标签中的内容会以斜体显示     icon    图标

b:b标签中的内容以粗体显示。    没有语气

h5规范中规定:对于不需要着重的内容,而是单纯的斜体或者是加粗,就可以使用i和b标签

small:small标签来表示一些细则一类的内容       比如:合同中的小字,网站的版权声明都可以使用small

cite:cite标签网页中加书名号,表示参考内容        比如书名,歌名电影名等....

q:q标签表示一个短的引用(行内引用),q标签引用的内容,浏览器会默认加上引号

blockquote:blockquote标签表示一个长引用(块级引用)

sup:sup标签设置上标

sub:sub标签设置下标

del:使用del标签来表示一个删除的内容,会自动添加删除线 

ins:ins表示一个插入的内容,会自动添加下划线

pre:pre标签是一个预格式标签,会将代码中的格式保存,不会忽略多个空格及换行

code:code标签专门用来表示代码我们一般结合使用pre和code来表示一段代码

列表

共有三种列表:

1、无序列表    ul   li

type属性可以修改无序列表的项目符号,可选值:

disc:默认值,实心的圆点

square:实心的方块

circle:空心的圆圈

2、有序列表    ol

type属性,可以指定序号的类型,可选值:

1,默认值,使用阿拉伯数字

a/A,采用小写或大写字母作为序号

i/I,采用小写或大写的罗马数字作为序号

3、定义列表   dl   dd   dt

dt:被定义的内容

dd:对定义内容的描述

dl、ul、ol之间都可以互相嵌套

列表之间可以相互嵌套


单位

长度单位

像素px: 不同显示器一个像素的大小也不相同显示效果越好、越清晰,像素就越小,反之像素越大

百分比%:使用百分比的好处是,当父元素的属性值发生变化时,子元素也会按照比例发生改变

- 在我们创建一个自适应的页面时,经常使用百分比作为单位

em:- em和百分比类似,它是相对于当前元素的字体大小来计算的

- 1em = 1font-size

- 使用em时,当字体大小发生改变时,em也会随之改变 当设置字体相关的样式时,经常会使用em

颜色单位

颜色的单词: 在CSS可以直接使用颜色的单词来表示不同的颜色(红色:red ; 蓝色:blue;   绿色:green)

RGB:GB值指的是通过Red Green Blue三元色,通过这三种颜色的不同的浓度,来表示出不同的颜色,(可以用0-255的值来表示,也可以用百分数来设置)

十六进制:原理和上边RGB原理一样,只不过使用十六进制数来代替,使用三组两位的十六进制数组来表示一个颜色,每组表示一个颜色

语法:#红色绿色蓝色

十六进制:

* 0 1 2 3 4 5 6 7 8 9 a b c d e f

* 00 - ff

* 00表示没有,相当于rgb中的0

* ff表示最大,相当于rgb中255

* 红色:#ff0000

* 像这种两位两位重复的颜色,可以简写

* 比如:#ff0000 可以写成 #f00

* #abc  #aabbcc

字体

字体的颜色:设置字体颜色,使用color来设置文字的颜色

字体的大小:font-size

文字字体:font-family   该样式可以同时指定多个字体,多个字体之间使用“,”分开

字体的分类:网页中将字体分为5类:

1.serif(衬线字体)最常用

2.sans-serif(非衬线字体)最常用

3.monospace (等宽字体)

4.cursive (草书字体)

5.fantasy (虚幻字体)

字体的其他样式:

1.font-style可以用来设置文字的斜体

- 可选值:

normal 默认值,文字正常显示

italic 文字会以斜体显示

oblique 文字会以倾斜的效果显示

- 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique效果是一样的

- 一般我们只会使用italic

2.font-weight可以用来设置文本的加粗效果

可选值:normal 默认值,文字正常显示

            bold 文字加粗显示

3.font-variant可以用来设置小型大写字母

可选值:normal 默认值,文字正常显示

small-caps 文本以小型大写字母显示

小型大写字母:将所有的字母都以大写形式显示,但是小写字母的小型大写,要比大写字母小一些

使用font设置字体样式时,斜体 加粗 小大字母,没有顺序要求,甚至可写可不写,如果不写则使用默认值 但是要求文字的大小和字体必须写,而且字体必须是最后一个样式,大小必须是倒数第二个样式

行间距

使用line-height(行高)来设置行间距

行间距 = 行高 - 字体大小

垂直居中:对于单行文本来说,可以将行高设置为和父元素的高度一致,这样可以是单行文本在父元素中垂直居中

文本样式

文本大小写:

语法:text-transform

可选值:1.none 默认值,该怎么显示就怎么显示,不做任何处理

2.capitalize 单词的首字母大写,通过空格来识别单词

3.uppercase 所有的字母都大写

4.lowercase 所有的字母都小写

文本修饰

语法:text-decoration

可选值:1. none:默认值,不添加任何修饰,正常显示

2.underline 为文本添加下划线

3.overline 为文本添加上划线

4.line-through 为文本添加删除线

文本对齐方式:

语法:text-align

可选值:1.left 默认值,文本靠左对齐

2.right 文本靠右对齐

3.center 文本居中对齐

4.justify 两端对齐

首行缩进

语法:text-indent(这个值一般都会使用em作为单位)

相关文章

网友评论

      本文标题:2019-05-28

      本文链接:https://www.haomeiwen.com/subject/qqbrtctx.html