学习目标
能够说出什么是CSS
能够使用 CSS 基础选择器
能够设置字体样式
能够设置文本样式
能够说出 CSS 的三种引入方式
能够使用 Chrome 调试工具调试样式
目录
1. CSS 简介
CSS 的主要使用场景就是美化网页,布局页面的
1.1. HTML的局限性
说起 HTML,这其实是个非常单纯的家伙,他只关注内容的语义。比如 <h1>表明这是一个大标题,<p>表明这是一个段落,<img>表明这儿有一个图片,<a>表示此处有链接。
很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑。
虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐….….
1.2. CSS-网页的美容师
- CSS 是层叠样式表(Cascading Style Sheets)的简称,有时也称CSS样式表或级联样式表;
- CSS 是也是一种标记语言
- CSS 主要用于设置HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式边距等)以及版面的布局和外观显示样式。
- CSS 让网页更加丰富多彩,布局更加灵活白如。简单理解:CSS可以美化 HTML,让 HTML 更漂亮让页面布局更简单。
💡 和HTML的对比
1. HTML主要做结构,显示元素内容;
2. CSS 美化 HTML,布局网页;
3. CSS 最大价值: 由 HTML专注去做结构呈现,样式交给CSS,即结构(HTML)与样式(CSS)相分离。
1.3. CSS语法规范
使用 HTML时,需要遵从一定的规范,CSS也是如此。要想熟练地使用 CSS对网页进行修饰,首先需要了解CSS 样式规则。
CSS 规则由两个主要的部分构成:选择器(给谁改样式)以及一条或多条声明(改什么样式)。
- 选择器是用于指定CSS 样式的 HTML标签,花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
- 属性和属性值之间用英文“:”分开
- 多个“键值对”之间用英文";”进行区分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0509_Page_1_体验CSS语法规范</title>
<!-- CSS样式写在head-style之间 -->
<!-- CSS语法规范:选择器{样式} 即 给谁修改样式{改什么样式} -->
<style>
p {
color: aqua;
font-size: 25px;
}
h1 {
color: blueviolet;
font-size: 50px;
}
</style>
</head>
<body>
<p>This is a test1.</p>
<p>This is a test2.</p>
<h1>This is a test3.</h1>
<h1>This is a test4.</h1>
</body>
</html>
1.4. CSS代码风格
以下代码书写风格不是强制规范,而是符合实际开发书写方式
1.4.1. 样式格式书写
1.4.1.1. 紧凑格式
h3 { color:deeppink; font-size:20px;}
1.4.1.2. 展开格式
h3 {
color:pink;
font-size:20px;
}
强烈推荐第二种格式,因为更直观。
1.4.2. 样式大小写风格
h3 {
color:pink;
}
H3 {
COLOR:PINK;}
强烈推荐样式选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。
1.4.3. 样式空格风
h3 {
color: pink;
}
属性值前面,冒号后面,保留一个空格
选择器(标签)和大括号中间保留空格
2. CSS 基础选择器
<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul>
<li>我是u里面小li哦</li>
</ul>
<ol>
<li>我是ol里面小li哦</li>
</ol>
如何把 div 里面的文字改为红色
如何把第一个div 里面的文字改为红色?
如何把ul里面的li 文字改为红色?
2.1. CSS选择器的作用
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说,就是选择标签用的。
以上 CSS 做了两件事:
- 找到所有的 h1 标签。选择器(选对人)
- 设置这些标签的样式,比如颜色为红色(做对事)
2.2. 选择器分类
选择器分为基础选择器和复合选择器两个大类。
2.2.1. 基础选择器
基础选择器是由单个选择器组成的
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
2.2.1.1. 标签选择器(元素选择器)
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。
2.2.1.1.1. 语法
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
……
}
2.2.1.1.2. 作用
标签选择器可以把某一类标签全部选择出来,比如所有的<div>标签和所有的<span>标签。
2.2.1.1.3. 优点
能快速为页面中同类型的标签统一设置样式
2.2.1.1.4. 缺点
不能设计差异化样式,只能选择全部的当前某标签。
2.2.1.1.5. 实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0509_Page_2_标签选择器</title>
<style>
/* 标签选择器 */
p {
color: aqua;
}
div {
color: darkorange;
}
</style>
</head>
<body>
<p>男生</p>
<p>男生</p>
<p>男生</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
2.2.1.2. 类选择器(重点)
开发中最常用的,要重点掌握
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器,注意类名不可以使用现有的HTML标签名
2.2.1.2.1. 语法
.类名 {
属性1: 属性值1;
}
例如,将所有拥有red 类的 HTML 元素均变为红色:
.red {
color: red;
}
2.2.1.2.2. 调用
结构(HTML)需要用class属性来调用 class 类中定义的样式
<div class='red'>变红色</div>
2.2.1.2.3. 注意事项
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)。
- 可以理解为给这个标签起了一个名字,来表示。
- 长名称或词组可以使用中横线“-”来为选择器命名。
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
- 命名要有意义,尽量使别人一眼就知道这个类名的目的。
- 注意命名规范
2.2.1.2.4. 实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0509_Page_3_类选择器</title>
<style>
/* 类选择器 */
.red {
color: red;
}
.hot-sale-fruits {
color: deeppink;
}
</style>
</head>
<body>
<h1 class="red">调用类选择器的类名使得字体颜色样式为红色</h1>
<ul>
<li class="hot-sale-fruits">榴莲</li>
<li>芒果</li>
<li>菠萝蜜</li>
<li>凤梨</li>
<li class="hot-sale-fruits">西瓜</li>
<li>哈密瓜</li>
<li>山竹</li>
</ul>
<div class="red">div定义的是一个盒子(自己单独一行)</div>
</body>
</html>
2.2.1.2.5. 练习:画三个不同颜色的盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0509_4_练习:利用类画三个不同颜色的盒子</title>
<style>
/* 定义类 */
.red-box {
width: 200px;
height: 100px;
background-color: red;
}
.light-box {
width: 200px;
height: 100px;
background-color: aqua;
}
.purple-box {
width: 200px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div class="red-box">
<p>div就是一个盒子,可以用来容纳不同的网页内容</p>
</div>
<div class="light-box"></div>
<div class="purple-box"></div>
</body>
</html>
2.2.1.2.6. 多类名
我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签简单理解就是一个标签有多个名字。
2.2.1.2.6.1. 多类名使用方式
<div class="red font20">亚瑟</div>
- 在标签class 属性中写 多个类名
- 多个类名中间必须用空格分开
- 这个标签就可以分别具有这些类名的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0509_Page_5_多类名</title>
<style>
.red {
color: red;
}
.size {
font-size: 150px;
}
</style>
</head>
<body>
<div class="red">多类名调用test</div>
<div class="size">多类名调用test</div>
<div class="red size">多类名调用test</div>
</body>
</html>
2.2.1.2.6.2. 多类名开发中使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类(比如下面画盒子里存放尺寸样式的class),然后再调用自己独有的类(不同颜色的class)
- 从而节省CSS代码,统一修改非常方便
- 多类名选择器在后期布局比较复杂的情况下,还是较多使用的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0509_Page_6_多类名开发使用:优化三个不同颜色盒子</title>
<style>
.box-size {
width: 100px;
height: 50px;
}
.red-box {
background-color: red;
}
.light-box {
background-color: aqua;
}
.purple-box {
background-color: purple;
}
</style>
</head>
<body>
<div class="box-size red-box"></div>
<div class="box-size light-box"></div>
<div class="box-size purple-box"></div>
</body>
</html>
2.2.1.3. id选择器
id 选择器可以为标有特定id 的 HTML元素指定特定样式。
HTML 元素以 id 属性来设置id 选择器,CSS 中 id 选择器以“#"来定义。
💡 注意
id属性只能在每个HTML文档中出现一次。
样式(CSS)#定义,结构(HTML)id调用,只能调用一次,别的标签不可以调用。
💡 扩展思考:为什么实践的时候多次调用依旧可以实现呢?
这里id的唯一性是人为规定的,是为了给后端编程服务的,相当于一个标签的唯一的标识,原则上是不建议重复的,这里实践可以多次调用是是由于在单纯在html中可以重复使用,在后期的js编写中会有影响
2.2.1.3.1. 语法
#id名 {
属性1:属性值1;
}
e.g.,将id 为 nav 元素中的内容设置为红色
#nav {
color:red;
}
2.2.1.3.2. 与类选择器的区别
- 类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。
- id 选择器好比人的身份证号码,全中国是唯一的,不得重复。
- id选择器和类选择器最大的不同在于使用次数上。
- 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用。
2.2.1.3.3. 实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0509_Page_7_id选择器</title>
<style>
/* id选择器定义 */
/* 定义一个粉色的导航栏 */
#nav {
color: pink;
}
</style>
</head>
<body>
<div id="nav">这是导航栏1</div>
<div>这是导航栏2</div>
</body>
</html>
2.2.1.4. 通配符选择器
在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。
2.2.1.4.1. 语法
* {
属性1: 属性值1;
……
}
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用,比如,以下是清除所有的元素标签的内外边距:
* {
margin: 0;
padding: 0;
}
2.2.1.4.2. 实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0514_Page_1_通配符选择器</title>
<style>
/* 通配符选择器,不需要调用,对全局元素标签进行样式的应用 */
* {
color: aquamarine;
}
</style>
</head>
<body>
<div>块级元素</div>
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
<p>段落描述1</p>
<span>行级元素</span>
</body>
</html>
2.2.1.5. 基础选择器总结
如果是修改样式,类选择器使用最多。
3. CSS 字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。
3.1. 字体系列
CSS 使用 font-family属性定义文本的字体系列。
p {
font-family: "微软雅黑"; }
div {
font-family: Arial,"Microsoft Yahei","微软雅黑"; }
- 各种字体之间必须使用英文状态下的逗号隔开;
- 一般情况下,如果有空格隔开的多个单词组成的字体要加引号;
- 尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示;
- 最常见的几个字体 :body{ font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB'; }
💡 注意
- 设定的第一个字体无法显示(用户未安装)则显示下一个;
- 想单独设置就用类选择器或者ID选择器,这种设置要比通配符和标签选择器更详细,所以优先级更高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0514_Page_2_字体系列</title>
<style>
h1 {
font-family: Arial, Helvetica, sans-serif, "宋体";
}
p {
font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>生命是一树花开</h1>
<p>生命,是一树花开,或安静或热烈,或寂寞或璀璨。</p>
<p>日子,就在岁月的年轮中渐次厚重,那些天真的、跃动的、抑或沉思的灵魂,就在繁华与喧嚣中,被刻上深深浅浅、或浓或淡的印痕。</p>
</body>
</html>
3.2. 字体大小
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体),使用 font-size 属性定义字体大小。
P {
font-size:20px; }
- px(像素)大小是网页最常用的单位;
- 谷歌浏览器默认的文字大小为16px;
- 不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小;
- 可以给 body指定整个页面文字的大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0514_Page_3_字体大小</title>
<style>
body {
font-size: 20px;
}
h1 {
font-size: 20px;
}
/* 标题标签比较特殊,想修改大小需要单独指定 */
</style>
</head>
<body>
<h1>生命是一树花开</h1>
<p>生命,是一树花开,或安静或热烈,或寂寞或璀璨。</p>
<p>日子,就在岁月的年轮中渐次厚重,那些天真的、跃动的、抑或沉思的灵魂,就在繁华与喧嚣中,被刻上深深浅浅、或浓或淡的印痕。</p>
</body>
</html>
3.3. 字体粗细
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体),CSS 使用 font-weight属性设置文本字体的粗细。
P {
font-weight:700;
font-weight:bold; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0514_Page_4_字体粗细</title>
<style>
.bold {
font-weight: bold;
}
/* 实际开发中更倾向于使用数字对文本加粗,这里数字后面不加单位,700等效于bold */
.bold0 {
font-weight: 700;
}
/* 这里的400等效于不加粗的normal */
.normal {
font-weight: 400;
}
</style>
</head>
<body>
<h1 class="normal">生命是一树花开</h1>
<p class="bold">生命,是一树花开,或安静或热烈,或寂寞或璀璨。</p>
<p>日子,就在岁月的年轮中渐次厚重,那些天真的、跃动的、抑或沉思的灵魂,就在繁华与喧嚣中,被刻上深深浅浅、或浓或淡的印痕。</p>
</body>
</html>
学会让加粗标签(比如h和 strong等)不加粗,或者其他标签加粗。
3.4. 文字样式
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。CSS 使用 font-style 属性设置文本的风格。
p {
font-style: normal;
}
属性值 | 作用 |
normal | 默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic | 浏览器会显示斜体的字体样式。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0514_Page_5_字体样式</title>
<style>
.italic {
font-style: italic;
}
.normal {
font-style: normal;
}
/* 或者直接使用标签选择器,让em标签全部变成非倾斜的字体 */
/* em {
font-style: normal;
} */
</style>
</head>
<body>
<p class="italic">字体样式,这里一般指文本是否倾斜</p>
<em>这是em标签倾斜的文本</em> <br>
<i>这是i标签倾斜的文本</i> <br>
<em class="normal">这是em标签改为不倾斜的文本</em> <br>
<i class="normal">这是i标签改为不倾斜的文本</i>
</body>
</html>
💡 注意
平时一般很少给字体加斜体,反而总是需要给斜体标签(如em,i)改为不倾斜字体。
3.5. 字体复合属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。字体属性可以把以上文字样式综合来写,这样可以更节约代码。
body {
font:font-style font-weight font-size/line-height font-family;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0514_Page_6_字体复合属性</title>
<style>
/* 想要div文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
/* 方式一:一般写法 */
.method1 {
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: "Microsoft YaHei";
}
/* 方式二:复合属性写法 */
/* 注意!这里的顺序类别一定不可以调换!*/
/* 必须是:font-style-->font-weight-->font-size/line-height-->font-family */
.method2 {
font: italic 700 16px "Microsoft YaHei";
}
</style>
</head>
<body>
<div class="method1">这是字体符合属性的小例一</div>
<div class="method2">这是字体符合属性的小例二</div>
</body>
</html>
💡 注意
- 使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开;
- 不需要设置的属性可以省略(取默认值),但必须保留 font-size和 font-family属性,否则font 属性将不起作用
总之,其实只需要注意font-size和font-family的顺序就行,并且要放在最后,其他的自定义
3.6. 字体属性总结
属性 | 表示 | 注意点 |
font-size | 字号 | 通常用的单位是px,要跟单位px(像素) |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 加粗是 700 或者 bold; 不加粗是 normal 或者 400 ; 数字不跟单位 |
font-style | 字体样式 | 倾斜是 italic; 不倾斜是 normal; 工作中最常用 normal |
font | 字体多属性连写 | 1.字体连写是有顺序的,不能随意换位置 2. 其中字号和字体必须同时出现 |
4. CSS 文本属性
CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
4.1. 文本颜色
color 属性用于定义文本的颜色。
div {
color: red;
}
写法表示 | 属性值 |
预定义的颜色值 | red,green,blue |
十六进制(最常用) | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_1_文本颜色</title>
<style>
.method1 {
color: aquamarine;
}
.method2 {
color: #560be3f3;
}
.method3 {
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<div class="method1">test 1</div>
<div class="method2">test 2</div>
<div class="method3">test 3</div>
</body>
</html>
4.2. 对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式。
属性值 | 解释 |
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_2_文本对齐</title>
<style>
.center {
/* background-color: aqua; */
text-align: center;
}
</style>
</head>
<body>
<div class="center">this is test</div>
</body>
</html>
4.3. 装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等
属性值 | 描述 |
none | 默认。 没有装饰线(最常用) |
underline | 下划线。链接a 自带下划线(常用) |
overline | 上划线。(几乎不用) |
line-through | 删除线。(不常用) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_3_装饰文本</title>
<style>
.decoration_under {
text-decoration: underline;
}
.decoration_over {
text-decoration: overline;
}
.decoration_none {
text-decoration: none;
}
.decoration_cross {
text-decoration: line-through;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="decoration_none">this is test</div> <br>
<div class="decoration_under">this is test</div> <br>
<div class="decoration_over">this is test</div> <br>
<div class="decoration_cross">this is test</div> <br>
<!-- 去掉链接的下划线 -->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
4.4. 文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。em 是一个相对单位,就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小,则会按照父元素的1个文字大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_4_文本缩进</title>
<style>
p {
/* 文本缩进两个元素 */
text-indent: 2em;
}
div {
text-indent: 50px;
}
</style>
</head>
<body>
<p>5 月 14 日消息,腾讯宣布旗下的混元文生图大模型升级并对外开源,目前已经在 Hugging Face 及 Github 上发布,包含模型权重、推理代码、模型算法等完整模型,可供企业与个人开发者免费商用。</p>
<p>升级后的混元文生图大模型采用了与 Sora 一致的 DiT 架构,腾讯表示,混元 DiT 是首个中英双语 DiT 架构。混元 DiT 是一个基于 Diffusion transformer
的文本到图像生成模型,此模型具有中英文细粒度理解能力,混元 DiT 能够与用户进行多轮对话,根据上下文生成并完善图像。这也是业内首个中文原生的 DiT 架构文生图开源模型,支持中英文双语输入及理解,参数量 15 亿。</p>
<div>
据MikeChen总结介绍,用户使用GPT-4o可以感受到以下几方面的升级:一是用户可以随时打断模型,不用等到模型完成一个回合即可插话,二是模型升级后能实时响应、没有时延,三是模型学会了情感解读。后续根据研究主管Beridzov的演示,当Beridzov将手机镜头拍摄自己在一张纸上演示线性方程式时,GPT-4o能实时给予指导和解法。
</div>
</body>
</html>
4.5. 行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_5_行间距或称行高</title>
<style>
.lineHeight {
line-height: 26px;
}
</style>
</head>
<body>
<p class="lineHeight">5 月 14 日消息,腾讯宣布旗下的混元文生图大模型升级并对外开源,目前已经在 Hugging Face 及 Github
上发布,包含模型权重、推理代码、模型算法等完整模型,可供企业与个人开发者免费商用。</p>
<p>升级后的混元文生图大模型采用了与 Sora 一致的 DiT 架构,腾讯表示,混元 DiT 是首个中英双语 DiT 架构。混元 DiT 是一个基于 Diffusion transformer
的文本到图像生成模型,此模型具有中英文细粒度理解能力,混元 DiT 能够与用户进行多轮对话,根据上下文生成并完善图像。这也是业内首个中文原生的 DiT 架构文生图开源模型,支持中英文双语输入及理解,参数量 15 亿。</p>
</body>
</html>
4.6. 文本属性总结
属性 | 表示 | 注意点 |
color | 文本颜色 | 通常用 十六进制,比如 #fff000 |
text-align | 文本对齐 | 可以设定文字水平的对齐方式 |
text-indent | 文本缩进 | 通常用于段落首行缩进; 2个字的距离 text-indent: 2em; |
text-decoration | 文本修饰 | 添加下划线 underline; 取消下划线 none; |
line-height | 行高 | 控制行与行之间的距离 |
5. CSS(层叠样式表) 的引入方式
5.1. CSS的三种样式表
按照 CSS 样式书写的位置(或者引入的方式),CSS样式表可以分为三大类
- 行内样式表(行内式)
- 内部样式表(嵌入式 )
- 外部样式表(链接式)
5.2. 内部样式表
内部样式表(内嵌样式表)是写到html页面内部,是将所有的 CSS 代码抽取出来,单独放到一个<style>标签中。
- <style>标签理论上可以放在 HTML文档的任何地方,但一般会放在文档的<head>标签中
- 通过此种方式,可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰,但是并没有实现结构与样式完全分离
- 使用内部样式表设定CSS,通常也被称为嵌入式引入,这种方式是练习时常用的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_6_内部样式表</title>
<style>
div {
text-indent: 2em;
line-height: 26px;
}
</style>
</head>
<body>
<div>所谓的内部样式表,就是在html页面内部写样式,但是是将那些样式定义抽取出来<strong>单独写在style标签内部</strong>的。</div>
<div>理论上,这些通过style标签抽取出来的样式可以放在html页面的任何位置,但是<strong>一般将style标签和包含的样式放在head标签中</strong>。</div>
</body>
</html>
5.3. 行内样式表
行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS 样式。适合于修改简单样式。
- style 其实就是标签的属性;
- 在双引号中间,写法要符合CSS规范;
- 可以控制当前的标签设置样式
- 由于书写繁琐,并且没有体现出结构与样式相分离的思想,所以不推荐大量使用,只有对当前元素添加单样式的时候,可以考虑使用;
- 使用行内样式表设定CSS,通常也被称为行内式引入;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_7_行内样式表</title>
</head>
<body>
<p>这是关于行内样式表的小例。</p>
<p>如果我们想要修改的样式只是很多段落或内容其中的一小部分。</p>
<p style="color: aqua; text-decoration: underline; font-weight: 700;">比如一小句话。</p>
</body>
</html>
5.4. 外部样式表
实际开发都是外部样式表,适合于样式比较多的情况。核心是:样式单独写到CSS 文件中,之后把CSS文件引入
到 HTML 页面中使用。
5.4.1. 引入方式
在head标签之间使用link引入:
<link rel="stylesheet" href="xxStyle.css">
5.4.2. 实践
/* 在css文件中定义样式,这个文件中没有标签,只有样式 */
div {
color: aqua;
}
.p {
text-indent: 2em;
line-height: 26px;
font-style: normal;
font-weight: 400;
font-family: Arial;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_8_外部样式表</title>
<link rel="stylesheet" href="0515_8_OuterStyle.css">
</head>
<body>
<div>外部样式表标签选择器测试</div>
<p class="p">外部样式表自定义类选择器测试</p>
</body>
</html>
文件结构:
5.5. CSS引入方式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要link引入 | 最多(推荐) | 控制多个页面 |
6. 综合案例
6.1. 材料
北方高温明日达鼎盛 京津冀多地地表温度将超60℃(大标题,没有加粗)
年-月-日 时:分:秒 来源:中国天气网(链接) 表单文本输入框(默认显示内容“请输入查询条件”)矩形搜索按钮。和后面的正文分割线隔开,效果如下:
中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。
气温41.4℃!地温66.5!北京强势迎七月首个高温日(标题)
今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。
在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
明日热度再升级!京津冀携手冲击38℃+(标题)
中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。
不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)
本文来源:中国天气网 责任编辑:刘京_NO5631(字号更小,颜色呈灰色)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>0515_Page_9_天气综合案例</title>
<link rel="stylesheet" href="0515_9_style.css">
</head>
<body>
<h1 class="center">北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
<div class="second_title center">2024-05-15 21:25:30 来源:<a href="http://www.weather.com.cn/"
target="_blank">中国天气网</a>
<input type="text" value="请输入查询条件" class="search"> <input type="submit" value="搜索" class="submit">
</div>
<!-- 还没学过的标签,一条横线 -->
<hr>
<!-- 也可以自己动手想办法用div标签的盒子特性实现 -->
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<p>中国天气网讯
今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。
</p>
<h2>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h2>
<p>今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。</p>
<div class="center"><img src="weather.jpeg" alt="下午四点地面自动观测站气温" class="center"></div>
<p>在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
</p>
<h2>明日热度再升级!京津冀携手冲击38℃+</h2>
<p>中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。
明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p>不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</p>
<div>本文来源:中国天气网 责任编辑:刘京_NO5631</div>
</body>
</html>
7. Chrome 调试工具
Chrome 浏览器提供了一个非常好用的调试工具,可以用来调试 HTML结构和 CSS 样式。
7.1. 打开调试工具
打开 Chrome 浏览器,按下F12键或者右击页面空白处→检查
7.2. 使用调试工具
- Ctrl+滚轮 可以放大开发者工具代码大小。
- 左边是 HTML 元素结构,右边是CSS样式。
- 右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色
- Ctrl+0 复原浏览器大小。
- 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误.
- 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误