1，CSS的引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css体验</title>
<!-- link引入css外部样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是p标签</p>
<!-- 行内样式 -->
<div style="color: cadetblue; font-size: 30px ;">这是div标签</div>
</body>
</html>
2，标签选择器
p{
...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 标签选择器，特点选中同名标签设置为相同样式，无法差异化同名标签的样式 */
p {
color: aqua;
}
</style>
</head>
<body>
<p>这是p标签</p>
<p>222</p>
</body>
</html>
3，类选择器
.作用对象{
定义的属性；
}
class="定义的属性"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 定义red */
.red{
color: red;
}
/* 定义size */
.size{
font-size: 30px;
}
</style>
</head>
<body>
<!-- 使用 -->
<!-- 一个类选择器可以多个标签使用 -->
<div class="red">这是一个div</div>
<div>这是一个div</div>
<!-- 一个标签可以使用多个类名，在class里用空格隔开 -->
<p class="red font-size">这是一个p</p>
</body>
</html>
4，id选择器
#作用对象{
定义的属性；
}
id="定义的属性"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 定义 */
#red{
color: red;
}
</style>
</head>
<body>
<!-- 使用 -->
<div id="red">这是一个div</div>
</body>
</html>
5，通配符选择器
*{
定义的属性；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 定义 */
/* 作用于所有标签 */
*{
color: red;
}
</style>
</head>
<body>
<div>这是一个div</div>
<p>这是一个p</p>
<h1>这是一个h1</h1>
</body>
</html>
6，画盒子
.作用对象 {
width:100px;
height:100px;
color:aquamarine;
background-color:cadetblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
width: 100px;
height: 100px;
color: aquamarine;
background-color: cadetblue;
}
.yellow {
width: 200px;
height: 200px;
background-color: brown;
}
</style>
</head>
<body>
<div class="red">这是一个div</div>
<div **class="yellow"**style="color: burlywood;">这是一个div</div>
</body>
</html>
7，文字控制属性1
字体大小： font-size:px
字体粗细： font-weight:
**字体不倾斜：**font-style: italic;
**字体倾斜：**font-style:normal;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 经验，谷歌浏览器文字默认为16px */
p {
/* 字体大小，必须有单位如px */
font-size: 30px;
}
/* 字体加粗700，不加粗400 */
h1 {
font-weight: 400;
}
div {
font-weight: 700;
}
/* 字体倾斜italik,不倾斜normal */
em {
font-style: normal;
}
ul {
font-style: italic;
}
</style>
</head>
<body>
<p>测试文字大小</p>
<h1>标题</h1>
<div>div标签</div>
<em>em标签</em>
<ul>
<li>倾斜italik</li>
<li>倾斜italik</li>
<li>倾斜italik</li>
</ul>
</body>
</html>
8，文字控制属性2
**行高：**line-height:
**字体：**font-family:
行高垂直居中
height:100px;
line-height:100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 行高 */
p {
line-height: 30px;
}
/* 接数字会变成当前标签fontsize的倍数 */
div {
line-height: 4;
}
/* 行高垂直居中 */
h1 {
font-weight: 400;
background-color: aquamarine;
font-size: 30px;
/* height是多少lineheight就是多少 */
/* 只能单行文字垂直居中 */
height: 100px;
line-height: 100px;
}
/* 字体 */
h2 {
font-family: 楷体;
}
</style>
</head>
<body>
<p>在鲁迅的个人生活中，有两件事对他的打击是沉重的。一个是他的婚姻生活，另一个就是与弟弟周作人的失和。多年来，研究界对此形成了"经济说"、"失敬说"、"家庭纠纷说"等观点。第一种说法"经济说"认为是周作人妻子羽太信子花钱过于大手大脚，致使家中往往入不敷出，最后使得兄弟产生罅隙。</p>
<div>在鲁迅的个人生活中，有两件事对他的打击是沉重的。一个是他的婚姻生活，另一个就是与弟弟周作人的失和。多年来，研究界对此形成了"经济说"、"失敬说"、"家庭纠纷说"等观点。第一种说法"经济说"认为是周作人妻子羽太信子花钱过于大手大脚，致使家中往往入不敷出，最后使得兄弟产生罅隙。</div>
<h1>行高垂直居中</h1>
<h2>字体</h2>
</body>
</html>
9， 文字控制属性3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
font: italic 700 30px 楷体;
}
/* 字号字体必须写 */
p {
font: 30px 楷体;
}
/* 文本缩进 */
h1 {
font: normal 400 30px 楷体;
/* 1em=当前标签的字号大小 */
text-indent: 2em;
}
/* 改变的是字，不是标签 */
/* 左对齐 */
h2 {
text-align: left;
}
/* 居中对齐 */
h3 {
text-align: center;
}
/* 右对齐 */
h4 {
text-align: right;
}
/* 图片居中 */
h5 {
text-align: center;
}
</style>
</head>
<body>
<div>测试 font 属性</div>
<p>测试 font 属性</p>
<h1>在鲁迅的个人生活中，有两件事对他的打击是沉重的。一个是他的婚姻生活，另一个就是与弟弟周作人的失和。鲁迅和周作人一直不愿意向别人谈及此事从而也使得这件事越发的扑朔迷离，成为了中国现代文学史上最不可理解的事件。多年来，研究界对此形成了"经济说"、"失敬说"、"家庭纠纷说"等三种观点。</h1>
<h2>左对齐</h2>
<h3>居中对齐</h3>
<h4>右对齐</h4>
<h5><img src="../2.png" width="50px"> <br>图片居中</h5>
</body>
</html>
10，文字控制属性4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 去掉下划线 */
a {
text-decoration: none;
}
/* 加下划线 */
div {
text-decoration: underline;
}
/* 加删除线 */
p {
text-decoration: line-through;
}
/* 加顶划线 */
span {
text-decoration: overline;
}
</style>
</head>
<body>
<a href="#">a 标签 去掉下划线</a><br>
<div>加下划线</div>
<p>p标签,添加删除线</p>
<span>span 标签,添加顶划线</span>
</body>
</html>
11，文字颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: aqua;
}
/* rgb */
p {
color:rgb(0, 255, 3)
}
/* rgba */
div {
color: rgba(0, 0, 0, 0.5);
}
/* 十六进制 */
span {
color: #0000ff;
}
</style>
</head>
<body>
<h1>文字颜色</h1>
<p>文字颜色</p>
<div>文字颜色</div><br>
<span>文字颜色</span>
</body>
</html>
12，复合选择器
div span {
定义的属性；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 */
/* 将div里的span标签变为红色 */
/* 孙子,重孙也会变成红色 */
div span {
color: aqua;
}
</style>
</head>
<body>
<span>这是span标签</span>
<div>
<span>这是子span标签</span>
<p>
<span>这是孙子span</span>
</p>
</div>
</body>
</html>
13，复合选择器2
div > span {
定义的属性；
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- /* 子选择器 */ -->
<!-- /* 将h1里的h2变成红色 */ -->
<!-- /* 孙子,重孙不也会变成红色 */ -->
<style>
div > span {
color: aquamarine;
}
</style>
</head>
<body>
<span>这是span标签</span>
<div>
<span>这是子span标签</span>
<p>
<span>这是孙子span</span>
</p>
</div>
</body>
</html>
14，复合选择器3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- /* 并集选择器 */ -->
<!-- 选中的标签全部变成红色 -->
<style>
div,span,p {
color: aquamarine;
}
</style>
<!-- 交集选择器 -->
<!-- 选中同时满足多个条件的元素 -->
<style>
p.box {
color: aquamarine;
}
</style>
</head>
<body>
<!-- 并集选择器 -->
<span>这是span标签</span>
<div>这是div标签</div>
<p>这是p标签</p>
<!-- 交集选择器 -->
<p class="box">p标签 使用了类选择器box</p>
<p>p标签</p>
<div class="box">div标签 使用了类选择器box</div>
</body>
</html>