HTML第三节

创业
2025-09-11 13:39:02

一.初识CSS 1.CSS定义

A.内部样式表 B.外部样式表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./第一次.css"> </head> <body> <p>这是p标签</p> <div>这是div标签</div> </body> </html> P{ color: aquamarine; } div{ color: brown; font-size: 30px; } C.行内写法

二.选择器 1.标签选择器

注：1.所有的p标签都会设置成一个格式

2.类选择器（差异化）

注：1.先定义类，再使用类

2.一个class属性可以使用多个类名

3.定义类前面要加.

3.id选择器

4.通配符选择器

注：作用：清除页面中所有标签的默认格式，方便后续设置每一项格式

三.利用类选择器画盒子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red{ width: 100px; height: 100px; background-color: red; } .orange{ width: 200px; height: 200px; background-color: orange; } </style> </head> <body> <div class="red">div1</div> <div class="orange">div2</div> </body> </html> 四.文字控制属性

（一）字体大小

注：1.默认字体大小为16px

（二）字体粗细（三）字体倾斜

注：1.字体倾斜不好看，一般用font-style清除文字的倾斜效果

（四）行高 1.行高的书写方法

2.行高的测量方法

3.垂直居中

注：1.盒子高度即为height，好像涉及盒子模型

（五）字体族

注：1.从左向右依次查找，先找到哪个就用哪个

（六）font属性

注：1. 具体设定的属性值可以从京东等网站上复制