CSS简介
HTML作为网页的结构，CSS作为网页的表现，JS作为网页的行为。
CSS指层叠样式表（Cascading Style Sheets），描述了如何在屏幕、纸张或其他媒体上显示HTML元素。节省了大量工作，同时控制多张页面的布局。
CSS语法
CSS规则集由选择器和声明块组成：选择器{属性：值；属性：值}
p{color:rgb(223, 223, 40);font-size: 30px;}选择器指向需要设置样式的HTML元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个CSS属性名称和一个值，以冒号分隔。
多条CSS声明用分号分隔，声明块用花括号括起来。
实例：
span{
font-family: 黑体;
font-size: 20px;
}
CSS选择器
CSS选择器用于“查找”（或选取）要设置样式的HTML元素。
CSS选择器分为：
- 元素选择器：通过元素名选择
- id选择器：在元素中是唯一命名的，绝对不能重复
<!-- 应用于id="one"的HTML元素-->
#one {
text-align: center;
color: red;
}- 类/class选择器：可以重复命名。一个元素当中可以使用多个类名，用空格隔开
<!-- 所有带有class="one"的HTML元素将为红色且居中对齐-->
.one {
text-align: center;
color: red;
}
<!-- 类名不能以数字开头-->- 伪类选择器：一种特殊类，表示元素的特殊状态（例如：点击时效果；鼠标引入时效果）
<!-- 鼠标悬停在例子中的链接上时，它会改变颜色-->
a:hover {
color: #ff0000;
}
如何添加CSS
三种使用CSS的方法：
- 外部css
- 内部css
- 行内css
外部css
通过使用外部样式表，只需要修改一个文件即可改变整个网站的外观
每张HTML页面必须在head部分的<link>元素内包含对外部样式表文件的引用。
实例：
<!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>Document</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>Hello World</p>
</body>
</html>外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
外部 .css 文件不应包含任何 HTML 标签。
mystyle.css内部：
p {
color: navy;
margin-left: 20px;
}
内部CSS
如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。
内部样式是在 head 部分的 <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>Document</title>
<style>
p{
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<p>Hello World</p>
</body>
</html>
行内CSS
行内样式（也称内联样式）可用于为单个元素应用唯一的样式。
如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。
实例：
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
