文章目录
- 一 基础认知
- 1.1 CSS初识
- 1.1.1 CSS介绍
- 1.1.2 CSS语法规则
- 1.2 CSS引入样式
- 1.2.1 CSS引入方式
- 1.2.2 CSS小结
- 二 基础选择器
- 2.1 标签选择器
- 2.2 类选择器
- 2.3 id选择器
- 2.4 通配符选择器
- 三 字体和文本样式
- 3.1 文字
- 3.1.1 字体大小
- 3.1.2 字体粗细
- 3.1.3 是否倾斜
- 3.1.4 字体系列
- 3.1.5 样式折叠问题
- 3.1.6 字体相关属性font的连写
- 3.2 文本样式
- 3.2.1 文本缩进：text-indent
- 3.2.2 文本水平对齐方式：text-align
- 3.2.3 文本修饰：text-decoratio
- 3.3 line-height行高
- 3.4 拓展 颜色常见取值
- 3.5 拓展 水平居中
- 四 综合案例
- 4.1 新闻
一 基础认知
1.1 CSS初识
1.1.1 CSS介绍
1.1.2 CSS语法规则
<!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>
/* css注释 */
/* 这里写css */
/* 选择器{} */
/* 选择器：查找标签 */
p{
/* 文字颜色 */
color: red;
/* 字变大,像素px */
font-size: 30px;
/* 背景颜色 */
background-color: aqua;
/* width,height */
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<p>这是一个p标签</p>
</body>
</html>
1.2 CSS引入样式
1.2.1 CSS引入方式
外联式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 关系为样式表 href：路径 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是p标签</p>
</body>
</html>
/* 选择器{} */
p{
color: aqua;
}
行内式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 关系为样式表 href：路径 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是p标签</p>
<div style="color: red;">这是div标签</div>
</body>
</html>
1.2.2 CSS小结
二 基础选择器
2.1 标签选择器
<!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: red;
}
/* 标签选择器:选中所有的这个标签都生效 */
</style>
</head>
<body>
<p>pppppppppppp</p>
<p>lll</p>
</body>
</html>
2.2 类选择器
<!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>
.p1{
color: aqua;
}
.p2{
color: red;
}
.size{
font-size: 66px;
}
</style>
</head>
<body>
<!-- 一个标签可以使用多个类名，用空格隔开即可 -->
<p class="p1 size">123</p>
<p class="p2">666</p>
</body>
</html>
2.3 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>
#two{
color: aqua;
font-size: 66px;
}
</style>
</head>
<body>
<div id="two">666</div>
</body>
</html>
2.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>
*{
color: red;
}
</style>
</head>
<body>
<div>444</div>
<p>6666</p>
<h1>9999</h1>
</body>
</html>
三 字体和文本样式
3.1 文字
3.1.1 字体大小
<!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{
font-size: 60px;
}
</style>
</head>
<body>
<p>段落文字</p>
</body>
</html>
3.1.2 字体粗细
<!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-weight: 700;
}
h1{
font-weight: 100;
color: aqua;
}
</style>
</head>
<body>
<div>这是div</div>
<h1>标题</h1>
</body>
</html>
3.1.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-style: italic;
color: aqua;
}
em{
font-style: normal;
}
</style>
</head>
<body>
<div>倾斜</div>
<em>倾斜</em>
</body>
</html>
3.1.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>
div{
/* font-family: 宋体; */
/* 如果用户电脑内有安装微软雅黑，就使用黑体显示字体 */
/* 如果电脑没有安装黑体，就按照任意一种非衬线字体系列显示 */
font-family: 微软雅黑,黑体,sans-serif;
}
</style>
</head>
<body>
<div>字体</div>
</body>
</html>
3.1.5 样式折叠问题
3.1.6 字体相关属性font的连写
<!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>
/* font: style weight size 字体 */
p{
color: aqua;
font: italic 700 60px 宋体;
}
/* 一个属性冒号后面书写多个值的写法：复合属性 */
</style>
</head>
<body>
<p>666666</p>
</body>
</html>
3.2 文本样式
3.2.1 文本缩进：text-indent
<!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{
/* 首行缩进2个字的大小 */
/* 默认字号：16px 32 */
/* text-indent: 32px; */
/* em：一个字的大小 */
text-indent: 2em;
font-size: 40px;
}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</body>
</html>
3.2.2 文本水平对齐方式：text-align
<!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{
/* text-align: right; */
text-align: center;
}
body{
text-align: center;