👨 Biaoge ⏰于2023-06-01 18:05发布 👓阅读量：236 🏷️文章类型：【 前端技术 】
上一章我们学习了“前端技术 第二课 认识简单的HTML标签”
我们先进行复习一下（因为比较重要）
1、超链接标签是（）2、换行标签是（）3、图片标签是（）4、密码的输入框的type是（）5、水平分隔线标签是（）6、三级标题标签是（）7、提交按钮的输入框的type是（）
前端技术 第三课 编写常用的CSS样式
先把以下代码复制到index.html文件中
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"> <!--设置编码格式：UTF-8-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置网页在浏览器的等比例大小为1-->
<link href="css/style.css" rel="stylesheet"> <!-- 导入外部的css文件 -->
<script src="js/index.js"></script> <!-- 导入外部的JavaScript文件 -->
<title>前端技术 第三课 编写常用的CSS样式</title> <!-- 网页标题 -->
</head>
<style>
/*CSS样式*/
</style>
<body>
<!--HTML主体-->
<h1>前端技术 第三课 编写常用的CSS样式</h1>
<div class="body">
<span id="text">欢迎来到我开发的第一个网页</span>
<span>今天学习的是常用的CSS样式</span>
<p>
今天的课程非常重要，上一章我们讲到简单的HTML。
以前中我们提到，HTML好比房子的框架，而CSS就是房子里的装饰。
我们常见的网站基本使用大量的css样式，能给我们展示一定的可阅读性。
</p>
<ol>
<h3>现在介绍在那里写CSS</h3>
<li style="">在每一个标签的style="CSS代码"参数的引号中写</li>
<li>在<style>/*CSS代码*/</style>标签中写</li>
<li>在外置的css文件中写，再通过link标签引入</li>
</ol>
<ul>
<h3>写好css后如何调用</h3>
<li>如果再style=""写的，无需调用，这一个参数只在当前标签生效</li>
<li>如果在<style></style>代码中、或者外部css文件中写的话，请使用以下方法</li>
<ol>
<li id="tw">*{/*CSS代码*/}表示应用到本页面的全部标签</li>
<li id="tw">div{/*CSS代码*/}表示应用到本页面的全部div标签</li>
<li id="tw">.body{/*CSS代码*/}表示应用到本页面标签参数为class="body"</li>
<li id="tw">#text{/*CSS代码*/}表示应用到本页面标签参数为id="text"</li>
</ol>
</ul>
<div id="bottom">
<p>如<p></p>何<p></p>横<p></p>向<p></p>排<p></p>列<p>
<a href="http://彪哥.TOP" target="_blank" style="margin-left: 100px;">本页面由彪哥.TOP开发教程，禁止复制它用</a>
</div>
</div>
</body>
<script>
/*js代码*/
</script>
</html>运行的效果如下
什么是CSS？
以前中我们提到，HTML好比房子的框架，而CSS就是房子里的装饰。 我们常见的网站基本使用大量的css样式，能给我们展示一定的可阅读性。
如图
重要性：
每一个框的大小、长度、位置、背景，文字的字体、大小、排序方式、对齐方式……都是由CSS控制的，如果没有css【彪哥.TOP】的首页就是右图
现在介绍在那里写CSS
- 在每一个标签的style="CSS代码"参数的引号中写
- 在标签中写<style>/*CSS代码*/</style>
- 在外置的css文件中写，再通过link标签引入
方法一：直接在标签的style=""参数中写
方法二：在<style></style>标签中写
方法三：在外置css文件中写
以下是方法三中在index.html调用外置css文件
我们今天主要在<style></style>标签中写
写好css后如何调用？
- 如果再style=""写的，无需调用，这一个参数只在当前标签生效
- 如果在<style></style>标签中、或者外部css文件中写的话，请使用以下方法
- *{ /*CSS代码*/ }表示应用到本页面的全部标签
- div{ /*CSS代码*/ }表示应用到本页面的全部div标签
- .body{ /*CSS代码*/ }表示应用到本页面标签参数为class="body"
- #text{ /*CSS代码*/ }表示应用到本页面标签参数为id="text"
提示#在CSS中/* 被注释的内容 */，是注释（在HTML中<!-- -->是注释标签）
开始学习CSS
内边距，外边距（建议每次编写css时，养成初始化边距为0）
<style>
/*CSS样式*/
*{ /* 所有标签 */
margin: 0; /* 外边距为0 */
padding: 0; /* 内边距为0 */
}
</style>自己看着编写把，每写一行自己看效果（每一段样式都有一张效果图）
注意#大括号{}是一对存在的，建议在编写时先把大括号打全，再在里面编写样式（养成这个好习惯）
/* 注释文字 */：这里面的是注释，不需要敲<style> /*CSS样式*/ *{ /* 所有标签 */ margin: 0; /* 外边距为0 */ padding: 0; /* 内边距为0 */ } h1{ /* 应用到本页面的全部h1标签 */ width: 100%; /* 宽度为100%（即浏览器100%的宽度，不固定），还可以设置成100px（即100个像素点，固定） */ height: 100px; /* 高度为100px（即100个像素点，固定），还可以设置成100%（同理） */ text-align: center; /* 文本的对齐方式，center即居中，还可以设置left左/right右 */ font-family: "宋体"; /* 文本的字体，“宋体”，还可以多种字体，不过需要访问设备安装了该字体才能显示 */ font-weight: 600; /* 文本的粗细，一般500较细，600较粗，不设置即默认值 */ font-size: 28px; /* 文本的字体大小，即28个像素，随意设置 */ line-height: 100px; /* 文本的行间距，字体每一行的高度为100px像素 */ color: #f00; /* 文本的颜色，#f00为红色、#fff白色、#000黑色（16进制颜色编码）设置其他颜色自行百度 */ white-space: nowrap; /* 文本字体强制不换行 */ background-color: #ddd; /* 设置h1这个区域的背景（宽度100%*高度100px） */ margin: auto; /* 设置这个区域的外边距,auto表示上下左右居中、0 auto左右居中、auto 0上下居中、5px上下左右外边距都为5像素、 5px 10px上下为5像素，左右为10像素、5px 6px 7px 8px 上5像素，左6像素，下7像素，右8像素 */ padding: 0; /* 设置这个区域的内边距0px上下左右内边距都为5像素、5px 10px上下为5像素，左右为10像素、5px 6px 7px 8px 上5像素，左6像素，下7像素，右8像素 */ margin-top: 0px; /* 当然也可以单独设置不同方向的外边距，如外边距据顶0像素 margin-left左/right右/bottom底 */ padding-bottom: 0px; /* 也可以单独设置不同方向的内边距，如外边距据底部0像素 margin-left左/right右/top顶 */ border: 1px solid #000; /* 设置这个区域的边框，1px像素，solid实线，#000黑色 */ border-radius: 20px; /* 设置这个区域的边框圆角20像素 */ }
.body{ /* 应用到本页面的全部的class="body"属性标签上 */
width: 100%; /* 宽度为浏览器的100%大小 */
height: 100%; /* 高度为浏览器的100%高度 */
color: #00f; /* 设置该控件下的所有字体为#00f蓝色 */
}
#text{ /* 应用到本页面的全部的id="text"属性标签上 */
width: 350px; /* 控件区域宽度的350px */
height: 80px; /* 控件区域高度的80px */
line-height: 50px; /* 文本的行间距，字体每一行的高度为50px像素 */
margin: 20px auto; /* 设置控制区域的外边距上下为20像素，左右居中 */
text-align: right; /* 文字对齐方式，居右 */
color: #f00; /* 设置文本字体为#F00红色 */
font-size: 25px; /* 设置字体大小为25像素 */
}
ul,ol{ /* 应用到本页面的全部ul与ol标签；可以同时设置多个控件，中间用英文逗号隔开 */
width: auto; /* 控件区域宽度自适应，一般自适应最小宽度 */
height: auto; /* 控件区域高度自适应，一般自适应最打高度 */
color: #000; /* 设置控件区域下的文字颜色都为#000黑色 */
font-size: 22px; /* 设置控件区域下的文字大小都为22像素 */
margin: 10px; /* 设置控制区域的外边距上下左右都为10像素 */
padding: 10px 50px; /* 设置控制区域的内边距上下为20像素，左右50像素 */
border: 1px solid #00f; /* 设置控制区域的边距边框为1像素、实线、颜色#00f蓝色 */
border-radius: 5px; /* 设置这个区域的边框圆角5像素 */
}ul > h3{ /* 只应用到本页面的ul标签下的h3标签（页面下有多个h3标签，但只应用到ul下的h3标签） */
color: #F00; /* 设置控件的文字颜色为#f00红色 */
background-color: rgba(230,240,255,0.8); /* 设置控件区域的背景，rgba是一种颜色编码，230的红色，240的绿色，255的蓝色调配，80%的透明度 */
}
#tw{/* 应用到本页面的全部的id="tw"属性标签上（页面中有多个id=tw的标签，但是只要写这一个可应用到全部的tw） */
height: 50px; /* 控件区域高度的50像素 */
line-height: 50px; /* 文本的行间距，字体每一行的高度为50px像素 */
font-size: 20px; /* 设置字体大小为20像素 */
color: #555; /* 设置控件的文字颜色为#555灰色 */
}
li:hover{ /* css伪动态，当鼠标移到到li标签上时，应用下方的样式到你的鼠标放在的li标签上 */
color: #f00; /* 当鼠标移动到li标签上时，字体变成#f00红色 */
font-size: 25px; /* 当鼠标移动到li标签上时，字体大小变成25px像素 */
}
#bottom{ /* 应用到本页面的全部的id="bottom"属性标签上 */
position: fixed; /* 控件的定位方式（默认是相对定位），fixed以窗口做的绝对定位（固定）（无论怎么滑动页面，控件都在一个位置） */
left: 0; /* 居左0，配合position: fixed使用 */
right: 0; /* 居右0，配合position: fixed使用 */
bottom: 0; /* 居下0，配合position: fixed使用 */
display: flex; /* 控件变成一个弹性盒子，flex表示从左到右横向排序、none不显示，默认block……（正常使用这3个可以了）其他自行百度 */
background-color: #ff0; /* 设置控件背景为#ff0黄色 */
}
全部代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8"> <!--设置编码格式：UTF-8-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置网页在浏览器的等比例大小为1-->
<link href="css/style.css" rel="stylesheet"> <!-- 导入外部的css文件 -->
<script src="js/index.js"></script> <!-- 导入外部的JavaScript文件 -->
<title>前端技术 第三课 编写常用的CSS样式</title> <!-- 网页标题 -->
</head>
<style>
/*CSS样式*/
*{ /* 所有标签 */
margin: 0; /* 外边距为0 */
padding: 0; /* 内边距为0 */
}
h1{ /* 应用到本页面的全部h1标签 */
width: 100%; /* 宽度为100%（即浏览器100%的宽度，不固定），还可以设置成100px（即100个像素点，固定） */
height: 100px; /* 高度为100px（即100个像素点，固定），还可以设置成100%（同理） */
text-align: center; /* 文本的对齐方式，center即居中，还可以设置left左/right右 */
font-family: "宋体"; /* 文本的字体，“宋体”，还可以多种字体，不过需要访问设备安装了该字体才能显示 */
font-weight: 600; /* 文本的粗细，一般500较细，600较粗，不设置即默认值 */
font-size: 28px; /* 文本的字体大小，即28个像素，随意设置 */
line-height: 100px; /* 文本的行间距，字体每一行的高度为100px像素 */
color: #f00; /* 文本的颜色，#f00为红色、#fff白色、#000黑色（16进制颜色编码）设置其他颜色自行百度 */
white-space: nowrap; /* 文本字体强制不换行 */
background-color: #ddd; /* 设置h1这个区域的背景（宽度100%*高度100px） */
margin: auto; /* 设置这个区域的外边距,auto表示上下左右居中、0 auto左右居中、auto 0上下居中、5px上下左右外边距都为5像素、
5px 10px上下为5像素，左右为10像素、5px 6px 7px 8px 上5像素，左6像素，下7像素，右8像素 */
padding: 0; /* 设置这个区域的内边距0px上下左右内边距都为5像素、5px 10px上下为5像素，左右为10像素、5px 6px 7px 8px 上5像素，左6像素，下7像素，右8像素 */
margin-top: 0px; /* 当然也可以单独设置不同方向的外边距，如外边距据顶0像素 margin-left左/right右/bottom底 */
padding-bottom: 0px; /* 也可以单独设置不同方向的内边距，如外边距据底部0像素 margin-left左/right右/top顶 */
border: 1px solid #000; /* 设置这个区域的边框，1px像素，solid实线，#000黑色 */
border-radius: 20px; /* 设置这个区域的边框圆角20像素 */
}
.body{ /* 应用到本页面的全部的class="body"属性标签上 */
width: 100%; /* 宽度为浏览器的100%大小 */
height: 100%; /* 高度为浏览器的100%高度 */
color: #00f; /* 设置该控件下的所有字体为#00f蓝色 */
}
#text{ /* 应用到本页面的全部的id="text"属性标签上 */
width: 350px; /* 控件区域宽度的350px */
height: 80px; /* 控件区域高度的80px */
line-height: 50px; /* 文本的行间距，字体每一行的高度为50px像素 */
margin: 20px auto; /* 设置控制区域的外边距上下为20像素，左右居中 */
text-align: right; /* 文字对齐方式，居右 */
color: #f00; /* 设置文本字体为#F00红色 */
font-size: 25px; /* 设置字体大小为25像素 */
}
ul,ol{ /* 应用到本页面的全部ul与ol标签；可以同时设置多个控件，中间用英文逗号隔开 */
width: auto; /* 控件区域宽度自适应，一般自适应最小宽度 */
height: auto; /* 控件区域高度自适应，一般自适应最打高度 */
color: #000; /* 设置控件区域下的文字颜色都为#000黑色 */
font-size: 22px; /* 设置控件区域下的文字大小都为22像素 */
margin: 10px; /* 设置控制区域的外边距上下左右都为10像素 */
padding: 10px 50px; /* 设置控制区域的内边距上下为20像素，左右50像素 */
border: 1px solid #00f; /* 设置控制区域的边距边框为1像素、实线、颜色#00f蓝色 */
border-radius: 5px; /* 设置这个区域的边框圆角5像素 */
}
ul > h3{ /* 只应用到本页面的ul标签下的h3标签（页面下有多个h3标签，但只应用到ul下的h3标签） */
color: #F00; /* 设置控件的文字颜色为#f00红色 */
background-color: rgba(230,240,255,0.8); /* 设置控件区域的背景，rgba是一种颜色编码，230的红色，240的绿色，255的蓝色调配，80%的透明度 */
}
#tw{/* 应用到本页面的全部的id="tw"属性标签上（页面中有多个id=tw的标签，但是只要写这一个可应用到全部的tw） */
height: 50px; /* 控件区域高度的50像素 */
line-height: 50px; /* 文本的行间距，字体每一行的高度为50px像素 */
font-size: 20px; /* 设置字体大小为20像素 */
color: #555; /* 设置控件的文字颜色为#555灰色 */
}
li:hover{ /* css伪动态，当鼠标移到到li标签上时，应用下方的样式到你的鼠标放在的li标签上 */
color: #f00; /* 当鼠标移动到li标签上时，字体变成#f00红色 */
font-size: 25px; /* 当鼠标移动到li标签上时，字体大小变成25px像素 */
}
#bottom{ /* 应用到本页面的全部的id="bottom"属性标签上 */
position: fixed; /* 控件的定位方式（默认是相对定位），fixed以窗口做的绝对定位（固定）（无论怎么滑动页面，控件都在一个位置） */
left: 0; /* 居左0，配合position: fixed使用 */
right: 0; /* 居右0，配合position: fixed使用 */
bottom: 0; /* 居下0，配合position: fixed使用 */
display: flex; /* 控件变成一个弹性盒子，flex表示从左到右横向排序、none不显示，默认block……（正常使用这3个可以了）其他自行百度 */
background-color: #ff0; /* 设置控件背景为#ff0黄色 */
}
</style>
<body>
<!--HTML主体-->
<h1>前端技术 第三课 编写常用的CSS样式</h1>
<div class="body">
<span id="text">欢迎来到我开发的第一个网页</span>
<span>今天学习的是常用的CSS样式</span>
<p>
今天的课程非常重要，上一章我们讲到简单的HTML。
以前中我们提到，HTML好比房子的框架，而CSS就是房子里的装饰。
我们常见的网站基本使用大量的css样式，能给我们展示一定的可阅读性。
</p>
<ol>
<h3>现在介绍在那里写CSS</h3>
<li style="">在每一个标签的style="CSS代码"参数的引号中写</li>
<li>在<style>/*CSS代码*/</style>标签中写</li>
<li>在外置的css文件中写，再通过link标签引入</li>
</ol>
<ul>
<h3>写好css后如何调用</h3>
<li>如果再style=""写的，无需调用，这一个参数只在当前标签生效</li>
<li>如果在<style></style>代码中、或者外部css文件中写的话，请使用以下方法</li>
<ol>
<li id="tw">*{/*CSS代码*/}表示应用到本页面的全部标签</li>
<li id="tw">div{/*CSS代码*/}表示应用到本页面的全部div标签</li>
<li id="tw">.body{/*CSS代码*/}表示应用到本页面标签参数为class="body"</li>
<li id="tw">#text{/*CSS代码*/}表示应用到本页面标签参数为id="text"</li>
</ol>
</ul>
<div id="bottom">
<p>如<p></p>何<p></p>横<p></p>向<p></p>排<p></p>列<p>
<a href="http://彪哥.TOP" target="_blank" style="margin-left: 100px;">本页面由彪哥.TOP开发教程，禁止复制它用</a>
</div>
</div>
</body>
<script>
/*js代码*/
</script>
</html>全部效果
第三课 编写常用的CSS样式 index.html真实效果网页(点击访问)
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
