一.理解id和class选择器
id 选择器
CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
#para1
{
text-align:center;
color:red;
}注意：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {text-align:center;}两者区别：
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
class 选择器有别于id选择器，class可以在多个元素中使用。
二.css的创建和使用
1.创建css
创建以css为后缀的文件
然后在该文件中编写代码
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}注意：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。
2.在外部样式表引入外部样式表（即在html中引入css）
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
注意点：rel="sytlesheet"为固定格式，而href后要填写的相对路径
三.多从样式的优先级
1.样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
2.style.css 文件样式代码如下：
h3 {
color:blue;
}xxx.heml代码如下
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
</head>
<body>
<h3>显示绿色，是内部样式</h3>
</body>效果：
选择器优先规则
四.类选择器和伪类选择器
类选择器
- 定义：类选择器用于选择具有特定类属性的 HTML 元素。
- 语法：以点（
.）开头，后面跟类名。例如.classname选择所有具有class="classname"的元素。 - 用法：可以在 HTML 元素中通过
class属性直接指定一个或多个类。类选择器适用于多个元素共享同一类的情况。
伪类选择器
- 定义：伪类选择器用于选择处于特定状态或位置的元素，而不是根据元素的属性。
- 语法：以冒号（
:）开头，后面跟伪类名。例如:hover选择当鼠标悬停在元素上时的状态。 - 用法：伪类选择器常用于指定元素在某些交互状态下的样式（如
:hover,:focus,:active）或根据文档结构选择元素（如:first-child,:nth-child(n)）。 - 翻译理解：hover（徘徊，悬停）
代码示例
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow; /* 类选择器 */
}
p:hover {
color: red; /* 伪类选择器 */
}
</style>
</head>
<body>
<p class="highlight">这是一个带有类的段落。</p>
<p>这是另一个段落。将鼠标悬停在这里会改变颜色。</p>
</body>
</html>总结
- 类选择器：依赖于元素的
class属性，适用于多个元素的样式复用。 - 伪类选择器：根据元素的状态或结构选择元素，适用于动态效果和特定位置的元素。
五.背景
1.背景颜色
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色:
实例
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
2.背景图片
（1）.设置定位与不平铺
如果你不想让图像平铺，你可以使用 background-repeat 属性
如果想改变背景的位置可以利用 background-position 属性
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
background-image:url('https://static.jyshare.com/images/mix/img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>效果：
翻译理解：repeat（重复），position（安置），url（用户需要语句）
（2）设置背景图片固定
作用：背景图片不会随着页面的滚动而滚动
语句：background-attachment:fixed;
翻译理解：attachment（附件），fixed（固定的）
其他属性值：
| 值 | 描述 |
|---|---|
| scroll | 背景图片随着页面的滚动而滚动，这是默认的。 |
| fixed | 背景图片不会随着页面的滚动而滚动。 |
| local | 背景图片会随着元素内容的滚动而滚动。 |
| initial | 设置该属性的默认值。 阅读关于 initial 内容 |
| inherit | 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容 |
六.文本
1.文本颜色
用color属性来控制颜色
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>效果
2.文本的对齐方式
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>
</html>效果：
解释：
其中text-align: justify; 是一种 CSS 属性，用于设置文本的对齐方式。当你将某个元素的文本对齐设置为 justify 时，文本的两端会被拉伸到与父元素的左右边缘对齐，形成整齐的边界。这种对齐方式常用于段落文本，以提高可读性和美观性。
使用 justify 对齐的效果是，文本行的每一行都尽量填满整个行宽，除了最后一行（如果不满一行的话）。这种对齐方式常见于书籍、报纸和杂志的排版中。
例如，下面的 CSS 代码将段落的文本对齐设置为两端对齐：
翻译理解：justify（使...对齐）
3.其他实例
（1）指定字符之间的距离
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>效果：
（2）指定行与行之间的距离
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>（3）添加文本阴影
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h1 {text-shadow:2px 2px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow 效果</h1>
<p><b>注意：</b> Internet Explorer 9 以及更早的浏览器不支持 text-shadow 属性。</p>
</body>
</html>效果
翻译理解：shadow（阴影），letter（字母），spacing（间隔）
（4）所有CSS属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |