CSS入门
- 声明
- CSS样式
- 样式使用的优先级
- CSS选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 伪类
- 伪元素
- CSS样式选择器的优先级别
- CSS设置背景样式
- CSS设置文本样式
后面的就懒啦,明天整理,妈妈和我说熬夜的不是好孩子,好吧,其实是我困了 - CSS设置表格样式
- CSS两行三列布局
- CSS三行两列布局
- CSS盒子模型
- CSS设置盒子模型的边框
- CSS设置盒子模型的边距
- CSS设置盒子模型的外边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS声明</title>
<style>
body {
background-color: rgb(72, 146, 115);
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何使用CSS样式一</title>
</head>
<body>
<p style="color: lightcoral;font-weight: bolder;">这是一个段落</p>
<p>这是一个段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何使用CSS样式二</title>
<style>
p {
color: lightcoral;
font-weight: bolder;
}
</style>
</head>
<body>
<p>这是一个段落</p>
<p>这又是一个段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何使用CSS样式三</title>
<link type="text/css" rel="stylesheet" href="04.css">
</head>
<body>
<p>这是一个段落</p>
<p>这又是一个段落</p>
</body>
</html>
p {
color: lightcoral;
font-weight: bolder;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式使用的优先级</title>
<style>
p {
color: blue;
font-weight: lighter;
}
</style>
</head>
<body>
<p style="color: lightcoral;font-weight: bolder;">这是一个段落</p>
<p>这又是一个段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS选择器</title>
<style>
#p {
color: red;
}
.myclass {
color: blue;
}
span {
color: yellow;
}
[title] {
color: green;
}
</style>
</head>
<body>
<p id="p">这是一个段落</p>
<p class="myclass">这又是一个段落</p>
<span>这是一段文本内容</span>
<p title="this is p.">这是一个段落</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
span {
background-color: lightblue;
}
div span {
background-color: lightcoral;
}
</style>
</head>
<body>
<div>
<span>
Span 1.
</span>
<span>
Span 2.
</span>
</div>
<span>Span 3.</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<style>
span {
background-color: lightblue;
}
div>span {
background-color: lightcoral;
}
</style>
</head>
<body>
<div>
<span>
Span 1.
<span>
Span 2.
</span>
</span>
</div>
<span>Span 3.</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下一个相邻兄弟选择器</title>
<style>
#one+li {
color: red;
}
</style>
</head>
<body>
<ul>
<li id="one">One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
a:link {
color: red;
}
a:hover {
color: antiquewhite;
}
a:active {
color: aqua;
}
a:visited {
color: blueviolet;
}
</style>
</head>
<body>
<a href="#">樱桃小完犊子</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
p::before {
content: "<<";
color: lightgreen;
}
p::after {
content: ">>";
color: lightgreen;
}
</style>
</head>
<body>
<p>樱桃小完犊子</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
p {
color: aqua !important;
}
.myclss {
color: bisque;
}
#zln {
color: brown;
}
</style>
</head>
<body>
<p id="zln" class="myclass">樱桃小完犊子</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类</title>
<style>
#p1 {
background-color: aqua;
}
#p2 {
background-image: url("111.png");
width: 200px;
height: 200px;
}
#p3 {
background-image: url("111.png");
width: 200px;
height: 200px;
background-position: -200px, -200px;
}
body {
background-image: url("111.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p id="p1">第一个</p>
<p id="p2">1</p>
<p id="p3"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS设置文本样式</title>
<style>
#p1 {
color: red;
}
#p2 {
text-align: left;
}
#p3 {
text-align: center;
}
#p4 {
text-align: right;
}
#p5 {
text-decoration: none;
}
#p6 {
text-indent: 50px;
}
#p7 {
vertical-align: text-top;
}
</style>
</head>
<body>
<p id="p1">第一行</p>
<p id="p2">第二行</p>
<p id="p3">第三行</p>
<p id="p4">第四行</p>
<a id="p5" href="#">第五行</a>
<p id="p6">第六行</p>
<p id="pt">第七行</p>
</body>
</html>