1. CSS基础选择器
1.1 标签选择器
-
概念:
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
-
语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
作用:
标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
1.2 类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名.
-
语法:
- 类名选择器
.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 标签
<p class='类名'></p>
-
注意
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不用纯数字、中文等命名, 尽量使用英文字母来表示。
1.3 类选择器特殊用法- 多类名
我们可以给标签指定多个类名,从而达到更多的选择目的。
注意:
- 各个类名中间用空格隔开。
- 多类名选择器在后期布局比较复杂的情况下,还是较多使用的
1.4 id选择器
id选择器使用#
进行标识,后面紧跟id名
-
其基本语法格式如下:
-
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
-
标签
<p id="id名"></p>
-
-
元素的id值是唯一的,只能对应于文档中某一个具体的元素。
-
用法基本和类选择器相同。
1.5 通配符选择器
通配符选择器用*
号表示, * 就是 选择所有的标签 。
- 其基本语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
-
注意:
会匹配页面所有的元素,降低页面响应速度
1.6 CSS 复合选择器
1.6.1 后代选择器(重点)
后代选择器又称为包含选择器。用来选择元素或元素组的子孙后代
- 语法:
.class h3{
color:red;
font-size:16px;
}
1.6.2 子元素选择器
-
子元素选择器只能选择作为某元素**子元素(亲儿子)**的元素。
-
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个
>
进行连接 -
语法:
.class>h3{
color:red;
font-size:14px;
}
1.6.3 交集选择器(用的不多)
交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点;
其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如h3.special。
1.6.4 并集选择器(重点)
并集选择器(CSS选择器分组)是各个选择器通过,
连接而成的,通常用于集体声明。
任何形式的选择器(包括标签选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。
1.6.5 链接伪类选择器(重点)
伪类选择器很多,比如链接伪类,结构伪类等等。这里先写链接伪类选择器,剩下的以后补充。
-
a:link /* 未访问的链接 */
-
a:visited /* 已访问的链接 */
-
a:hover /* 鼠标移动到链接上 */
-
a:active /* 选定的链接 */
实例:
a { font-weight: 700; font-size: 16px; color: green; } a:hover { /* :hover 是链接伪类选择器 鼠标经过 */ color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */ }
1.6.6 复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代元素 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择 最近一级元素 | 只选子元素(亲儿子) | 较少 | 符号是**>** .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 |
2、 CSS 字体样式
2.1 font-size 字体大小
-
作用:
font-size属性用于设置字号
p {
font-size:20px;
}
-
单位:
- 可以使用相对长度单位,也可以使用绝对长度单位。
- 相对长度单位比较常用,通常使用像素单位px,绝对长度单位使用较少。
2.2 font-family:字体
font-family 属性用于设置哪一种字体。
p{ font-family:"微软雅黑";}
- 网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑
- 可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体, 如果都没有,则以我们电脑默认的字体为准。
p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
常用技巧:
1. 各种字体之间必须使用英文状态下的逗号隔开。
2. 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
3. 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: "Times New Roman";。
4. 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
注意:CSS Unicode字体
-
- 在 CSS 中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8 等)不匹配时会产生乱码的错误。
- xp 系统不支持 类似微软雅黑的中文。
-
解决:
-
方案一: 你可以使用英文来替代。 比如
font-family:"Microsoft Yahei"
。 -
方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1"; 表示设置字体为“微软雅黑”。
-
字体名称 | 英文名称 | Unicode 编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
为了照顾不同电脑的字体安装问题,我们尽量只使用宋体和微软雅黑中文字体
2.3 font-weight:字体粗细
- 在html中如何将字体加粗我们可以用标签来实现
- 使用 b 和 strong 标签是文本加粗。
- 可以使用CSS 来实现,但是CSS 是没有语义的。
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400 等同于 normal,而 700 等同于 bold 最常用 |
2.4 font-style:字体风格
- 在html中如何将字体倾斜我们可以用标签来实现
- 字体倾斜除了用 i 和 em 标签,
- 可以使用CSS 来实现,但是CSS 是没有语义的
font-style 属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
属性 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic | 浏览器会显示斜体的字体样式。 |
小技巧:
很少给文字加斜体,经常把斜体标签(em,i)改为普通模式。
2.5 font: 综合设置字体样式 (重点)
font属性用于对字体样式进行综合设置
- 基本语法格式如下:
选择器 { font: font-style font-weight font-size/line-height font-family;}
- 注意:
- 使用 font 属性时,要按照上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
- 其中不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用。
2.6 font总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常用的单位是px 像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是 700 或者 bold ;不加粗 是 normal 或者 400 数字不要跟单位 |
font-style | 字体样式 | 记住倾斜是 italic ;不倾斜是 normal 最常用 normal |
font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
3. CSS 外观属性
3.1 color: 文本颜色
color 属性用于定义文本颜色
- 其取值方式有如下3种:
表示表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
-
注意
我们实际工作中, 用 16进制的写法是最多的,而且我们更喜欢简写方式比如 #f00 代表红色
3.2 text-align: 文本水平对齐方式
text-align 属性用于设置文本内容的水平对齐,相当于html中的align对齐属性
- 其可用属性值如下:
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
-
注意:
是让盒子里面的内容水平居中, 而不是让盒子居中对齐
-
单行文本垂直居中
可以让单行文本在盒子中垂直居中对齐。文字的行高等于盒子的高度。
3.3 line-height: 行间距
line-height 属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。
-
单位:
- line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,使用最多的是像素px
-
应用技巧:
一般情况下,行距比字号大7.8像素左右就可以了。
line-height: 24px;
3.4 text-indent:首行缩进
text-indent属性用于设置首行文本的缩进,
-
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,
- 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
3.5 text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 取消下划线(最常用) |
underline | 定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline | 定义文本上的一条线。(不用) |
line-through | 定义穿过文本下的一条线。(不常用) |
3.6 CSS外观属性总结
属性 | 表示 | 注意点 |
---|---|---|
color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
line-height | 行高 | 控制行与行之间的距离 |
text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |