一、CSS的简介
1.css-网页的美容师
css是层叠样式表（Cascading Style Sheets）的简称，有时也称之为css样式表或级联样式表。css也是一种标记语言。css主要用于设置html页面内的文本内容、图片外形以及版面的布局和外观显示样式。
二、CSS基础选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>体验CSS语法规范</title>
<style>
/* 选择器 {样式} */
/* 给谁改样式 {改什么样式} */
p {
color: red;
}
</style>
</head>
<body>
<p>体验CSS语法规范</p>
</body>
</html>2.ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* id选择器口诀：样式#定义 结构id调用 只能调用一次 他人切勿使用 */
#green {
color: green;
}
</style>
</head>
<body>
<div id="green">我是id选择器</div>
</body>
</html>3.类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基础选择器之类选择器</title>
<style>
/* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用 */
.red {
color: red ;
}
.green {
color: green;
}
</style>
</head>
<body>
<ul>
<li class="red">基础选择器</li>
<li class="red">类选择器</li>
<li class="green">id选择器</li>
</ul>
</body>
</html>4.通配符选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
/* *这里把html body div span 等等标签都改为了红色 */
* {
color: red;
font-size: 35px;
}
</style>
</head>
<body>
<div>我的</div>
<span>你的</span>
<pre>他的</pre>
</body>
</html>5.多类名选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多类选择器使用方法</title>
<style>
/* 多个类别中间空格隔开 */
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">多类选择器</div>
</body>
</html>三、CSS文本属性
1.字体粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css字体属性之字体粗细系列</title>
<style>
/* 后面也可输入数字700 等价于bold都是加粗效果 */
/* 实际开发中，我们更提倡使用数字表示加粗或变细 */
.bold {
font-weight: bold;
}
</style>
</head>
<body>
<h2>css字体属性之字体大小系列</h2>
<p>css字体属性之字体大小系列</p>
<p>css字体属性之字体大小系列</p>
<p class="bold">css字体属性之字体大小系列</p>
<p>css字体属性之字体大小系列</p>
</body>
</html>2.字体颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css字体属性之字体颜色</title>
<style>
/* 字体可以用预定颜色值、十六进制、RGB代码表示 */
p {
color: red; #FF0000 rgb(225,0,0)
}
</style>
</head>
<body>
<p>css字体属性之字体颜色</p>
</body>
</html>3.字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css字体属性之字体样式</title>
<style>
p {
/* italic表示倾斜样式 */
font-style: italic;
}
em {
/* normal表示正常字体 可让斜体表示成正体 */
font-style: normal;
}
</style>
</head>
<body>
<p>css字体属性之字体样式</p>
<em>css字体属性之字体样式</em>
</body>
</html>4.文本对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css文本属性之文本对齐</title>
<style>
/* 属性值有 :left（左对齐） right（右对齐） center（居中对齐） */
div {
text-align: center;
}
</style>
</head>
<body>
<div>css文本属性之文本对齐</div>
</body>
</html>5.装饰文本
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css文本属性之装饰文本</title>
<style>
div {
/* 下划线 */
/* text-decoration: underline; */
/* 删除线 */
/* text-decoration: line-through; */
/* 上划线 */
text-decoration: overline;
}
a {
/* 取消a默认的下划线 */
text-decoration: none ;
color:brown;
}
</style>
</head>
<body>
<div>css文本属性之装饰文本</div>
<a href="#">css文本属性之装饰文本</a>
</body>
</html>6.文本缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css文本外观之文本缩进</title>
<style>
p {
font-size: 24;
/* 文本的第一行首行缩进多少距离 */
/* text-indent: 20px; */
/* 如果此时填写2em 则是缩进当前元素2个文字大小的距离 */
text-indent: 2em;
/* line-height: 表示行间距 数字控制具体距离 */
line-height: 30px;
}
</style>
</head>
<body>
<p>配合中国放宽入境政策，中国国家移民管理局宣布2023年1月8日起，有序恢复受理审批中国公民因出国旅游和访友申请普通护照，还有外国人普通签证、停留证件，以及居留证件的签发、延期、换发等服务。</p>
<p>css文本外观之文本缩进</p>
</body>
</html>四、CSS引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css引入方式</title>
</head>
<body>
<!-- 这是行内样式表 把style内容写在标签内 -->
<div style="color:red; font-size:25px;">css引入方式</div>
<!-- 外部样式表在html使用link标签引入 -->
<link rel="stylesheet" href="css文件路径">
</body>
</html>最后更新 2024-07-17