Python入门到精通6：CSS网页美化入门1
CSS（层叠样式表）是网页设计的焦点语言之一，它让我们的网页从单调的结构变得生动美观。今天，我将带各人快速了解CSS的基础知识，包括基本概念、引入方式、选择器、字体与文本样式以及调试工具的使用。1. CSS基本概念
1.1 认识CSS
CSS全称为"层叠样式表"(Cascading Style Sheets)，它的主要作用是为HTML标签设置样式，控制网页的表面表现。
网页开发有三大焦点：
[*]结构：HTML（决定了身材骨架）
[*]表现：CSS（决定了样式美观）
[*]行为：JavaScript（决定了交互动态效果）
1.2 CSS引入方式
CSS有三种主要引入方式，各有适用场景：
引入方式誊写位置作用范围使用场景内嵌式<style>标签中当前页面小案例、快速测试外联式单独的.css文件，通过<link>引入多个页面现实项目开发行内式标签的style属性中当前标签共同JS动态修改样式 实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css引入</title>
<link rel="stylesheet" href="css/index.css">
<style>
h1{
color: green;
}
</style>
</head>
<body>
<!--内嵌式-->
<h1>标题1</h1>
<!--外联式-->
<h2>标题1</h2>
<!--行内式-->
<h3 style="color: red">标题1</h3>
</body>
</html> h2{
color: #d44b81;
} 项目结构视图：
https://i-blog.csdnimg.cn/direct/48b98ef996b64fc1aad4751126175aa0.png
运行效果：
https://i-blog.csdnimg.cn/direct/e0bebd36791046779318d92fb95ed41d.png
2. 基础选择器
选择器是CSS的焦点，用于指定哪些元素应用样式。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style>
/*1.1 标签选择器（复用性）*/
/*结构：标签名 { css属性名：属性值； }*/
/*作⽤范围：对引入页面的同类标签有效*/
h2 {
/*字体为红色*/
color: red;!important;
font-size: 50px;
}
/*1.2 类选择器*/
/* 结构：.类名 { css属性名：属性值； }*/
/* 作⽤范围：对引入的页面的同class类名有效*/
.myh2 {
/*字体为天蓝色*/
color: #0be4d5;
font-size: 40px;
}
/*2.3 id选择器（唯一性）*/
/* 结构：#id属性值 { css属性名：属性值； }*/
/* 作⽤范围：对引入的页面的指定id名称有效有效*/
#subTitle {
/*字体为蓝色*/
color: blue;
font-size: 30px;
}
/*2.4、*通用选择器 */
/* 结构：*{ css属性名：属性值； }*/
/* 作⽤：对引入页面的所有标签有效*/
*{
/*字体为绿色*/
color: #19ff32;
font-size: 20rpx;
}
</style>
</head>
<body>
<!--字体为天蓝色：说明类选择器的权重大于标签选择器-->
<h2 class="myh2">标签选择器</h2>
<!--字体为蓝色：说明id选择器的权重大于标签选择器和类选择器-->
<h2 id="subTitle" class="myh2">id选择器</h2>
<!--字体为红色，说明通用选择器的权重小于标签选择器，权重最低-->
<h2 >通用选择器</h2>
</body>
</html> 运行效果：
https://i-blog.csdnimg.cn/direct/9842add8f9634ec0909ad0318498c013.png
总结：
2.1 标签选择器（复用性）：权重第三
结构：标签名 { css属性名：属性值； }
作⽤范围：对引入页面的同类标签有效
2.2 类选择器:权重第二
结构：.类名 { css属性名：属性值； }
作⽤范围：对引入的页面的同class类名有效
2.3 id选择器（唯一性）：权重最高
结构：#id属性值 { css属性名：属性值； }
作⽤范围：对引入的页面的指定id名称有效有效
2.4、*通用选择器:权重最低
结构：*{ css属性名：属性值； }
作⽤：对引入页面的所有标签有效
2.5、优先级别：
!important>id选择器>类选择器>标签选择器>通用选择器 3. 字体与文本样式
3.1 字体样式
（1）字体⼤⼩：font-size----值：数字+px
（2）字体粗细：font-weight---值：normal不加粗，bold加粗
（3）字体样式：font-style---值：normal不倾斜，italic倾斜
（4）字体类型：font-family---谷歌浏览器默认字体为思源黑体，值："字体名称（系统已经安装的字体）" 实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体与文字样式</title>
<style>
h1{
font-weight: normal;
font-size: 100px;
}
p {
/*字体大小*/
font-size: 50px;
/*字体粗细：bold加粗，normal正常*/
font-weight: bold;
/*字体样式：italic倾斜，normal正常*/
font-style: italic;
/*设置字体：谷歌浏览器默认字体为思源黑体，值："字体名称（系统已经安装的字体）"*/
font-family: "方正舒体";
}
i{
/*斜体字变为正常字体*/
font-style: normal;
font-size: 50px;
}
</style>
</head>
<body>
<h1 align="center">春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，
白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千
成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名
字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲
的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润
湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，
唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
<p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，
人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，
一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；
还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
<p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，
一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；
刚起头儿，有的是工夫，有的是希望。</p>
<p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
<p>春天像小姑娘，花枝招展的，笑着，走着。</p>
<p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
<i>我是斜体字标签！</i>
</body>
</html> 运行效果：
https://i-blog.csdnimg.cn/direct/9e496fbe94b84fc49e483c5ca6e91992.png
3.2 文本样式
⽂本样式：
（1）⽂本缩进：text-indent---缩进两个字符大小2em(1em=亲父级)
（2）⽂本⽔平对⻬⽅式：text-align---值：left,right,center
（3）⽂本修饰：text-decoration---值：underline下划线,none不添加下划线
（4）line-height⾏⾼：①直接数字，表示的是倍数关系②数字+px：表示的是具体行高 实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本样式属性</title>
<style>
p{
/*em是相对单位，相当于父元素的字体大小，默认为16px*，2em表示的是缩进两个字符*/
text-indent: 2em;
/*text-indent: 32px;*/
/*设置行高为1.5倍*/
line-height: 1.5;
}
body {
font-size:20px;
}
h1{
/*⽂本⽔平对⻬⽅式：left,right,center*/
text-align: center;
/*文本修饰：underline下划线 none正常*/
text-decoration: underline;
}
a{
text-decoration: underline;
}
</style>
</head>
<body>
<h1>春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，
白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千
成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名
字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲
的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润
湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，
唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
<p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，
人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，
一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；
还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
<p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，
一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；
刚起头儿，有的是工夫，有的是希望。</p>
<p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
<p>春天像小姑娘，花枝招展的，笑着，走着。</p>
<p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
<i>我是斜体字！</i>
<a href="https://www.baidu.com/index.htm" target="_blank">百度一下</a>
</body>
</html> 运行效果：
https://i-blog.csdnimg.cn/direct/b9e758fd865647a0b8c2533b732dae44.png
3.4 颜色表示（综合文字和文本样式）
CSS有多种颜色表示方式：
表示方式示例分析关键词red, blue预界说颜色名RGBrgb(255,0,0)红绿蓝三原色RGBArgba(255,0,0,0.5)带透明度的RGB十六进制#ff0000 或 #f00常用网页色表示 颜⾊：
（1）⽂字颜⾊：color
（2）背景颜⾊：background-color
(3)颜色表示方式：
①关键字（颜色单词）：red black blue green white
②rgb(三原色：红绿蓝)：rgb(255,255,255)白色 rgb(255,0,0)红色 rgb(0,0,0)黑色
③rgba(三原色+透明度)：rgba(255,0,0,0,0.5),rgba(255,0,0,0)
④十六进制：#6位数字或者#3位数字#ff0000红色，#00ff00绿色，#0000ff蓝色，#000000黑色，ffffff白色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体与文字样式</title>
<style>
h1{
font-weight: normal;
font-size: 100px;
}
p {
font-size: 50px;
font-weight: bold;
font-style: italic;
font-family: "方正舒体";
text-indent: 100px;
text-align: left;
text-decoration: #efc3d3;
line-height: 1;
/* ine-height : 1 可以取消上下间距 */
color: #da6c9b;
background-color: beige;
}
i{
font-style: normal;
font-size: 50px;
}
</style>
</head>
<body>
<h1 align="center">春</h1>
<p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
<p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
<p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，
白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千
成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名
字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲
的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润
湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，
唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
<p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，
人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，
一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；
还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
<p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，
一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；
刚起头儿，有的是工夫，有的是希望。</p>
<p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
<p>春天像小姑娘，花枝招展的，笑着，走着。</p>
<p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
<i>我是斜体字！</i>
</body>
</html> 运行效果：
https://i-blog.csdnimg.cn/direct/a117e282786f40e3b914ca0ce23cd793.png
4.综合训练
通过css和HTML完成一下平衡车效果图：
https://i-blog.csdnimg.cn/direct/0d05a343274e4642be7ba51031cab7b8.png
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子属性</title>
<style>
div
{
width: 234px;
height: 300px;
background-color: #ffffff;
text-align: center;
}
.myimge
{
width: 160px;
}
.a
{
font-size: 14px;
line-height: 25px;
}
.b
{
font-size: 12px;
line-height: 30px;
color: #cccccc;
}
.c
{
font-size: 14px;
color: #ffa500;
}
</style>
</head>
<body>
<div>
<img src="imges/nine.jpg" class="myimge"><br>
<p class="a">九号平衡车</p>
<p class="b">成年人的玩具</p>
<p class="c">1999元</p>
</div>
</body>
</html> 运行效果:
https://i-blog.csdnimg.cn/direct/a65162aa7d4e4ddba49861c24cdb0d89.png
结语
CSS的天下既广阔又风趣，今天先容的只是最基础的部分。掌握了这些基础知识后，你已经可以开始美化简单的网页了。在接下来的学习中，我们会打仗到更多高级选择器、背景控制、布局技巧等内容，让你的网页设计能力更上一层楼。
记着，CSS学习最好的方式就是多实践，打开你的编辑器，开始动手实验吧！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]