目录
前言
HTML专注于做结构呈现,CSS专注于做样式,即结构(HTML)于样式(CSS)分离。
一、CSS基础选择器
1.1 选择器的作用
根据不同需求把不同的标签选出来,即找到标签(找对人),设置样式(做对事)。
1.2 基础选择器
1.2.1 标签选择器
- 基本语法:用标签名作为选择器,把某一类标签全部选出来。
例如:
/*使用<div></div>标签作为选择器 ,进行样式设置 */
div {
/*样式设置 */
color: blue;
}
<!-- 标签选择器使用 -->
<div>小猪佩奇的一家</div>
1.2.2 类选择器
- 基本语法:样式用英文点号进行定义,结构用class属性调用class类。
- 口诀:样式点(.)定义,结构类(class)调用,一个或多个,开发最常用。
例如:
<!-- 类选择器样式部分 -->
.first {
<!-- 样式设置 -->
}
<!-- 类选择器结构部分 -->
<div class="first">我是第一个人</div>
1.2.3 多类名选择器
- 功能:一个标签指定多类名。
例如:
<!-- 多类选择器样式部分 -->
.hotpot {
color: red;
}
.words {
font-size: 30px;
}
<!-- 类选择器结构部分 -->
<p class="hotpot words">我爱吃大火锅</p>
<p class="hotpot">我爱吃火锅</p>
1.2.4 id选择器
- 基本语法:样式用井号进行定义,结构用id属性设置id选择器。
- 口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用。
例如:
/* id选择器样式部分 */
#identity {
<!-- 样式设置 -->
color:red;
}
/* id选择器结构部分 */
<p>我的名字是黑色的</p>
<p id="identity">我的密码是红色的</p>
- id选择器与类选择器的区别
类选择器 | id选择器 | |
类比为 | 人的名字 | 人的身份证号码 |
使用次数 | 可使用多次 | 仅使用一次 |
1.2.5 通配符选择器
- 基本语法:用星号定义,表示选取页面内所有元素(标签)。
* {
<!--样式设置-->
}
1.2.6 基础选择器总结
基础选择器 | 优点 |
标签选择器 | 快速为页面中同类型标签设置统一样式 |
类选择器 | (1)差异化选择不同标签,单独创造一个或几个标签; (2)可使用多次。 |
多类名选择器 | (1)标签元素相同的样式(共同部分)放到一个类里面; (2)标签可调用公共的类,再调用自己独有的类; (3)节省CSS开销,统一修改时更方便。 |
id选择器 | 仅使用一次 |
通配符选择器 | (1)通配符选择器不需要调用,自动给所有元素使用样式; (2)特殊情况下使用(例如,清除所有元素的内外边框)。 |
二.CSS字体属性
2.1 文字样式
- 基本语法
选择器 {
font-style:文字样式;
}
例如:
/* 给斜体标签(em,i)改为不倾斜字体 */
p {
font-style:normal;
}
2.2 字体大小
- 基本语法
选择器 {
font-size:字体大小;
}
例如:
/* 指定整个页面的文字大小为20px */
body {
font-size:20px;
}
2.3 字体粗细
- 基本语法
选择器 {
font-weight:字体粗细;
}
例如:
/* 使已加粗的标签不加粗 */
p {
/* 400:normal*/
font-weight:400;
}
/* 使未加粗的标签加粗 */
p {
/* 700:加粗*/
font-weight:700;
}
2.4 字体系列
- 基本语法
选择器 {
font-family: 字体类型;
}
例如:
/* 设置字体为隶书 */
div {
font-family: 隶书;
}
2.5 字体样式简写设置
- 基本语法
选择器{
font:font-style ||
font-weight ||
font-size/line-height ||
font-family;
}
例如:
/* 样式设置 */
#hello {
font: italic 700 70px 隶书;
}
<!-- 结构设置 -->
<p>你好</p>
<p id="hello">hello</p>
2.6 字体属性小结
字体属性 | 注意点 |
文字样式font-style | 平时很少给文字设置斜体,反而是给斜体标签(em,i)改为不倾斜字体,如p{font-style: normal;} |
字体大小font-size | (1)不同浏览器显示字号不一致,尽量给一个明确值,不选择默认大小; (2)通过标签body,可指定整个页面文字大小。 |
字体粗细font-weight | 学会让加粗标签(比如h和strong等)不加粗,或让其他标签加粗 |
字体系列font-family | (1)各种字体间必须使用英文状态逗号隔开; (2)有空格隔开的多个单词组成字体,加引号; (3)尽量使用系统默认自带字体,让其他用户浏览器也能显示; (4)多个字体时,选择模式为依次匹配,成功即使用。 |
字体样式简写设置font | (1)使用font属性时,必须按上面中的顺序书写,不能更换顺序,并且各个属性之间以空格隔开; (2)不需要的属性可以省略(使用默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。 |
三.CSS文本属性
3.1 文本颜色
- 基本语法
选择器 {
color:颜色选择;
}
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本颜色</title>
<style>
/* 样式设置 */
#first {
color: red;
}
#second {
color: #a0a0a0;
}
#third {
color: rgb(0, 0, 100);
}
</style>
</head>
<body>
<!-- 结构设置 -->
<p id="first">我是红色</p>
<p id="second">我是灰色</p>
<p id="third">我是蓝色</p>
</body>
</html>
3.2 对齐文本
- 功能:设置元素内文本内容的水平对齐方式。
- 基本语法
选择器 {
text-align:文本内容的水平对齐方式
}
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>对齐文本</title>
<style>
/* 样式设置 */
#first {
text-align: left;
}
#second {
text-align: right;
}
#third {
text-align: center;
}
</style>
</head>
<body>
<!-- 结构设置 -->
<p id="first">我在左边</p>
<p id="second">我在右边</p>
<p id="third">我在中间</p>
</body>
</html>
3.3 装饰文本
- 功能:添加到文本的修饰,给文本加下划线等
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>装饰文本</title>
<style>
#first {
text-decoration: underline;
}
#second {
text-decoration: overline;
}
#third {
text-decoration: line-through;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<p id="first">我有下划线</p>
<p id="second">我有上划线</p>
<p id="third">我有删除线</p>
<p>
<a href="#">我是一个没有下划线的链接</a>
</p>
</body>
</html>
3.4 文本缩进
- 功能:指定文本第一行的缩进,即段落首行缩进。
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本缩进</title>
<style>
#first {
text-indent: 2em;
}
#second {
text-indent: 20px;
}
</style>
</head>
<body>
<p>
在盛唐诗人中,王维、孟浩然长于五绝,王昌龄等七绝写得很好,兼长五绝与七绝而且同臻极境的,只有李白一人。
</p>
<p id="first">
在盛唐诗人中,王维、孟浩然长于五绝,王昌龄等七绝写得很好,兼长五绝与七绝而且同臻极境的,只有李白一人。
</p>
<p>
李白的乐府、歌行及绝句成就为最高。在盛唐诗人中,王维、孟浩然长于五绝,王昌龄等七绝写得很好,兼长五绝与七绝而且同臻极境的,只有李白一人。在盛唐诗人中,王维、孟浩然长于五绝,王昌龄等七绝写得很好,兼长五绝与七绝而且同臻极境的,只有李白一人。
</p>
<p id="second">
李白的乐府、歌行及绝句成就为最高。在盛唐诗人中,王维、孟浩然长于五绝,王昌龄等七绝写得很好,兼长五绝与七绝而且同臻极境的,只有李白一人。在盛唐诗人中,王维、孟浩然长于五绝,王昌龄等七绝写得很好,兼长五绝与七绝而且同臻极境的,只有李白一人。
</p>
</body>
</html>
3.5 行间距
- 功能:设置行间距(行高),即上间距+文字高度+下间距。
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行间距</title>
<style>
#first {
line-height: 66px;
}
</style>
</head>
<body>
<p>普通文本</p>
<p id="first">设置过行高的文本</p>
<p>普通文本</p>
<p>普通文本</p>
</body>
</html>
3.6 文本属性小总结
文本属性 | 特点 |
color文本颜色 | 通常用十六进制#FF0000 |
text-align文本对齐 | 文字水平对齐 |
text-indent文本缩进 | 段落首行缩进两个字的距离,text-indent:2em; |
text-decoration文本修饰 | 添加下划线underline,取消下划线none |
line-height文本行高 | 控制行与行的距离 |
四.CSS引入方式
4.1 行内样式表(行内式引入)
- 实现方式:在元素标签内部的<style>标签属性中设定CSS样式,适用于修改单独的样式。
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式表</title>
</head>
<body>
<div style="color: blue;font-size:20px;">今天是星期一</div>
<div>今天是星期二</div>
</body>
</html>
4.2 内部样式表(内嵌样式表,嵌入式引入)
- 实现方式:CSS写到HTML页面内部,单独放到<style>标签中;
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内样式表</title>
<style>
div {
color: black;
}
#mom {
color: red;
}
.dad {
color: blue;
}
.child {
color: pink;
}
</style>
</head>
<body>
<div>小猪佩奇的一家</div>
<p id="mom">猪妈妈</p>
<p class="dad">猪爸爸</p>
<p class="child">小猪佩奇</p>
<p class="child">乔治</p>
</body>
</html>
4.3 外部样式表(外链式/链接式引入)
- 实现方式:样式单独写到CSS文件,再将CSS文件引入到HTML页面进行使用。
- 代码展示
<!-- html部分 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式表</title>
<link rel="stylesheet" href="外部.css">
</head>
<body>
<h1>我爱吃的食物</h1>
<div>香辣</div>
<p>火锅</p>
<p>汉堡</p>
<div>甜点</div>
<p>冰淇淋</p>
<p>小汤圆</p>
</body>
</html>
/* CSS部分 */
h1 {
color: black;
}
div {
color: blue;
}
p {
color: red;
}
4.4 CSS引入方式总结
引入方式 | 行内样式表 | 内部样式表 | 外部样式表 |
优点 | 书写方便,权重高 | 部分样式与结构分离 | 样式和结构完全分离 |
缺点 | 结构与样式未分离 | 样式与结构没有彻底分离 | 需要引入 |
使用情况 | 使用情况少 | 使用情况多 | 使用情况最多 |
控制范围 | 控制一个标签 | 控制一个页面 | 控制多个页面 |
五.Chrome调试工具
5.1 打开调试工具
控制一个页面打开Chrome浏览器,按F12键或点击空白处→检查
5.2 使用调试工具
(1)ctrl+键盘滚轮,可以放大开发者工具代码大小;
(2)左边是HTML元素结构,右边是CSS样式;
(3)右边CSS样式可以改动数值(左右箭头或者直接输入)和查看颜色;
(4)ctrl+0,恢复浏览器大小;
(5)如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误;
(6)如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误。
总结
CSS最大的价值:HTML专注做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)分离