目录
继承
选择器的优先级
优先级规则
a的伪类优先级
文本标签及样式
文本标签
em、strong、i、b
small
cite
q
blockquote
sup、sub
ins、del
code、pre
文本样式
text-transform
text-decoration
letter-spacing
word-spacing
text-align
text-indent
长度单位
像素px
百分比%
em
颜色单位
十六进制
字体样式
颜色
大小
字体格式
粗体和斜体
font-style
font-weight
font-variant
font
字体分类
行间距
line-height
继承
像儿子可以继承父亲的遗产那样,在CSS中,祖先元素的样式,他是可以被其后戴园所继承的
利用继承功能,可以将一些基本样式设计放到父元素的样式中,这样其所有的后代元素都可以自动的继承其基本样式了
并不是所有的样式,都会被子元素所继承,比如我们背景相关的样式是不会被继承的
选择器的优先级
当我们使用了不同的选择器来选中同一个元素值的时候,并且设置相同样式的时候,我们的样式之间便会产生冲突,这个时候就会出现我们选择器优先级的决定权。
优先级规则
内链样式:优先级1000
id选择器:优先级100
类和伪类:优先级10
元素选择器:优先级1
通配选择器:优先级0
继承的样式,他是没有优先级的
注意:当选择器中包含了多种选择器的时候,需要将多种选择器的优先级相加之和,然后再比较。
但是,选择器优先级计算不会超过他的最大的数量级。如果选择器的优先级一致,则谁靠后,选择谁。
并集选择器的优先级是单独计算的。
注意:可以再样式的最后添加一个 !important ,这个时候该样式则会优先使用,他的优先级会超过内链样式。在开发中避免使用这个 !important
a的伪类优先级
:link
:visited
:hover
:active
a的4个伪类优先级是一样的,我们在使用的时候要按照上面的顺序定义其样式即可。
文本标签及样式
文本标签
em、strong、i、b
这两个标签都是用来表示一个强调的内容。
em:主要用来表示语气上的强调。(浏览器中默认使用斜体)
strong:主要表示强调的内容,比em更强烈(浏览器中默认使用粗体)
h5中规定,对于不需要着重的内容,而是单纯地加粗和斜体就可以使用i和b,他们两个没有任何语义
i:浏览器中默认使用斜体
b:浏览器中默认使用粗体
small
标签中的内容要比父元素中的文字要小一些。
h5中使用small标签来表示细则一类的内容。比如:合同中的小字体,网站中的版权声明文字
cite
用来表示网页中加书名号的内容,都可以使用cite标签,比如:书名、电视剧名……
q
用来表示一个短的应用(也就是行内引用)
标签应用的内容,浏览器会给我们自动添加双引号,不同浏览器中会不一样
blockquote
块元素,用来表示一个长引用。
sup、sub
使用sup标签来设置一个上标。比如2的三次方
使用sub标签来设置一个下标。
ins、del
del标签中的内容,会自动的添加删除线
ins标签标识插入内容,标签的内容会自动添加下划线
code、pre
pre预格式标签,会将代码中的格式保留,不会忽略其中的空格。
code用来表示代码的。我们一般结合使用pre和code来表示一段代码。
文本样式
text-transform
可以用来设置文本的大小写。(对中文没有任何意义)
可选值:
none,默认值,该怎么显示就怎么显示,不做任何处理;
capitalize,单词首字母大写,通过单词边界(空格也不准去)来识别的单词的;
uppercase,所有字母大写;
lowercase,所有字母都小写。
text-decoration
可以用来设置文本进行修饰
可选值:
none:默认值,不添加任何修饰动作,正常显示
underline:为文本添加了下划线
overline:为文本添加上划线
line-through:为文本添加删除线
注意:超链接a会默认添加下划线,也就是超链接的text-decoration默认设置了underline
letter-spacing
可以用来指定字符间距
word-spacing
可以用来设置单词之间的间距,实际上就是设置词与词之间的空格的大小,对中文没啥意义。
text-align
用来设置文本对齐方式。默认左对齐
可选值:
left:默认值,文本靠左对齐
right:文本靠右对齐
center:文本居中对齐
justify:文本两端对齐(通过调整文本之间的空格大小,来达到两端对齐的目的的)
text-indent
用来设置首行缩进的。当给制定一个正值时候,则会自动向右侧缩进指定的像素。,如果为他制定一个负值,则会向左移动指定的单位像素。
通过这种方式可以将一些不想显示的文字隐藏起来。
可选值:
长度单位
像素px
像素是我们在网页开发中经常使用的单位。一个像素就相当于我们屏幕中的一个点,我们的屏幕实际上就是由这些像素点构成的。但是这些像素点,是不能直接显示看见的。
注意:不同的显示器一个像素的大小也不相同,显示效果越是好的越清晰,像素越小,则像素越大。
百分比%
也可以将单位设置一个百分比的样式。 这样浏览器就会根据父元素的的样式来计算此值
好处:使用百分比的时候,当父元素的属性值发生变化的时候,子元素他会按照比例自动的发生变化;在我们创建一个自适应的页面时,经常使用到百分比作为单位的。
em
和我们上面说说的百分比类似,他是相当于当前元素的字体大小来计算的。,1em=1font-size;em是跟随字体大小来变化的(也就是使用em的时候,当字体大小发生变化时,em也会随之变化。)
当设置字体相关的样式时,经常会有人使用em
颜色单位
十六进制
用十六进制的rgb来表示颜色,原理上和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
黑色:#000000
像上面这种两位重复的颜色,我们可以简写,上面的黑色就可以写成 #000
字体样式
颜色
设置字体颜色的时候,使用color;
大小
设置文字大小(浏览器一般默认文字大小是16px),使用font-size,他设置的并不是文字本身的大小。
页面中,每一个文字都是处在了一个看不见的框中,我们设置的font-size,其实是框的高度,并不是字体的大小;一般情况下,文字都要比框小一些。也有的时候会比他打,根据字体的不同显示的效果不同。
字体格式
通过font-family可以指定文字字体格式。当采用某种字体时,如果浏览器支持则使用,不支持的话则使用默认文字字体。
该样式可以同时指定多个字体。多个字体之间使用逗号隔开,有显示有关前面的字体,如果前面没有,则尝试下一个字体
浏览器使用的字体默认就是我们计算机中的字体,如果计算机中有,则使用,没有的话,就无法使用了。
开发中尽量使用正常的字体。小众字体不要使用!!!!
粗体和斜体
font-style
可以用来设置文字的斜体
可选值:normal,默认值,文字正常显示;italic,文字会以斜体显示;oblique,文字会以倾斜的效果显示。
大部分浏览器都不会对斜体和倾斜去做区分,也就是我们设置italic和oblique的效果基本一致,看不出来不同的效果。一般只会去使用italic
font-weight
用来设置文字的加粗的效果
可选值:normal,默认值,文字正藏系那是;bold,文字加粗显示
样式也可以使用100-900之间的9个数值来表示粗细。由于用户的计算机系统中往往没有这么多级别的字体,因此可能会达不到我们的效果。
font-variant
可以用来设置小型大写字母
可选值:normal,默认值,文字正常显示;small-caps,文本已小型大写字母显示
小型大写字母:将所有的字母都以大写形式显示,但是小写字母的大写,要比大写字母的大小小一些。
font
CSS中还未我们提供了一个font的样式,使用这个样式可以同事设置相关字体的所有样式信息
语法:font:加粗 斜体 小型大写 大小/行高 字体
注意:这里前边几个加粗、斜体和小型大写的顺 序无所谓,也可以不写,但是大小和字体 必须写且必须写到他的最后两个
字体分类
网页中将字体分为大类:
serif(衬线字体)
sans-serif(非衬线字体)
monospace (等宽字体)
cursive (草书字体)
fantasy (虚幻字体)
我们可以将字体设置为这些大的分类
以上这些分类都是一些大的分类,并没有 涉及具体的类型,如果将字体指定为这些 格式,浏览器会自己选择指定类型的字体。
行间距
在css中并没有为我们提供一个设置行间距的样式,我们只能通过设置行高来设置行间距,行高越大行间距越大。
line-height
行高类似于我们上学时候使用的单线本,单线本是一行一行的,线与线之间的距离就是行高,网页中的文字,他其实是在一个看不见的线中,我们饿的文字是默认在行高中垂直居中显示的
通过这个属性可以间接设置行高,可以接收值:
1、直接接收一个大小;
2、可以指定一个百分数。(相对于字体来计算行高)
3、可以直接传一个正整数,则我们的行高会设置字体大小的响应倍数
行间距 = line-height – font-size
对于单行文本来说,可以将行高设置为和父元素的高速一致,这样可以使得单行文本在父元素中垂直居中
好了CSS基础(下)就到这里。
欢迎大家点击下方卡片,关注《coder练习生》