样式的继承:
像儿子可以继承父亲的遗产一样,在CSS中,祖先上的元素,也没会被他的后代元素继承。 利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素会自动继承这些样式,但并不是所有的样式都会被子元素所继承,比如:背景相关的样式、边框相关的样式、定位相关等都不会被继承。
选择器的优先级:
当使用不同的选择器,选中同一个元素并且设置相同的样式时,这时样式之间就产生了冲突,最终到底采用哪一个选择器定义的样式,由选择器的优先级(权重)决定,优先级高的优先显示。
优先级的规则:
内联样式的优先级: 1000
id选择器的优先级:100
类和伪类的优先级:10
元素选择器的优先级:1
通配选择器的优先级:0
继承的样式: 没有优先级
当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后再比较,但是注意选择器优先级计算不会超过他的最大的数量级,但如果选择器的优先级一样,则使用靠后的样式。并集选择器中的优先级是单独计算的。可以再样式的最后添加一个!important,则此时的样式将会获得一个最高的优先级,将会优先于所有的样式甚至超过内联样式,但是在开发中尽量避免使用!!
文本标签
em和strong: 这两个标签都表示一个强调的内容,em主要表示语气上的强调,em在浏览器中默认使用斜体显示;strong表示强调的内容,比em更强烈,默认使用粗体显示。
i和b:i标签中的内容会以斜体显示,b标签中内容以加粗显示。
small: small标签中的内容会比他的父元素文字小一些,使用h5中使用small标签来表示一些细则的内容。比如:合同中的小字、网站中的版权声明都可以放到small。
cite: 网页中所有加书名号的内容都可以放到cite标签中,表示参考的内容。
q和blockquote: q标签表示一个短的引用(行内引用),q标签中的引用内容,浏览器会默认加上引号;blockquote标签表示一个长的引用(块级引用)
sup、sub、del和ins:使用sup来设置一个上标;使用sub来设置一个下标;使用del标签来表示一个删除的内容,del中的内容会自动添加删除线;ins表示一个插入的内容,ins中的内容会自动添加下划线。
pre和code:需要在网页中直接编写一些代码,pre是一个预格式标签,会将代码中的格式保留,不会忽略多个空格;code用来专门表示代码。我们一般结合使用pre和code来表示一段代码。
列表
列表就相当于去超市购物时的呢个购物清单,在HTML中也可以创建列表,在网页中一共有三种列表:
1.无序列表
2.有序列表
3.定义列表
无序列表
- 使用ul来创建一个无序列表
- 使用li在ul中创建一个一个的列表项,一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
可选值:
dics 默认值,实心的圆点
square 实心的方块
circle 空心圈
<ul type ="disc">{
<li>ul的type属性<li>
}
注意:默认的项目符号我们一般都不使用,如果需要设置项目符号,则可以采用为li设置背景图片的方式来设置,ul和li都是块元素。
有序列表
有序列表和无序列表类似,只不过他用ol代替ul,ol也是块元素
type属性,可以指定序号的类型
可选值:
- 1默认值,使用阿拉伯数字
- a/A 采用小写或大写字母作为序号
- i/I 采用小写或大写的阿拉伯数字作为序号
列表和列表之间是可以相互嵌套的,可以再无序列表中放一个有序列表,也可以在有序列表中放一个无序列表
<p>菜谱</p>
<ul>
<li>
鱼香肉丝
<ol>
<li>鱼</li>
<li>香</li>
</ol>
</li>
</ul>
定义列表
定义列表用来对一些词汇或内容进行定义,用dl来创建定义列表,dl中有俩个子标签,dt:被定义的内容,dd:对定义内容的描述。
长度单位
--像素(px)
-----像素是我们在网页中使用最多的的一个单位,一个像素就相当于我们屏幕中间的一个小点,我们屏幕实际上就是由这些像素点构成的,但是这些像素点,是不能直接看到的
-----不同显示器的像素大小也不相同,效果越好越清晰,像素就越小,反之像素就越大。
--百分比(%)
-----可以将单位设置成百分比的形式,这样浏览器根据其父元素的样式来设计该值
-----使用百分比的好处是,当父元素的属性值发生改变时,子元素也会按照比例发生改变
-----在我们创建自适应的页面时,经常使用百分比作为单位
--em
-----em和百分比类似,它是相对于当前元素的字体的大小来计算的
-----1em=1font-size
-----当使用em时,当字体大小发生改变时,em也会随之改变
-----当设置字体相关的样式时,经常会使用em
RGB值
在CSS中可以直接使用颜色的单词来表示不同的颜色,例如:红色 red、蓝色 blue、 绿色 green;可以使用RGB的值来表示不同的颜色。
所谓的RGB值时通过Red、Blue、Green三元色,通过这三种颜色的不同的浓度,来表示出不同的颜色
-例子:rgb(红色的浓度、绿色的浓度、蓝色的浓度)
颜色的浓度需要设置一个0-255的值,255表示最大,0表示没有;浓度也可以采用一个百分数来设置,需要0%-100%之间的数字,使用百分比最终也会转换成0-255的数。
也可以使用十六进制的rgb的值(00-ff)来表示颜色,原理和上边的rgb原理一样,只不过使用十六进制的数来代替,使用三组两位数的十六进制数来表示一个颜色。每组表示一个颜色,第一组表示红色的浓度,第二组表示绿色的浓度,第三组表示蓝色的浓度。语法:#红色绿色蓝色。 两位两位重复的颜色,可以简写。比如:#ff0000,可以写成#f00 ; #abc表示 #aabbcc
字体的样式
color 设置字体的颜色
font-size 设置文字的大小,浏览器中一般默认的文字大小都是16px,font-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的。我们设置的font-size实际上设置格的高度,并不是字体的大小。一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不同。
font-family: 通过font-family可以指定文字的字体,当采用某种字体时,如果浏览器支持该字体。如果字体不支持,则使用默认字体。该样式可以同时指定多个字体,多个字体之间使用“,”隔开,如果前面没有则尝试下一个
font-style可以用来设置文字的斜体
可选值:
- normal 默认值 文字正常显示
- italic 文字以斜体显示
- oblique 文字以倾斜的效果显示
大部分浏览器都不会对倾斜和斜体作出区分,也就是说我们设置italic和oblique它们的效果往往是一样的
font-weight可以设置文字的加粗效果
可选值:
- normal 默认值 文字正常显示
- bold,文字加粗显示
font-variant可以设置小型大写字母
可选值:
- normal 默认值文字正常显示
-small-cpas 文字以小型大写字母显示
小型大写字母:将所有的字母都以大写形式显示,但是小写字母的大写要比大写的字母小一些
在CSS中还为我们提供了一个font,使用该样式可以同时设置字体相关的所有样式,可以将字体样式的值,统一写在font样式中,不同的值之间使用空格隔开。使用font设置字体样式时,斜体 加粗 大小写字母,没有顺序要求,甚至可写可不写,如果不写则使用默认值,但是要求文字的大小和字体必须写,而且字体必须是最后一个样式,大小必须是倒数第二个样式。实际上使用简写属性也会有一个比较好的性能。
p{
font: italic small-caps bold 60px 微软雅黑;
}
行间距
在CSS中并没有为我们提供一个设置行间距的方法,我们只能通过设置行高来间接设置行间距,行高越大间距越大,使用line-height来设置行高。行高类似于我们上学时的单线本,单线本是一行一行的,线与线之间的距离就是行高。网页中的文字实际上也是写在一个看不见的线中的,而文字会默认在行高中居中显示。
行间距=行高-字体大小
通过line-height可以间接设置行高
可选值:
- 1.直接接收一个大小
- 2.可以指定一个百分数,则会相对于字体去计算行高
-3.可以直接选一个数值,则行高会设置字体大小相应的倍数
font也可以指定行高,在字体后可以添加/行高,来制定行高,该值是可选的,如果不指定则会使用默认值
文本的样式
text-transform可以用来设置文本的大小写
可选值:
-none 默认值 该怎么显示就怎么显示,不做任何处理
- capitalize 单词的首字母大写,通过空格来识别单词
- uppercase 所有字母都大写
- lowercase 所有字母都小写
text-decoration可以来设置文本的修饰
可选值:
- none 默认值 不添加任何修饰 正常显示
- underline 为文本添加下划线
- overline 为文本添加上划线
- line-through 为文本添加删除线
letter-spacing 可以指定字符之间的距离
word-spacing可以设置单词之间的距离,实际上就是设置词与词之间空格的距离
text-align用于设置文本的对齐方式
可选值:
left 默认值 文本靠左对齐
right 文本靠右对齐
center 文本居中对齐(通过调整文本之间的空格大小,来达到两端对齐的目的)
text-indent 用来设置首行缩进,当给他指点一个正值时,会自动像右侧缩进指定的像素,如果为它指定一个负值,则会向左移动指定的像素,通过这种方式可以将一些不想显示的文字隐藏起来, 一般都是使用em作为缩进单位。