Python入门到精通6：CSS网页美化入门1

守听  论坛元老 | 2025-4-16 15:59:07 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 2026|帖子 2026|积分 6078

CSS（层叠样式表）是网页设计的焦点语言之一，它让我们的网页从单调的结构变得生动美观。今天，我将带各人快速了解CSS的基础知识，包括基本概念、引入方式、选择器、字体与文本样式以及调试工具的使用。
1. CSS基本概念

1.1 认识CSS

CSS全称为"层叠样式表"(Cascading Style Sheets)，它的主要作用是为HTML标签设置样式，控制网页的表面表现。
网页开发有三大焦点：


  • 结构：HTML（决定了身材骨架）
  • 表现：CSS（决定了样式美观）
  • 行为：JavaScript（决定了交互动态效果）
1.2 CSS引入方式

CSS有三种主要引入方式，各有适用场景：
引入方式誊写位置作用范围使用场景内嵌式<style>标签中当前页面小案例、快速测试外联式单独的.css文件，通过<link>引入多个页面现实项目开发行内式标签的style属性中当前标签共同JS动态修改样式  实例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>css引入</title>
  6.     <link rel="stylesheet" href="css/index.css">
  7.     <style>
  8.         h1{
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14. <!--内嵌式-->
  15. <h1>标题1</h1>
  16. <!--外联式-->
  17. <h2>标题1</h2>
  18. <!--行内式-->
  19. <h3 style="color: red">标题1</h3>
  20. </body>
  21. </html>
复制代码
  1. h2{
  2.     color: #d44b81;
  3. }
复制代码
项目结构视图： 
 
运行效果：

2. 基础选择器

选择器是CSS的焦点，用于指定哪些元素应用样式。
示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>基础选择器</title>
  6.     <style>
  7.     /*  1.1 标签选择器（复用性）*/
  8.     /*结构：标签名 { css属性名：属性值； }*/
  9.     /*作⽤范围：对引入页面的同类标签有效*/
  10.     h2 {
  11.         /*字体为红色*/
  12.         color: red;!important;
  13.         font-size: 50px;
  14.         }
  15.     /*1.2 类选择器*/
  16.     /*    结构：.类名 { css属性名：属性值； }*/
  17.     /*    作⽤范围：对引入的页面的同class类名有效*/
  18.     .myh2 {
  19.         /*字体为天蓝色*/
  20.         color: #0be4d5;
  21.         font-size: 40px;
  22.         }
  23.     /*2.3 id选择器（唯一性）*/
  24.     /*    结构：#id属性值 { css属性名：属性值； }*/
  25.     /*    作⽤范围：对引入的页面的指定id名称有效有效*/
  26.     #subTitle {
  27.         /*字体为蓝色*/
  28.         color: blue;
  29.         font-size: 30px;
  30.         }
  31.     /*2.4、*通用选择器 */
  32.     /*    结构：*{ css属性名：属性值； }*/
  33.     /*    作⽤：对引入页面的所有标签有效*/
  34.     *{
  35.         /*字体为绿色*/
  36.         color: #19ff32;
  37.         font-size: 20rpx;
  38.     }
  40.     </style>
  41. </head>
  42. <body>
  43. <!--字体为天蓝色：说明类选择器的权重大于标签选择器-->
  44. <h2 class="myh2">标签选择器</h2>
  45. <!--字体为蓝色：说明id选择器的权重大于标签选择器和类选择器-->
  46. <h2 id="subTitle" class="myh2">id选择器</h2>
  47. <!--字体为红色，说明通用选择器的权重小于标签选择器，权重最低-->
  48. <h2 >通用选择器</h2>
  49. </body>
  50. </html>
复制代码
运行效果：

总结：
  1. 2.1 标签选择器（复用性）：权重第三
  2.     结构：标签名 { css属性名：属性值； }
  3.     作⽤范围：对引入页面的同类标签有效
  4. 2.2 类选择器:权重第二
  5.     结构：.类名 { css属性名：属性值； }
  6.     作⽤范围：对引入的页面的同class类名有效
  7. 2.3 id选择器（唯一性）：权重最高
  8.     结构：#id属性值 { css属性名：属性值； }
  9.     作⽤范围：对引入的页面的指定id名称有效有效
  10. 2.4、*通用选择器:权重最低
  11.     结构：*{ css属性名：属性值； }
  12.     作⽤：对引入页面的所有标签有效
  13. 2.5、优先级别：
  14. !important>id选择器>类选择器>标签选择器>通用选择器
复制代码
3. 字体与文本样式

3.1 字体样式

  1. （1）字体⼤⼩：font-size----值：数字+px
  2. （2）字体粗细：font-weight---值：normal不加粗，bold加粗
  3. （3）字体样式：font-style---值：normal不倾斜，italic倾斜
  4. （4）字体类型：font-family---谷歌浏览器默认字体为思源黑体，值："字体名称（系统已经安装的字体）"
复制代码
实例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体与文字样式</title>
  6.     <style>
  7.         h1{
  8.             font-weight: normal;
  9.             font-size: 100px;
  10.         }
  11.         p {
  12.             /*字体大小*/
  13.             font-size: 50px;
  14.             /*字体粗细：bold加粗，normal正常*/
  15.             font-weight: bold;
  16.             /*字体样式：italic倾斜，normal正常*/
  17.             font-style: italic;
  18.             /*设置字体：谷歌浏览器默认字体为思源黑体，值："字体名称（系统已经安装的字体）"*/
  19.             font-family: "方正舒体";
  20.          }
  21.         i{
  22.             /*斜体字变为正常字体*/
  23.             font-style: normal;
  24.             font-size: 50px;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <h1 align="center">春</h1>
  30. <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
  31. <p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
  32. <p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
  33.     坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
  34. <p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，
  35.     白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千
  36.     成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名
  37.     字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲
  38.     的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润
  39.     湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，
  40.     唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
  41. <p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，
  42.     人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，
  43.     一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；
  44.     还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
  45. <p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，
  46.     一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；
  47.     刚起头儿，有的是工夫，有的是希望。</p>
  48. <p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
  49. <p>春天像小姑娘，花枝招展的，笑着，走着。</p>
  50. <p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
  51. <i>我是斜体字标签！</i>
  52. </body>
  53. </html>
复制代码
运行效果：

3.2 文本样式

  1. ⽂本样式：
  2.     （1）⽂本缩进：text-indent---缩进两个字符大小2em(1em=亲父级)
  3.     （2）⽂本⽔平对⻬⽅式：text-align---值：left,right,center
  4.     （3）⽂本修饰：text-decoration---值：underline下划线,none不添加下划线
  5.     （4）line-height⾏⾼：①直接数字，表示的是倍数关系②数字+px：表示的是具体行高
复制代码
 实例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>文本样式属性</title>
  6.   <style>
  7.     p{
  8.         /*em是相对单位，相当于父元素的字体大小，默认为16px*，2em表示的是缩进两个字符*/
  9.         text-indent: 2em;
  10.         /*text-indent: 32px;*/
  11.         /*设置行高为1.5倍*/
  12.         line-height: 1.5;
  13.     }
  14.     body {
  15.         font-size:20px;
  16.     }
  17.     h1{
  18.         /*⽂本⽔平对⻬⽅式：left,right,center*/
  19.         text-align: center;
  20.         /*文本修饰：underline下划线 none正常*/
  21.         text-decoration: underline;
  22.     }
  23.     a{
  24.       text-decoration: underline;
  25.     }
  26.   </style>
  27. </head>
  28. <body>
  29. <h1>春</h1>
  30. <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
  31. <p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
  32. <p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
  33.     坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
  34. <p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，
  35.     白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千
  36.     成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名
  37.     字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲
  38.     的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润
  39.     湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，
  40.     唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
  41. <p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，
  42.     人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，
  43.     一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；
  44.     还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
  45. <p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，
  46.     一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；
  47.     刚起头儿，有的是工夫，有的是希望。</p>
  48. <p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
  49. <p>春天像小姑娘，花枝招展的，笑着，走着。</p>
  50. <p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
  51. <i>我是斜体字！</i>
  52. <a href="https://www.baidu.com/index.htm" target="_blank">百度一下</a>
  53. </body>
  54. </html>
复制代码
运行效果：

3.4 颜色表示（综合文字和文本样式）

CSS有多种颜色表示方式：
表示方式示例分析关键词red, blue预界说颜色名RGBrgb(255,0,0)红绿蓝三原色RGBArgba(255,0,0,0.5)带透明度的RGB十六进制#ff0000 或 #f00常用网页色表示
  1. 颜⾊：
  2.     （1）⽂字颜⾊：color
  3.     （2）背景颜⾊：background-color
  4.      (3)颜色表示方式：
  5.          ①关键字（颜色单词）：red black blue green white
  6.          ②rgb(三原色：红绿蓝)：rgb(255,255,255)白色 rgb(255,0,0)红色 rgb(0,0,0)黑色
  7.          ③rgba(三原色+透明度)：rgba(255,0,0,0,0.5),rgba(255,0,0,0)
  8.          ④十六进制：#6位数字或者#3位数字#ff0000红色，#00ff00绿色，#0000ff蓝色，#000000黑色，ffffff白色
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>字体与文字样式</title>
  6.     <style>
  7.         h1{
  8.             font-weight: normal;
  9.             font-size: 100px;
  10.         }
  12.         p {
  13.             font-size: 50px;
  14.             font-weight: bold;
  15.             font-style: italic;
  16.             font-family: "方正舒体";
  17.             text-indent: 100px;
  18.             text-align: left;
  19.             text-decoration: #efc3d3;
  20.             line-height: 1;
  21.          /* ine-height : 1 可以取消上下间距 */
  22.             color: #da6c9b;
  23.             background-color: beige;
  24.          }
  25.         i{
  26.             font-style: normal;
  27.             font-size: 50px;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <h1 align="center">春</h1>
  33. <p>盼望着，盼望着，东风来了，春天的脚步近了。</p>
  34. <p>一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。</p>
  35. <p>小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。
  36.     坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。</p>
  37. <p>桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，
  38.     白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿。花下成千
  39.     成百的蜜蜂嗡嗡地闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的， 没名
  40.     字的，散在花丛里，像眼睛，像星星，还眨呀眨的。 “吹面不寒杨柳风”，不错的，像母亲
  41.     的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润
  42.     湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了，呼朋引伴地卖弄清脆的喉咙，
  43.     唱出宛转的曲子，与轻风流水应和着。牛背上牧童的短笛，这时候也成天在嘹亮地响着。</p>
  44. <p>雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，
  45.     人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，
  46.     一点点黄晕的光，烘托出一片安静而和平的夜。在乡下，小路上，石桥边，有撑起伞慢慢走着的人；
  47.     还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的在雨里静默着。</p>
  48. <p>天上风筝渐渐多了，地上孩子也多了。城里乡下，家家户户，老老小小，他们也赶趟儿似的，
  49.     一个个都出来了。舒活舒活筋骨，抖擞抖擞精神，各做各的一份事去。“一年之计在于春”；
  50.     刚起头儿，有的是工夫，有的是希望。</p>
  51. <p>春天像刚落地的娃娃，从头到脚都是新的，他生长着。</p>
  52. <p>春天像小姑娘，花枝招展的，笑着，走着。</p>
  53. <p>春天像健壮的青年，有铁一般的胳膊和腰脚，他领着我们上前去。</p>
  54. <i>我是斜体字！</i>
  55. </body>
  56. </html>
复制代码
运行效果：

4.综合训练

通过css和HTML完成一下平衡车效果图：

示例代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>盒子属性</title>
  6.     <style>
  7.         div
  8.         {
  9.             width: 234px;
  10.             height: 300px;
  11.             background-color: #ffffff;
  12.             text-align: center;
  13.         }
  14.         .myimge
  15.         {
  16.             width: 160px;
  17.         }
  18.         .a
  19.         {
  20.             font-size: 14px;
  21.             line-height: 25px;
  22.         }
  23.         .b
  24.         {
  25.             font-size: 12px;
  26.             line-height: 30px;
  27.             color: #cccccc;
  28.         }
  29.         .c
  30.         {
  31.             font-size: 14px;
  32.             color: #ffa500;
  33.         }
  34.     </style>
  35. </head>
  36. <body>
  37. <div>
  38.     <img src="imges/nine.jpg" class="myimge"><br>
  39.     <p class="a">九号平衡车</p>
  40.     <p class="b">成年人的玩具</p>
  41.     <p class="c">1999元</p>
  42. </div>
  43. </body>
  44. </html>
复制代码
 运行效果:

结语

CSS的天下既广阔又风趣，今天先容的只是最基础的部分。掌握了这些基础知识后，你已经可以开始美化简单的网页了。在接下来的学习中，我们会打仗到更多高级选择器、背景控制、布局技巧等内容，让你的网页设计能力更上一层楼。
记着，CSS学习最好的方式就是多实践，打开你的编辑器，开始动手实验吧！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

守听

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表