本文详细介绍了HTML5和CSS3的基础知识，包括CSS的选择器类型如标签选择器、类选择器、ID选择器和通配符选择器的使用方法，以及CSS字体属性，如font-family、font-size、font-weight和font-style等的设置。此外，还讲解了CSS文本属性，如颜色、对齐方式、装饰文本和行间距，并探讨了CSS的三种引入方式：内部样式表、行内样式表和外部样式表。通过实例演示，帮助读者掌握CSS的基本应用。
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
PINK老师HTML5+CSS3教程3
前言
提示：这里可以添加本文要记录的大概内容：
https://www.bilibili.com/video/BV14J4114768?p=61&spm_id_from=pageDriver
提示：以下是本篇文章正文内容，下面案例可供参考
一、CSS简介
CSS设置HTML页面中的文本内容（大小、字体、对齐方式等）图片的外形（宽高 边框边距）版式的布局和外观显示样式
CSS规则由两部分组成：选择器（HTML标签）+一条或多条声明
写在head里面
给谁改样式 { 改什么样式}
属性和属性值之间用:分割
属性值结束后用;结束
推荐样式选择器 属性名 属性值都用小写字母
：后面保留一个空格
h3 与{ 中也要保留一个空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>体验CSS语法规范</title>
<style>
/* 选择器 {样式} */
/* 给谁改样式 { 改什么样式} */
p {
color: red;
/* 修改了文字大小为12像素 */
font-size: 12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
二、CSS基础选择器
选择标签用的
分为基础选择器和复合选择器
基础选择器：由单个选择器组成的
包括标签选择器、类选择器、id选择器和通配符选择器
1.标签选择器
标签名作为选择器，某一大类统一修改样式
代码如下（示例）：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之标签选择器</title>
<style>
/* 标签选择器 : 写上标签名 */
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
2.类选择器
单独选一个或者几个标签，使用英文
style中 .定义
class=”定义“
.red {
color: red;
}
class=“red”
代码如下（示例）：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之类选择器</title>
<style>
/* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用*/
.red {
color: red;
}
.star-sing {
color: green;
}
.memeda {
color: pink;
}
</style>
</head>
<body>
<ul>
<li class="red">冰雨</li>
<li class="red">来生缘</li>
<li>李香兰</li>
<li class="memeda">生僻字</li>
<li class="star-sing">江南style</li>
</ul>
<div class="red">我也想变红色</div>
</body>
一个标签可以指定多个类名 节省代码 统一修改也很方便 各个类名间用空格隔开
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=`, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多类名的使用方式</title>
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">刘德华</div>
</body>
3.id选择器
HTML元素以id属性类设置id选择器，CSS中id选择器以 # 来定义 只能调用一次 唯一性 一般与JS一起使用
#red {
color: red;
}
id=“red”
代码如下（示例）：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之id选择器</title>
<style>
/* id选择器的口诀: 样式#定义, 结构id调用, 只能调用一次, 别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔·杰克逊</div>
<div>pink老师</div>
</body>
4.通配符选择器
使用* 定义，表示选取页面中所有元素（标签）
不需要调用，自动给所有标签上格式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之通配符选择器</title>
<style>
* {
color: red;
}
/* * 这里把 html body div span li 等等的标签都改为了红色 */
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
5.总结
三、CSS字体属性
大小、粗细、样式
1.字体 font-family
body {
font-family: ‘微软雅黑’;
}
font-family: ‘Times New Roman’, Times, serif; 可以指定多个字体，逗号隔开，先看第一个有没有没有就依次往后推
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之字体系列</title>
<style>
h2 {
font-family: '微软雅黑';
}
p {
/* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色,</p>
<p>优雅,淡然,又那么心中清澈.</p>
<p>前端总是伴随着困难和犯错,</p>
<p>静心,坦然,攻克一个又一个.</p>
<p>拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
2.大小 font-size
body {
font-size: 16px;
}
px 像素
标题标签比较特殊,需要单独指定文字大小
一般给body指定一个
3.粗细 font-weight
body {
font-weight: bold;
}
normal（400）/bold（700）/bolder/lighter/数字（100-900）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之字体大小</title>
<style>
.bold {
/* font-weight: bold; */
/* 这个700 的后面不要跟单位 等价于 bold 都是加粗的效果 */
/* 实际开发中,我们跟提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal; */
}
</style>
</head>
<body>
<p class="bold">拼死也要克服它,</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>
</body>
4.文字样式 font-style
斜体/非斜体
body {
font-style: italic;
}
italic(斜体)/normal（非斜体）
normal 一般用于 em i这种倾斜的变回不倾斜
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS字体属性之文字样式(风格)</title>
<style>
p {
font-style: italic;
}
em {
/* 让倾斜的字体不倾斜 就是赶紧脉动回来 */
font-style: normal;
}
</style>
</head>
<body>
<p>同学,上课时候的你</p>
<em>下课时候的你</em>
</body>
5.复合属性
顺序 font: font-style font-weight font-size/line-height font-family;
不能更换顺序 空格隔开
不需要的属性可以省略 但是 font-size font-family 必须保留
font: italic 700 16px 'Microsoft yahei';
四、CSS文本属性
1.颜色
color定义文本的颜色
预定义的颜色值
16进制
RGB
color: deeppink;
color: #cc00ff;
color: rgb(255, 0, 255);
2.文字对齐
text-align 水平对齐方式
left左对齐 right右对齐 center中间对齐
<style>
h1 {
/* 本质是让h1盒子里面的文字水平居中对齐 */
/* text-align: center;left */
text-align: right;
}
</style>
3.装饰文本
text-decoration 下划线 上划线 删除线
<style>
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none;
color: #333;
}
</style>
4.文本缩进
text-indent 首行缩进效果
text-indent: 20px;
em 当前一个文字大小 若当前元素没有设置大小，则按照父元素的一个文字大小
<style>
p {
/* 文本的第一行首行缩进 多少距离 */
/* text-indent: 20px; */
/* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离 */
text-indent: 2em;
}
</style>
5.行间距
line-height: 26px; 行间距
<style>
div {
line-height: 26px;
}
p {
line-height: 25px;
}
</style>
五、CSS引入方式
按照CSS样式书写的位置分为行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）
1.内部样式表（嵌入式）
写道HTML页面内部，放在style标签中
一般放在head标签中，控制整个页面样式，但没有完全分离
2.行内样式表（行内式）
在元素标签内部的style属性中设定CSS样式，修改简单样式
style就是标签属性，写在双引号中
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
3.外部样式表（链接式）
样式单独写在CSS文件中，把CSS文件引入HTML页面使用
1、新建后缀名为.css的文件
2、 link rel=“stylesheet” href=“css文件路径”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>外部样式表</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>来呀~快活呀,反正有大把时间...</div>
</body>
</html>
总结
CSS简介
CSS基础选择器
CSS字体属性
CSS文本属性
CSS的引入方式
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
