CSS--添加样式
已于 2023-03-15 13:56:30 修改
阅读量593
收藏
点赞数
1
一、认识CSS
层叠样式表（Cascading Style Sheets）是一种用来表现HTML（标准通用语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
网站的化妆师---CSS，是用来设置网页样式的语言。
CSS语法：
一个CSS规则由一个选择器和一个声明块组成
选择器：你要定义样式的html元素
声明块：包含一个或多个声明，每个声明包含一个CSS属性名称和一个值。中间要用冒号隔开，声明块要用大括号包裹起来
注意：选择器和花括号之间，花括号和属性名之间，冒号前后，分号前后都可以添加任何多个空格和换行，但是属性名和属性值是一个整体，中间不能有空格和换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>认识CSS</title>
<style>
p {
color:yellow;
text-align: center;
}
</style>
</head>
<body>
<p>
Hello CSS!
</p>
</body>
</html>运行效果如下：
二、CSS之内联样式
当浏览器读取一个样式表时，它将根据样式表中的信息对HTML文档进行格式化。CSS中有三种插入样式表的方法，分别时内联CSS，内部CSS和外部CSS。
内联CSS也称之为内联样式，又称为行内样式，它被用来为一个单一的元素应用一个独特的样式。
要使用内联样式需要将样式属性添加到相关的元素中，样式属性可以包含任何CSS属性。在这个语法结构中，标签直接作为选择器使用。最后一个样式声明可以不用添加分号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联样式</title>
</head>
<body>
<h1 style="color:blue; text-align:center;">内联样式</h1>
<p style="color:red; ">称为行内样式，它被用来为一个单一的元素应用一个独特的样式。</p>
</body>
</html>运行效果如下：
三、CSS之内部样式
内部CSS， 如果一个单一的HTML页面有一个独特的风格，那可以使用一个内部样式表。内部样式表一般定义在head元素里，通过style元素来定义，页面的样式声明均需要添加在style元素内部。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部样式</title>
<style>
body {
background-color: white;
}
h1 {
color: red;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>如何学会HTML前端制作？</h1>
<p>认真学习，复习知识点，不断巩固知识点。</p>
</body>
</html>
运行效果如下：
内部样式的弊端：
1.内部样式只能作用于一个页面，如果要实现多个页面共享一个样式，就做不到了
2.代码增多的时候要上下滚动去找
四、CSS之外部样式
外部CSS，可以通过改变一个文件来改变整个网站的外观。外部样式将CSS代码放在一个独立的以.css为后缀名的文件中，使html页面结构文件和css样式文件完全独立开来。
每个HTML页面都必须在head元素里添加<link>元素，link是链接的意思
rel属性，值为stylesheet，表示关联一个样式表
href属性，用来设置一个对外部样式表文件的引用，值为.css文件的路径
HTML文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>外部样式</title>
<link rel="stylesheet" href="./css/external-style.css">
</head>
<body>
<h1>如何学会HTML前端制作？</h1>
<p>认真学习，复习知识点，不断巩固知识点。</p>
</body>
</html>CSS文件：
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}运行结果如下：
五、样式表的优先级
内联样式>内部样式
内联样式>外部样式
内部样式和外部样式，浏览器最后读取的优先级高。
当一个HTML元素有一个以上的样式时，作用优先级如下：
在一个HTML元素内，内联样式优先级最高，会覆盖外部样式和内部样式以及浏览器默认样式。
在head里添加的内部样式和引入的外部样式，后添加和引入的优先级高。
浏览器默认样式优先级最低。
扫一扫
暂无认证
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
