如何学习CSS：
- CSS是什么
- CSS怎么用
- CSS选择器
- 美化网页
- 盒子模型
- 浮动
- 定位
- 网页动画（特效效果）
什么是CSS
层叠级联样式表
CSS怎么用
四种导入方式
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 规范<style> 可以编写CSS代码 ，每一个声明最好用;结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
<!-- 内部样式 -->
<style>
h2{
color: green;
}
</style>
<!-- 导入式 -->
<style>
@import url("我的第一个CSS/style.css");
</style>
<!-- 链接式 -->
<link rel="stylesheet" href="我的第一个CSS//style.css">
</head>
<body>
<!-- 优先级：行内样式>内部样式>外部样式 就近原则 -->
<h1>昨夜雨疏风骤</h1>
<!-- 行内样式 -->
<h2 style="color: red">浓睡不消残酒</h2>
</body>
</html>
css:
/*外部样式*/
h1{
color: red;
}
三种基本选择器
作用：选择页面上的某一个或者某一类元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!-- 标签选择器，会选择到页面上所有这个标签的元素 -->
h2{
color: green;
}
</style>
<style>
<!-- 类选择器的格式 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用
-->
.qinjiang{
color: blueviolet;
}
.kuangshen{
color: cornflowerblue;
}
</style>
<style>
<!-- id选择器： id必须保证全局唯一
#id名称{
}
-->
#zhifeng{
color: aquamarine;
}
</style>
</head>
<body>
<!--优先级：
id>class>标签选择器
-->
<h1 class="qinjiang">试问卷帘人</h1>
<h1 class="kuangshen">却道海棠依旧</h1>
<h1 id="zhifeng">知否 知否</h1>
<p class="kuangshen">应是绿肥红瘦</p>
</body>
</html>
/*单个元素选择器*/
元素 {样式声明}
/*组合元素选择器*/
元素1，元素2 {样式声明}
示例：
<style type="text/css">
/* 组合元素选择器 */
/*将`h1`、`p`元素的颜色同时设置为灰色*/
h1,p {color:grey;}
</style>
外边距为20（margin-top: 20px;）
内边距为20（padding: 20px;）
背景颜色白色（background-color: white;）。
扫一扫
30万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
