前端web开发HTML+CSS3+移动web（0基础,超详细）——第5天
目录
一、体验CSS
二、CSS引入方式
三、选择器-标签和类
四、选择器-id和通配符
五、画盒子
六、字体修饰属性-大小和粗细和倾斜
七、行高
八、字体族
九、font属性
十、文本修饰属性-缩进和对齐和修饰线
十一、文字颜色
十二、调试工具
十三、综合案例1-新闻详情
十四、综合案例2-CSS简介
一、体验CSS
1.CSS定义：
层叠样式表，是一种样式表语言，用来描述HTML文档的呈现。
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码。
<title>CSS初体验</title><style>/*选择器{}*/p{/*css属性*/color：red;}</style><p>体验 CSS</p>
二、CSS引入方式
1)内部样式表：学习使用
css代码写在style标签里面
2)外部样式表：开发使用,实际工作中用
css代码写在单独的css文件中（.css）
在HTML使用link标签引入
<link rel="stylesheet" herf="./my.css">
3)行内样式：配合JavaScript使用
css写在标签是style属性值里
<div style="color:red;font-size:20px;">这是div标签</div>
练习：内部样式表前面已经演示过，需要写到style标签里面
这是外部样式表，在没做引入时没有任何效果，就是单独的文字
想要文字效果就需要建立新的单独的css文件
新建my.css文件，将p标签引入到该文件中
引入外部样式表，使用link标签写在title标签下面
在浏览器中查看，此时p标签中文字有效果，变成红色了
也可以在div标签里面加入属性
三、选择器-标签和类
作用：查找标签，设置样式
基础选择器：
——标签选择器：使用标签名作为选择器—>选中同名标签设置相同的样式。
——类选择器：查找标签，差异化设置标签的显示效果
步骤：定义类选择器——.类名
使用类选择器——标签添加 class="类名"
注意：
类名自定义，不要用纯数字或者中文，尽量用英文命名
一个类选择器可以供多个标签使用
一个标签可以使用多个类名，类名之间用空格隔开
举例:
四、选择器-id和通配符
1.id选择器
作用：查找标签，差异化设置标签的显示效果
场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式
步骤：
——定义id选择器—— #id名
——使用id选择器——标签添加 id="id名"
规则：同一个id选择器在一个页面只能使用一次
2.通配符选择器
作用：查找页面所有标签，设置相同样式
通配符选择器：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
* {color：red；}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符选择器</title><style>* {color: red;}</style>
</head>
<body><p>p 标签</p><div>div 标签</div><h1>h1 标签</h1><ul><li>li</li><li>li</li><li>li</li></ul><strong>strong </strong>
</body>
</html>
五、画盒子
目标：使用合适的选择器画盒子——类选择器
新属性：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>画盒子</title><style>.red {/* 宽度 */width: 100px;/* 高度 */height: 100px;/* 背景色 */background-color:yellow;}.orange {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div 1</div><div class="orange">div 2</div>
</body>
</html>
六、字体修饰属性-大小和粗细和倾斜
1.字体大小
属性名：font-size
属性值：文字尺寸,PC端网页最常用的单位px
p {
font-size: 30px；
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>D字体大小</title><style>/* 经验：谷歌浏览器文字有默认大小 16px */p {/* font-size 属性必须有单位，否则属性不生效 */font-size: 30px;}</style></head>
<body><p>测试字体大小</p><div>测试默认字体大小</div>
</body>
</html>将鼠标放到相应文字上面，左边显示框就会显示文字大小
2.字体粗细
属性名：font-weight
属性值：数字（开发使用）
关键字
3.字体样式（是否倾斜）
作用：清除文字默认的倾斜效果
属性名：font-style
属性值：正常（不倾斜）：normal —— em标签
倾斜：italic ——div标签
七、行高
作用：设置多行文本的间距
属性名：line-height
属性值：数字+px
数字（当前标签font-size属性值的倍数）
<style>
p {
line-height: 30px;
}
</style>
<style>
p {
/* line-height: 30px; */
line-height: 3;
}
</style>
<style>
p {
font-size: 20px;
/* line-height: 30px; */
/* 如果行高值是数字，表示当前标签字体大小的倍数 */
line-height: 3;
}
</style>
行高：
行高——垂直居中：行高属性值等于盒子高度属性值
八、字体族
属性名：font-family
属性值：字体名
font-family：楷体
九、font属性
font复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开。
font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
注意：字号和字体值必须书写，否则font属性不生效
一个属性对应多个值，按顺序书写，字号和字体必须写！！！
十、文本修饰属性-缩进和对齐和修饰线
1.文本缩进
属性名：text-indent
属性值：数字 + px
数字 + em(推荐：1em = 当前标签的字号大小)
2.文本对齐
作用：控制内容水平对齐方式
属性名：text-align
属性值：
！！！！居中的是文字内容，不是内容
3.水平对齐方式——图片
text-align 本质是控制内容的对齐方式，属性要设置给内容的父级
4.文本修饰线
属性名：text-decoration
属性值：
没加任何属性值时：
加入相应的属性值：
十一、文字颜色
color文字颜色
属性名：color
属性值：
