第十章 CSS相关属性
1.文字属性
1.1规定文字样式
快捷键:fs+tab font-style,取值有italic和normal
1.2.规定文字大小
快捷键:fsz+tab font-size
1.3 规定文字粗细
快捷键:fw+tab font-weight
1.4 规定文字字体
快捷键:ff+tab font-family
2.文字属性的缩写格式
font:style weight size family;
注意点:1.在这种缩写格式中style 和weight 两种可以省略
2.在这种缩写格式中style和weight的位置可以互换
3.在这种缩写格式中size和family属性不能省略
4.size和family的位置是不能随意乱改的
如果设置的字体不存在,会使用系统默认的字体,宋体
如果设置的字体不存在,又不想使用系统默认的字体,font-family可以设置备选方案,
格式:font-family:"设置的字体","备选字体1",“备选方案2”,...可以设置多个备选方案
问题:如何给英文和中文单独设置字体
记住两句话:
1.但凡中文中,都包含英文
2.但凡是英文中,都不包含中文
即中文字体可以用于英文,但是英文字体却不可以用于中文
因此当一句话中既包含中文又包含英文时想对英文和中文单独设置字体,就可以使用我们的备选方案,第一个方案是针对英文的,备选方案是针对中文的
且英文字体一定要放置在中文字体前面
而且还要注意的是并非所有用英文表示的字体就是英文字体,因为,每个中文字体都有自己的英文名
--------------------------------------------------------------
文本属性的简写
font:style weight size family;对应位置写上这些属性的取值
注意点:1.在这种缩写的格式里 style weight 属性可以省略
2.在这种缩写的格式里 style weight属性值不仅可以省略,还可以调换位置
3.在这种缩写格式里size和family属性不可以省略,并且不能交换位置
2.文本属性
2.1.文本装饰属性
格式:text-decoration:取值underline,overline,line-through ,none
其中a标签会自动给超链接文本加上下划线,如果开发者不想加下划线,可以给文本装饰属性赋值none来去掉下划线,这是none应用最多的场合
2.2.文本缩进属性
格式:text-indent:2em
em表示缩进单位为一个汉字的宽度
2.3.文本对齐属性
格式:text-align 取值有right,left,center
3.颜色控制属性
3.1.颜控制属性取值
(1)英文单词:局限不是所有的颜色都能够用单词来表示
(2)rgb:rgb(x,x,x) x为0-255之间的数字从左至右x分别表示红色,绿色,蓝色的发光程度
注意:前段开发中一般不用黑色,因为太扎眼,通常使用的都是不同发光程度的灰色,
只要让红/绿/蓝的值都取一样的值就是灰色,而且取值越小越接近黑色,取值越大越接近白色
(3)rgba:rgb和上述一样,a表示透明度取值为0-1之间的所有实数
(4)十六进制:#FF0000每两位表示对应r,g,b
(5)十六进制缩写:只要十六进制的颜色每两位的值都是一样的那么就可以简写为一位
第十一章 标签选择器
1.标签选择器
什么是标签选择器?
作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性
2.id选择器
作用:根据指定的id名称,在在当前界面中找到对应名称的标签,然后设置属性
格式:
#id{
属性:值;
}
注意点:1.每个HTML标签都有一个属性叫做id,也就是说,每个标签都可以设置id
2.在同一个界面id的名称是不可以重复的
3.在编写id选择器的时候一定要在id名称前面加上#
4.id的名称是有一定的命名规范的(类似于关键字命名规则)
4.1.id的名称是由字母,数字,下划线组成
4.2 id名称不能以数字开头
4.3 id名称不能是HTML中标签名
4.4 在企业开发中一般情况下如果仅仅是设置样式,我们不推荐使用id标签选择器
3.类选择器
作用:根据指定的类名称找到对应的标签,然后设置属性
格式:.class{
属性:值
}
注意点:1.每个HTML标签都有一个属性叫做class,也就是说,每个标签都可以设置class
2.在同一个界面class名称是可以重复的
3.在编写class选择器的时候一定要在class名称前面加上 .
4.class的名称是有一定的命名规范的(类似于关键字命名规则)
4.1.class的名称是由字母,数字,下划线组成
4.2 class名称不能以数字开头
4.3 class名称不能是HTML中标签名
5.在HTML中每个标签可以同时绑定多个类名
4.id选择器和类选择器的异同
相同点:作用相同
命名规范相同
不同点:格式不用,id是加#,class是加.
id是不可以重复的,class取值是可以重复的
id值只能有一个取值,class可以有多个取值
5.后代标签选择器
作用:找到指定的所有后代的标签,设置属性
格式:标签名称1 标签名称2{
属性:值
}
先找到名称叫做标签名称1 的标签,然后在这个标签下面去查找所有名称叫做标签名称2的标签,然后再设置属性
注:后代选择器可以通过空格无限延伸
6.子元素选择器
作用:找到指定标签所有特定的直接子元素
格式:标签名称1>标签名称2{
属性:值
}
注:1.子元素选择器只会查找儿子,不会查找其他嵌套的标签
2.子元素不仅可以使用标签名称,还可以使用选择器
3.子元素可以通过>无限延伸下去
7.交集选择器
作用:所有选择器选中的标签中相交的那部分
格式:选择器1选择器2{
属性:值;
}
注意:交集选择器的两个选择器之间不需要通过任何连接符连接
8.并集选择器
作用:选择器1,选择器2{
属性:值;
}
注意:并集选择器的选择器之间要通过逗号来连接
9.兄弟选择器
9.1相邻兄弟选择器
作用:给指定选择器后面紧跟的选择器选定的标签设置属性
格式:选择器1+选择器2{
属性:值;
}
注:兄弟选择器必须通过加号连接
9.2通用兄弟选择器
作用:给指定选择器后面所有的选择器所选定的标签设置属性
格式:选择器1~选择器2{
属性:值;
}
10.序选择器
10.1 同级别的选择器
:first-child选中同级别中的第一个标签
:last-child选中同级别中的最后一个标签
:nth-child(n):选中同级别的第n个标签
:nth-last-child(n):选中同级别的倒数第n个标签
:only-child:
10.2 同类型的选择器
:first-of-type选中同级别同类型的第一个标签
:last-of-type选中同级别同类型的最后一个标签
:nth-of-type(n)选中同级别同类型的第n个标签
:nth-last-of-type(n)选中同级别同类型的倒数第n个标签
: only-of-type: