一、基本概念
1.定义
CSS（Cascading Style Sheets，层叠样式表），前面说了CSS是一种用于描述网页内容外观和样式的标记语言。
具体地，它通过选择器将样式规则应用到HTML元素上，控制网页的布局、颜色、字体等外观特征。
2.作用
- CSS的作用主要是将网页的内容和样式分离（HTML与CSS分离），使得网页的维护工作更加简单高效。
- 通过CSS，开发者可以统一控制网站的外观，包括颜色、字体、布局等，而不需要在每个HTML元素中单独设置。
二、书写位置
- 外联样式：将CSS代码写在一个或多个外部文件中，然后通过
<link>标签在HTML文档的<head>部分引入。这种方式有利于样式的复用和维护。
<link rel="stylesheet" href="1.css"> 2.内嵌样式：在HTML文档的<head>部分或元素的开始标签中使用<style>标签直接书写CSS代码。这种方式适用于单个页面的样式定义。
方式二：内嵌样式
<style>
h1{
color: #f00;
} 3.行内样式：直接在HTML元素的开始标签中使用style属性定义样式。这种方式适用于对单个元素进行样式定义，但不利于样式的复用和维护。
<h1 style="color: rgb(255,0,0);">印国产武器研制缘何“持续失败”：官僚机构擅长为利益牺牲军队需求</h1> -->三、完整示例
css文件如下：
HTML文件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置浏览器兼容性 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>印国产武器研制缘何“持续失败”：官僚机构擅长为利益牺牲军队需求</title>
<!-- 方式一：当前行样式
<h1 style="color: rgb(255,0,0);">印国产武器研制缘何“持续失败”：官僚机构擅长为利益牺牲军队需求</h1> -->
<!-- 方式二：内嵌样式
<style>
h1{
color: #f00;
}
</style> -->
<!-- 方式三：link -->
<link rel="stylesheet" href="1.css">
</head>
<body>
<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" width="200px"> 新浪军事 > 综合>正文
<h1>印国产武器研制缘何“持续失败”：官僚机构擅长为利益牺牲军队需求</h1>
<hr>
2024年07月08日 16:58 参考消息
<hr>
</body>
</html>to be continue！！！
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 一文清晰了解CSS
发表评论 取消回复