• CSS 01

    1.定义

    （1）基本写法（内部样式表，学习使用）：CSS代码写在style标签里

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>初识CSStitle>
    7.     <style>
    8.         /* CSS代码 */
    9.         /* 选择器 { CSS属性 } */
    10.         /* 属性名和属性值成对出现，叫做键值对 */
    11.         p {
    12.             /* 调整颜色 */
    13.             color: aqua;
    14.             /* 调整字号 */
    15.             font-size: 30px;
    16.         }
    17.     style>
    18. head>
    19. <body>
    20.     <p>体验CSSp>
    21. body>
    22. html>

    效果：

    （2）外部样式表（开发使用）写法：CSS代码写在单独的CSS文件中，在HTML使用link标签引入

    CSS文件：

    1. /* 这个文件放CSS代码 */
    2. p {
    3.     color: red;
    4. }

    HTML文件： 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>CSS引入title>
    7.     
    8.     <link rel="stylesheet" href="./my.css">
    9. head>
    10. <body>
    11.     <p>这是p标签p>
    12.     
    13.     <div style="color: blue; font-size: 30px;">这是div标签div>
    14. body>
    15. html>

    行内写法一般配合JS使用

    效果：

    2.CSS选择器

    基础选择器

    （1）标签选择器

    使用标签名作为选择器，选中同名标签设置相同样式

    写法：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>标签选择器title>
    7.     <style>
    8.         /* 选中同名标签设置相同样式，无法差异化同名标签的样式 */
    9.         p {
    10.             color: red
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <p>第一个p>
    16.     <p>第二个p>
    17.     <p>123p>
    18. body>
    19. html>

    可以发现所有p标签都变红了

    （2）类选择器

    查找标签，差异化设置标签的显示效果

    写法：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>类选择器title>
    7.     <style>
    8.         .red {
    9.             color: red;
    10.         }
    11.  
    12.         .size {
    13.             font-size: 50px;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     
    19.     <p class="red">12345p>
    20.     <p>09877p>
    21.     
    22.     <div class="red size">这是divdiv>
    23. body>
    24. html>

    效果：

    （3）id选择器

    和类选择器类似

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         /* 定义 */
    9.         #red {
    10.             color: red;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     
    16.     <div id="red">这是divdiv>
    17. body>
    18. html>

    （4）通配符选择器

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         * {
    9.             color: aqua;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <p>p标签p>
    15.     <div>div标签div>
    16.     <h1>h1标签h1>
    17.     <ul>
    18.         <li>1li>
    19.         <li>2li>
    20.     ul>
    21.     <strong>这是strongstrong>
    22. body>
    23. html>

    效果：

    3.画盒子：宽度高度背景色

    通过修改这三个属性来画盒子

    代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>画盒子title>
    7.     <style>
    8.         .red {
    9.             /* 宽度 */
    10.             width: 100px;
    11.             /* 高度 */
    12.             height: 100px;
    13.             /* 背景色 */
    14.             background-color: brown;
    15.         }
    16.  
    17.         .orange {
    18.             width: 200px;
    19.             height: 200px;
    20.             background-color: orange;
    21.         }
    22.     style>
    23. head>
    24. <body>
    25.     <div class="red">div1div>
    26.     <div class="orange">div2div>
    27. body>
    28. html>

    效果：

    4.文字控制属性

    （1）文字大小

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         /* 谷歌浏览器文字默认大小16px */
    9.         p {
    10.             font-size: 30px;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <p>字体大小p>
    16.     <div>默认字体大小div>
    17. body>
    18. html>

    （2）文字粗细

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         /* 去除加粗 */
    9.         h3 {
    10.             font-weight: 400
    11.         }
    12.         /* 加粗 */
    13.         div {
    14.             font-weight: 700;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <h3>h3标题h3>
    20.     <div>div标签div>
    21. body>
    22. html>

    （3）字体倾斜

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         em {
    9.             font-style: normal;
    10.         }
    11.  
    12.         div {
    13.             font-style: italic;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <em>em标签em>
    19.     <div>div标签div>
    20. body>
    21. html>

    效果：

    （4）行高

    调节多行文本之间的行距

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         p {
    9.             font-size: 20px;
    10.             /* line-height: 30px; */
    11.             line-height: 2;
    12.         }
    13.     style>
    14. head>
    15. <body>
    16.     <p>鸟山明，这个名字对于许多人来说并不陌生。他是日本漫画界的传奇人物，创作了无数脍炙人口的作品，其中最为人津津乐道的莫过于《龙珠》系列。这部作品不仅在日本本土赢得了极高的声誉，更在全球范围内收获了无数粉丝的喜爱。鸟山明以其独特的艺术风格和深刻的思想内涵，成为了影响几代人的艺术巨匠。成龙与鸟山明虽然分属不同的艺术领域，但两人都对艺术有着深厚的热爱和追求。成龙在得知鸟山明离世的消息后，内心充满了悲痛和不舍。他在微博上写道：“听到鸟山明先生离世的消息，我感到非常震惊和难过。他是一位伟大的艺术家，他的作品影响了无数人，包括我在内。他的离世是艺术界的一大损失，我们失去了一位真正的天才。”成龙的发文不仅表达了对鸟山明的敬意和怀念，更展现了两位艺术家之间的深厚情谊。他们的离世，让我们深感痛惜，但同时也提醒我们珍惜眼前人，珍惜那些为我们带来美好回忆的作品。p>
    17. body>
    18. html>

     

    （4.1）行高实现文字垂直居中

    行高属性值等于盒子高度属性值

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         div {
    9.             height: 100px;
    10.             background-color: skyblue;
    11.  
    12.             /* 注意：只能是单行文字垂直居中 */
    13.             line-height: 100px;
    14.         }
    15.     style>
    16. head>
    17. <body>
    18.     <div>文字div>
    19. body>
    20. html>

     

    （5）字体族

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         div {
    9.             font-family: 楷体;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <div>测试文字div>
    15. body>
    16. html>

    效果：

     

    （6）字体复合属性

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         div {
    9.             font: italic 700 30px/2 楷体;
    10.         }
    11.     style>
    12. head>
    13. <body>
    14.     <div>测试文字div>
    15. body>
    16. html>

    效果：

     

    （7）文本缩进

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         p {
    9.             text-indent: 2em;
    10.             font-size: 30px;
    11.         }
    12.     style>
    13. head>
    14. <body>
    15.     <p>鸟山明，这个名字对于许多人来说并不陌生。他是日本漫画界的传奇人物，创作了无数脍炙人口的作品，其中最为人津津乐道的莫过于《龙珠》系列。这部作品不仅在日本本土赢得了极高的声誉，更在全球范围内收获了无数粉丝的喜爱。鸟山明以其独特的艺术风格和深刻的思想内涵，成为了影响几代人的艺术巨匠。成龙与鸟山明虽然分属不同的艺术领域，但两人都对艺术有着深厚的热爱和追求。成龙在得知鸟山明离世的消息后，内心充满了悲痛和不舍。
    16.         他在微博上写道：“听到鸟山明先生离世的消息，我感到非常震惊和难过。他是一位伟大的艺术家，他的作品影响了无数人，包括我在内。他的离世是艺术界的一大损失，我们失去了一位真正的天才。”成龙的发文不仅表达了对鸟山明的敬意和怀念，更展现了两位艺术家之间的深厚情谊。他们的离世，让我们深感痛惜，但同时也提醒我们珍惜眼前人，珍惜那些为我们带来美好回忆的作品。p>
    17. body>
    18. html>

    实现了首行缩进：

    （8）文本对齐

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         h1 {
    9.             /* 居中的是文字内容，不是标签 */
    10.             text-align: center; 
    11.             /* text-align: right; */
    12.         }
    13.     style>
    14. head>
    15. <body>
    16.     <h1>文字h1>
    17. body>
    18. html>

    效果：

    （8.1）图片居中

     图片居中要让图片img标签嵌套到其他标签中，然后让这个父标签实现文本居中 

    text-align: center;

    完整代码： 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         h1 {
    9.             /* 居中的是文字内容，不是标签 */
    10.             text-align: center; 
    11.             /* text-align: right; */
    12.         }
    13.  
    14.         div {
    15.             /* 图片居中须嵌套到其他标签中 */
    16.             text-align: center;
    17.         }
    18.     style>
    19. head>
    20. <body>
    21.     <h1>文字h1>
    22.     <br><br>
    23.     <div>
    24.         <img src="./day02/image/1.jpg" alt="">
    25.     div>
    26. body>
    27. html>

    效果：

     （9）修饰线

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         a {
    9.             text-decoration: none;
    10.         }
    11.  
    12.         div {
    13.             text-decoration: underline;
    14.         }
    15.  
    16.         p {
    17.             text-decoration: line-through;
    18.         }
    19.  
    20.         span {
    21.             text-decoration: overline;
    22.         }
    23.     style>
    24. head>
    25. <body>
    26.     <a href="#">a标签，去掉下划线a>
    27.     <div>div标签，添加下划线div>
    28.     <p>p标签，添加删除线p>
    29.     <span>span标签，添加顶划线span>
    30. body>
    31. html>

    效果：

    （10）文字颜色

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         h1 {
    9.             background-color: aqua;
    10.             /* color: aqua; */
    11.             /* color: rgb(0, 255, 0); */
    12.             /* color: rgba(0,0,0,0.3); */
    13.             /* color: #0000ff; */
    14.             color: #00f;
    15.         }
    16.     style>
    17. head>
    18. <body>
    19.     <h1>h1标签h1>
    20. body>
    21. html>

     

    5.一般使用谷歌浏览器调试查看效果

    案例1

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         h1 {
    9.             text-align: center;
    10.             font-weight: 400;
    11.             font-size: 30px;
    12.             color: #333;
    13.         }
    14.  
    15.         div {
    16.             font-size: 14px;
    17.             color: #999;
    18.         }
    19.  
    20.         p {
    21.             text-indent: 2em;
    22.             font-size: 18px;
    23.             color: #333;
    24.         }
    25.  
    26.         .pic {
    27.             text-align: center;
    28.         }
    29.     style>
    30. head>
    31. <body>
    32.     <h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收h1>
    33.     <div>央视网 | 2022年09月20日 14:18:56div>
    34.     <p><strong>央视网消息：strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。p>
    35.     <p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。p>
    36.     <div class="pic">
    37.         <img src="./day03/1.jpg" alt="">
    38.     div>
    39.     <p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。p>
    40.     <p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。p>
    41.  
    42. body>
    43. html>

    效果： 

    案例2

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         h1 {
    9.             color: #333;
    10.         }
    11.  
    12.         p {
    13.             text-indent: 2em;
    14.             font-size: 14px;
    15.             color: #444;
    16.             line-height: 30px;
    17.         }
    18.  
    19.         a {
    20.             color: #0069c2;
    21.         }
    22.  
    23.         li {
    24.             font-size: 14px;
    25.             color: #444;
    26.             line-height: 30px;
    27.         }
    28.     style>
    29. head>
    30. <body>
    31.     <h1>CSS（层叠样式表）h1>
    32.     <p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现<a href="#">HTMLa>（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
    33.         CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
    34.         CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。p>
    35.     <p><strong>CSS是一种定义样式结构如字体、颜色、位置等的语言strong>，被用于描述网页上的信息格式化和显示的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。p>
    36.     <ul>
    37.         <li>CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。li>
    38.         <li>ID属性的操作类似于CLASS属性li>
    39.         <li>STYLE属性实际上可以替代整个<a href="#">选择器a>机制li>
    40.     ul>    
    41. body>
    42. html>

    效果： 

  • 相关阅读:
    Yocto系列讲解[实战篇]85 - 制作ubi镜像和自动挂载ubifs文件系统
    一分钟学会使用js读取上传图片文件
    寒假12 图论
    Java程序（jar包）注册为Windows系统服务
    怎么防止360安全卫士修改默认浏览器？
    前端性能优化：如何根据chrome的timing优化
    国内IB教育发展形式如何？
    三年测试经验, 字节跳动离职后, 一口气拿到 15 家公司 Offer
    java毕业设计医院管理系统Mybatis+系统+数据库+调试部署
    R语言使用jpeg函数将可视化图像结果保存为jpeg格式、使用jpeg函数打开图像设备、使用dev.off函数关闭图像设备
  • 原文地址：https://blog.csdn.net/weixin_63504072/article/details/136590193