学习HTML+CSS的第六课笔记！_一个网页可以引用多个样式表-优快云博客

本文链接：https://blog.youkuaiyun.com/Lewisxin/article/details/56489076

本文详细介绍了CSS的四种样式类型：浏览器默认样式、内联样式、内部样式和外部样式，强调了字体样式的设置，并探讨了选择器的优先级。通过实例展示了内联、内部和外部样式的应用，以及ID和类选择器的使用规则，揭示了CSS在网页布局中的重要作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS 层叠式样式表（页面布局+修饰）（/* 注销 */）
1.优点：修改简单，可以独立存在，多个页面可以同时使用

2.分类：a.浏览器缺省（默认）
b.内联样式（作用于当前标记）
c.内部样式（作用于当前页面）
d.外部样式（作用于整个网站）

字体样式：颜色：color：red;
字号大小：font-size：12px;(在css里面px一定要加)

3.内联样式（怎么做）
<p style="属性1：属性值1；属性2：属性值2；">天猫</p>
（注：多个属性之间用；号分开）(谷歌浏览器最小字号为12px)

4.内部样式（怎么做）

语法：选择器样式：

1.标记选择器（标记名称{属性；属性值：}）
<head><style type="text/css"></style></head>
选择器{属性：属性值；}

2.类选择器
写法：<head>
<style type="text/css">
.tmall{属性:属性值;}

</style>
</head>

<span class="menu132487(
class="odd tmall"(类可以有多个，优先读取的是样式表下面的类样式)
命名规则：首个字不能用数字，可以是链接符（-）（_）">天猫</span>
菜单：menu
导航：nav
头部：top
底部：footer
新闻列表：new_list
新闻详情：news_info
内容：content
<span class="taobao">淘宝</span>
<span class="jindong">京东</span>

3.ID选择器（少用ID选择器，多用类选择器）
#tm{color：#000}
<span id="tm">天猫</span>
（从单纯的css中，id名可以重复）
id主要用于js，jquery（这里面的ID不能重复使用）

选择器的优先级比较
标记选择器 < 类选择器(优先自动选择)
类选择器 < ID选择器(优先自动选择)

5.外部样式
1.新建外部样式表 .css
@charset "utf-8";(直接写样式)
选择器{属性：属性值;}

2.如何引入外部样式表
<link rel="stylesheet" href="in" type"text/css" />
同一个外部样式表可以嵌入多个页面
一个页面可以引入多个外部样式表

各个排版样式的优先级
内联样式 > 内部样式
内部样式 > 外部样式