学习目标:
- CSS简介
- CSS基础选择器
- CSS字体属性
- CSS文本属性
- CSS的引入方式
学习内容:
1.1 HTML的局限
html只关注内容的语义
特点:丑
可以做简单的样式,但是臃肿和繁琐
1.2 CSS
CSS是层叠样式表,也叫CSS样式表或级联样式表
CSS也是一种标记语言
CSS主要用于设置html页面中的文本内容、图片的外形以及版面的布局和外观显示样式。
CSS可以美化html
CSS最大价值:由html专注去做结构呈现,样式交给CSS,即结构与样式相分离
1.3 CSS语法规范
CSS规则由两个主要的部分构成:选择器以及一条或多条声明
- 选择器是用于指定CSS样式的html标签,花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是指对指定的对象设置的样式属性
- 属性和属性值值之间用英文“:”分开
- 多个“键值对”之间用英文“;”进行区分
1.4 CSS代码风格
- 样式格式书写
1、紧凑格式
h3 {color:deeppink;font-size:20px;}
2、展开格式
h3{
color:pink;
font-size:20px;
} - 样式的大小写:一般情况下采用小写字母
- 空格规范
属性值前面,冒号后面,保留一个空格
选择器和大括号中间保留空格
2.1 CSS选择器的作用
选择器的作用就是选择标签
2.2 选择器分类
可以分为基础选择器和复合选择器两大类
2.2.1基础选择器
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id选择器、和通配符选择器
2.2.1.1标签选择器
是指用html标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
作用:可以把某一类标签全部选择出来
优点:能快速为页面中同类型的标签统一设置样式
缺点:不能设计差异化样式,只能选择全部的当前标签
2.2.1.2 类选择器
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器
语法:
.类名{
属性1:属性值1;
…
}
注意:
- 类选择器使用“.”进行标识,后面紧跟类名(自定义)
- 长名称或词组可以使用中横线来为选择器命名
- 不要使用纯数字、中文等命名,尽量使用英文字母表示
- 命名要有意义,要看得懂
- 命名规范(查)
类选择器-多类名
可以给一个标签指定多个类名,从而达到更多的选择目的
- 多类名使用方式
<div class="red font20"></div>
(1)在标签class属性中写多个类名
(2)多个类名中间必须用空格隔开
(3)这个标签可以分别具有这些类名的样式
(4)节省CSS代码,统一修改也很方便
(5)多类名选择器在后期布局比较复杂的情况下较多使用
2.2.1.3 id选择器
id选择器可以为标有特定id的html元素指定特定的样式
html元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。
语法:
#id名{
属性1:属性值1
}
注意:id属性只能在每个html文档中出现一次
2.2.1.4 通配符选择器
在CSS中,通配符选择器使用“*”定义,它表示选取页面中的所有元素。
语法:
*{
属性1:属性值1;
…
}
- 通配符选择器不需要调用,自动给页面中的所有元素使用样式
- 特殊情况才使用
3.1 字体系列
CSS使用font-family属性定义文本的字体系列。
p{ font-family:"微软雅黑"}
div{font-family:Arial,"Microsoft Yahei","微软雅黑"}
- 各种字体之间必须使用英文逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
- 尽量使用系统自带字体,保证在任何用户的浏览器中都能正确显示
3.2 字体大小(font-size)
p {
font-size: 20px;
}
- px(像素)大小是网页最常用的单位
- 不同浏览器默认显示的字号大小不一致,尽量给一个明确大小
- 可以给body指定整个页面文字的大小
3.3 字体粗细(font-weight)
p{
font-weight: 700;
}
值 | 描述 |
---|---|
normal | 默认值。定义标准的字符。 |
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100-900 | 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
3.4 文字样式
CSS使用font-style属性设置文本风格
p{
font-style: normal;
}
属性值 | 描述 |
---|---|
normal | 默认值 |
italic | 浏览器会显示斜体的字体样式 |
3.5 字体复合属性
body{
font: font-style font-weight font-size font-family;
}
- 使用font属性时,必须按照上面语法格式中的顺序书写,不能更换顺序,而且各个属性之间以空格隔开
- 不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则将无效
4.1文本颜色(color)
div {
color: pink;
color: #ff00b3;
color: rgb(240, 110, 160);
}
4.2 对齐文本(text-align)
用于设置文本内容的水平对齐方式
div {
text-align: center;
}
属性值:left right center
4.3 装饰文本(text-decoration)
设置文本的装饰,可以给文本添加下划线、删除线、上划线等。
div {
text-decoration: underline;
}
属性值 | 描述 |
---|---|
none | 默认,没有装饰线 |
underline | 下划线。链接a自带下划线 |
overline | 上划线(不常用) |
line-through | 删除线(不常用) |
4.4 文本缩进(text-indent)
用于指定文本的第一行的缩进,通常是将段落的首行缩进
p {
text-indent: 10px;
text-indent: 2em;
}
可以通过设置该属性,所有元素的第一行都可以缩进一个给定长度。
或者使用em,em是一个相对单位,就是当前元素1个文字的大小
4.5 行间距(line-height)
行间距包含上间距、文本高度、下间距
p {
line-height: 26px;
}
5.1 CSS的三种样式表
按照CSS样式书写的位置(引入的方式),可以分为三大类:
- 行内样式表(行内式)
- 内部样式表(嵌入式)
- 外部样式表(链接式)
5.2 内部样式表(嵌入式)
内部样式表式写到html页面内部。是将所有CSS代码抽取出来,单独放到一个style标签中。
<style>
div{
color:red;
font-size: 12px;
}
</style>
- style标签理论上可以放在html文档的任何地方,但一般会放在文档的head标签中
- 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是没有完全实现结构和样式完全分离
5.3 行内样式表(行内式)
是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式
<div style="color: red; font-size: 12px;">好好学习</div>
- style就是标签属性
- 在双引号中,书写规范
- 可以控制当前标签设置样式
- 书写繁琐,结构和样式没有分离
5.4 外部样式表
样式单独写到CSS文件中,之后把CSS文件引入到html页面中使用。
引入外部样式表:
- 新建一个.css文件,把所有CSS代码放入此文件
- 在html页面中,使用
<link>
标签引入这个文件
<link rel="stylesheet" href="css文件路径">