第1章 CSS简介

1.1 HTML的局限性

  1. HTML是一个非常单纯的东西,只关注内容的语义

1.2 CSS—网页的美容师

  1. CSS是层叠样式表的简称。
  2. 有时我们也会称为CSS样式表和级联样式表。
  3. CSS也是一种标记语言。
  4. CSS主要用于设置HTML页面中的文本内容(大小、字体、对齐方式等)、图片的外形(宽度、边框样式等)以及版面的布局和外观的显示样式。
  5. CSS让我们网页更加丰富,布局更加灵活,简单理解:CSS可以美化HTML,让HTML更加漂亮,让布局更加简单。
  6. 注:
    • HTML主要做结构,显示元素内容
    • CSS美化HTML,布局网页。

1.3 CSS的语法规范

  1. CSS规则由两个主要的部分构成:选择器和一条或者多条声明。

    image-20230513151635430

  2. 实例

    <html> 
        <head>    
            <title>这是第一个网页</title>
            <style>
                p{
                    color: rebeccapurple;
                    font-size:12px;
                }
            </style>
        </head> 
        <body> 
            <p>标题标签 </p>        
        </body>
    </html>
    
  3. 注意:

    • 选择器适用于指定CSS样式的HTML标签,花括号内是对该对象的具体样式
    • 属性和属性值以“键值对”形式出现。
    • 属性是对指定的对象设置样式属性,例如:大小、文本颜色等。
    • 属性和属性值之间用“:”分开。

1.4 CSS代码风格

  1. 样式格式的书写

    • 紧凑格式

      h3{color:deepink;font-size:20px;}
      
    • 展开性格式:更加直观

      h3{
      	color:deepink;
      	font-size:20px;
      }
      
  2. 样式大小写:一般采用小写。

  3. 空格规范

    h3 {
    	color: deepink;
    	font-size: 20px;
    }
    
    • 属性前面,冒号后面,保留一个空格。
    • 选择器和大括号中保留空格。

第2章 CSS选择器

2.1 CSS基础选择器

2.1.1 CSS选择器的作用

  1. 选择器(选择符)就是根据不同的需求把不同的标签选出来。简单说,就是选择标签用的。

  2. 以上CSS只做两件事:

    1、找到所有的h1标签。选择器(选对人)

    2、设置这些标签的样式,比如颜色为红色(做对事)

2.1.2 CSS选择器的分类

选择器分为基础选择器复合选择器两大类。

  • 基础选择器:由单个选择器组成的。
  • 基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器

2.1.3 标签选择器

  1. 标签选择器(元素选择器)是指用HTML标签名称作为选择器,按照标签名称分类,为页面中的某一类表前指定同一的CSS样式。

  2. 语法:

    标签名{

    ​ 属性1: 属性值1;

    ​ 属性2: 属性值2;

    ​ 属性3: 属性值3;

    }

  3. 作用

    • 标签选择器可以把某一类的标签全部选择出来。
  4. 优点

    • 能快速为页面中的同类型的标签统一设置样式。
  5. 缺点:

    • 不能差异化设计。
  6. <html> 
        <head>    
            <title>标签选择器</title>
            <style>
                p{
                    color: rebeccapurple;
                    font-size:12px;
                }
                p1{
                    color: blue;
                    font-size:12px;
                }
            </style>
        </head> 
        <body> 
            <p>男 </p>  
            <p>男 </p>  
            <p>男 </p>
            <p1>女 </p1> 
            <p1>女 </p1> 
            <p1>女 </p1> 
        </body>
    </html>
    

2.1.4 类选择器

  1. 如果想要差异化选择不同的标签,单独选择一个或者多个标签,可以使用类选择器。

  2. 类选择器在HTML中以CSS属性表示,在CSS中,类选择器以一个点“.”表示。

  3. 语法:

    结构需要用class属性来调用class类的意思

    . 类名{

    ​ 属性1: 属性值1;

    ​ 属性2: 属性值2;

    ​ 属性3: 属性值3;

    }

  4. 实例

    <html> 
        <head>    
            <title>类选择器</title>
            <style>
                /*类选择口诀:样式点定义  结构类(class)调用
                            
                */
                .red{
                    color: rebeccapurple;
                }
                .blue{
                    color: blue;
                }
                .green{
                    color: green;
                }
                
            </style>
        </head> 
        <body> 
            <u>
                <li class="red">冰雨</li>
                <li class="red">上海</li>
                <li class="blue">白金</li>
                <li class="green">兰州</li>
            </u>
            <div class="red"> rebeccapurple</div>
            <div class="blue"> blue</div>
            <div class="green"> green</div>
        </body>
    </html>
    
    
  5. 注意

    • 类选择器使用“.”进行标识,后面紧跟类名(自定义)。
    • 可以理解为给这个标签给名字。
    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要使用纯数字、中文等命名。
    • 类名要见名思意。
  6. 多类名

    • 可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签。简单来说,就是一个标签有多个名字。

    • 多类名的使用方式

      < div class="green font21"> green

    • 多类名的使用场景

      1、可以把一些标签元素相同的样式(公共部分)放到一个类中

      2、这些标签都可以调用这个公共的类,然后再调用自己都有的类。

    • 注意:

      各个类名之间要用空格隔开。

    • 实例:

      <html> 
          <head>    
              <title>多类名选择器</title>
              <style>
                  .box{
                      width: 100px;
                      height: 100px;
                      font-size: 30px;
                  }
                  .red{
                      background-color: rebeccapurple;
                  }
                  .blue{
                      background-color: blue;
                  }
                  .green{
                      background-color: green;
                  }
          
                  
              </style>
          </head> 
          <body> 
              <div class="box red"> rebeccapurple</div>
              <div class="box blue"> blue</div>
              <div class="box green"> green</div>
          </body>
      </html>
      

2.1.5 id选择器

  1. id选择器可以为标有特定id的HTML元素指定特定的样式。

  2. HTML中元素以id属性来设置id选择器,CSS中id选择器以“#”来表示。

  3. 语法

    #id名{

    属性1: 属性值1;

    属性2: 属性值2;

    属性3: 属性值3;

    }

  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>id选择器</title>
        <!--id选择器的口诀
                样式#定义,结构id调用,只能调用一次,别人切勿使用 -->
        <style>
            #pink{
                color: #e91fdf;
            }
        </style>
    </head>
    <body>
        <div id="pink">与v与</div>
    </body>
    </html>
    
  5. 注意:

    • 样式#定义,结构id调用,只能调用一次,别人切勿使用。
  6. id选择器和类选择器的区别

    • 类选择器(class)好比别人的名字,一个人可以有多个名字,同时一个名字可以被多个人使用。
    • id选择器好比人的身份证号码,不能重复
    • id选择器和类选择器最大的不同在于使用次数。
    • 类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用。

2.1.6 通配符选择器

  1. 在CSS中,通配符选择器使用“*”定义,它表示选取页面中所有的元素(标签)。

  2. 语法

    *{

    属性1: 属性值1;

    属性2: 属性值2;

    }

  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>
            *{
                color: #e91fdf;
            }
        </style>
    </head>
    <body>
        <div >与v与</div>
        <span>我的</span>
        <ur>
            <li>wode</li>
        </ur>
    </body>
    </html>
    
  4. 注意:

    • 通配符选择器不需要调用,自动就给所有的元素使用样式。
    • 特殊情况才会使用。

2.1.7 基础选择器总结

基础选择器 作用 特点 使用情况 用法
标签选择器 可以选取所有相同的标签,比如p 不能差异化选择 较多 p{color:red;}
类选择器 可以选择出一个或者多个标签 可以根据需求选择 非常多 .nav{color:red;}
id选择器 一次只能选择一个标签 id属性只能在每个html文档中出现一次 一般和js搭配 #nav{color:red;}
通配符选择器 选择所有的标签 选择的太多,部分需要 特殊情况使用 *{color:red;}

2.2 CSS的复合选择器

2.2.1 什么是复合选择器

  • 在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上的,对基本选择器进行组合而形成的。
  • 复合选择器可以更加准确、更高效的选择目标元素(标签)。
  • 复合选择器是由两个或者多个基础选择器,通过不同的方式组合而成的。
  • 常用的复合选择器包括:后代选择器,子选择器,并集选择器。伪类选择器等等。

2.2.2 后代选择器

  1. 后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格隔开。当标签发生嵌套时,内层标签就成了外层标签的后代。

  2. 语法

    元素1 元素2 {样式声明}

    上述语法表示选择元素1里面的所有的元素2(后代元素)。例如

    ul li { 样式声明 } /* 选择 ul 里面的 li 标签元素*/

    注意:

    • 元素1和元素2之间必须用空格隔开
    • 元素1是父级,元素2是子级,最终选择的是元素2
    • 一级一级的改变,查找。
    • 元素1和元素2可以是任意的基础选择器。
  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>
            ol li {
                color: rosybrown;
                font-size: 20px;
            }
    
            ol li a {
                color: blanchedalmond;
            }
        </style>
    </head>
    
    <body>
        <ol>
            <li> 我爱学习——C</li>
            <li>我爱学习——java</li>
            <li>我爱学习——spring</li>
            <li>我爱学习——python</li>
            <li>我爱学习——C++</li>
            <li><a href="#">我是ol的孩子</a></li>
        </ol>
        <ur>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
        </ur>
    </body>
    
    </html>
    

    运行结果

    image-20230517210721847

2.2.3 子选择器

  1. 子元素选择器(子选择器)只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

  2. 语法

    元素1>元素2(样式声明)

    上述语法表示选择元素1里面的所有直接后代(子元素)元素2。例如

    div > p {样式声明} /* 选择 div里面的所有最近以及p标签元素*/

  3. 注意

    • 元素1和元素2之间用大于号隔开
    • 元素1是父级,元素2是子级。最终选择的是元素2。
    • 元素2必须是亲儿子选择器。
  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>
            div>a {
                color: rosybrown;
            }
        </style>
    </head>
    
    <body>
        <div>
            <a href="#">我是儿子</a>
            <p>
                <a href="#"> 我是孙子</a>
            </p>
        </div>
    
    </body>
    
    </html>
    

    运行结果

    image-20230517212233406

2.2.4 并集选择器

  1. 并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明。

  2. 并集选择器是各选择器通过英文逗号(,)连接而成的,任何形式的选择器都可以作为并集选择器的一部分。

  3. 语法

    元素1,元素2{ 样式声明 }

    上述语法表示选择元素1和元素2。例如:

    ul,div {样式声明} /* 选择 ul 和div标签元素*/

  4. 注意:

    • 元素1 和 元素2 中间用逗号隔开
    • 逗号可以理解为和的意思。
    • 并集选择器通常用于集体声明。
  5. 约定的语法规范,并集选择器喜欢竖着写

  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>复合选择器——并集选择器</title>
        <style>
            div,
            p {
                color: royalblue;
            }
    
            span,
            .pig li {
                color: brown;
            }
        </style>
    </head>
    
    <body>
        <div>熊大</div>
        <p>熊二</p>
        <span>光头强</span>
        <ul class="pig">
            <li>小猪佩奇</li>
            <li>猪妈妈</li>
        </ul>
    </body>
    
    </html>
    

    运行结果

    image-20230517215515207

2.2.5 伪类选择器

  • 定义

    伪类选择器用于向某选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第二个元素。

  • 语法

    伪类选择器书写最大的特点是用冒号(:)表示,比如::hover 、 :first-child 。

1、链接伪类选择器

  1. 语法

    a:link 没有点击过的(访问过的)链接
    a:visited 点击过的(访问过的)链接
    a:hover 鼠标经过的那个链接
    a:active 鼠标正在按下还没有弹起鼠标的那个链接

  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>复合选择器——链接伪选择器</title>
        <style>
            /* 未访问过的链接 */
            a:link {
                color: #333;
                /* 不要下划线 */
                text-decoration: none;
            }
    
            /* 选择点击过的链接 */
            a:visited {
                color: rgb(76, 6, 240);
            }
    
            /* 鼠标经过变色 */
            a:hover {
                color: #fa0101;
            }
    
            /* 点击时变色 */
            a:active {
                color: #07f442;
            }
        </style>
    </head>
    
    <body>
        <p><a href="http://www.baidu.com">NBA</a></p>
    
    </body>
    
    </html>
    
  3. 注意事项:

    • 为了确保生效,按照LVHA的顺序书写
    • 链接在浏览器有默认的样式,在使用时需要给链接单独的指定样式。
  4. 实际开发中的语法

    a{

    color:gray;

    }

    a:hover{

    ​ color: red;

    }

2、:focus 伪类选择器

  1. :focus 伪类选择器用于选取获取焦点的表单元素

  2. 焦点就是光标,一般情况类表单元素才能获取,因此这个选择器主要针对表单元素。

  3. 语法

    input : foucus{

    ​ background-color: yellow;

    }

  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>伪类选择器——:focus伪类选择器</title>
        <style>
            input:focus {
                background-color: blanchedalmond;
                color: red;
            }
        </style>
    </head>
    
    <body>
        <input type="text">
        <input type="text">
        <input type="text">
    
    </body>
    
    </html>
    

2.2.6 复合选择器总结

3355d0e2bcfd03e90364dbfb8fccb4d9.png (667×302)

第3章 CSS属性

3.1 CSS字体属性

1、字体系列

  1. CSS使用font-family属性定义文本的字体系列。

  2. 语法:

    p{ font-family:“微软雅黑”;}

    div{font-family:Arial,“微软雅黑”;}

  3. 注意

    • 字体间用逗号分割。
    • 一般情况下,如果空格隔开的多个单词组成的字体,加引号。
    • 尽量使用默认字体。
    • 开发中经常放在bady标签中

2、字号大小

  1. CSS使用font-size属性定义字体大小。、

  2. 语法

    p{

    ​ font-size:20px;

    }

  3. 注意:

    • px(像素)大小是网页中常用的单位。
    • 谷歌浏览器默认大小为16px。
    • 不同浏览器的,默认大小不同。
    • 可以为bady指定整个页面字体的大小。
    • 标题标签特殊需要特殊的方法,单独指定。

3、字体粗细

  1. CSS使用font-weight属性设置字体的粗细。

  2. 属性

    • normal:正常
    • bold:粗体
    • bolder:特粗体
    • lighter:细体
  3. 语法

    p{

    ​ font-weight:bold;

    }

  4. 注意

    • 后面的数字和bold效果一样,实际开发使用数字。
    • 加粗700,正常400。

4、字体样式

  1. CSS使用font-style属性设置字体的粗细。

  2. 属性

    • normal:正常
    • italic:斜体
  3. 语法

    p{

    ​ font-weight:italic;

    }

  4. 注意:

    • 很少使用斜体,给斜体标签(em,i)改变字体

5、复合类型

  1. 书写顺序:

    font-style font-weight font-size/line-height(行高) font-family

  2. 语法

    font:italic 700 16px “宋体”

  3. 注意:

    • 不能颠倒顺序。
    • 必须保留font-size和font-family属性。

6、实例

  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>字体属性之字体系列</title>
        <style>
            h2{
                font-family: "微软雅黑";
                font-size: 50px;
                font-weight: 100;
                font-style: oblique;
            }
            p{
                font-family: "宋体";
            }
            body{
                font-size: 20px;
                font-weight: 900;
            }
            .bold{
                font-weight: 500;
            }
            .a{
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>CSS</h2>
        <p>我爱学习</p>
        <p>我爱学习——java</p>
        <p class="a">我爱学习——C++</p>
        <p class="bold">我爱学习——Python</p>
        <p>我爱学习——大数据</p>
        <em>我爱学习——linux</em>
    </body>
    </html>
    

    运行结果:

    image-20230517104153614

  2. 实例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>字体属性——font</title>
        <style>
            .a{
                font: italic 800 20px "宋体" ;
            }
            .b{
                font: normal 200 60px "微软雅黑";
            }
        </style>
    </head>
    <body>
        <h3>学习</h3>
        <p class="a">学习Spring</p>
        <p class="b">学习HTML</p>
        
    </body>
    </html>
    

    运行结果

    image-20230517105711143

3.2 CSS文本属性

1、文本颜色

  1. color属性定义文本的颜色

  2. 语法

    div{

    color:red;

    }

2、文本对齐

  1. text-align属性用于设置元素文本内容的水平对齐方式。

  2. 语法

    div{

    text-align:center;

    }

  3. 属性

    • left:左对齐
    • reght:右对齐
    • center:居中对齐

3、文本装饰

  1. text-decoration属性用于设置元素文本内容的装饰。

  2. 语法

    div{

    text-decoration:underline;

    }

  3. 属性

    • none:默认
    • underline:下划线
    • overline:上划线
    • line-throuht:删除线

4、文本缩进

  1. text-indent属性用于设置元素文本内容第一行的缩进,通常为段落的首行缩进。

  2. 语法

    div{

    text-indent:20px;

    }

  3. 注意:

    • 首行的缩进。
    • em是一个相对单位,就是当前元素1个文字的大小,表示缩进一个字的大小。

5、行间距

  1. line-height属性用于设置行间的距离(行高)。可以控制文字行和行之间的距离。

  2. 语法

    div{

    line-height:20px;

    }

  3. 行间距包括:上间距、文本高度、小间距

  4. 注意:

    • 改变的是上下间距的距离

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>文本外观</title>
    <style>
        .a{
            color: #ea0c0c;
            text-decoration: underline;
            text-indent: 20px;
            line-height: 60px;
        }
        h1{
            text-align: center;
        }
        .b{
            font-size: 30px;
            text-indent: 2em;
            line-height: 26px;
        }
    </style>
</head>
<body>
    <h1>新闻</h1>
    <div class="a">
        美元霸权是二战后世界体系中的一个重要特征。
        依托美元霸权,美国在自身通胀高企的情况下,通过财政和货币政策向全球输出通胀,将其国内问题通过货币这个载体向全世界“摊派”。
        美联储激进加息的背后,包藏着美国利用美元霸权等“排毒工具”加速对外转嫁危机的算计。这样的事情频繁发生。
    </div>
    <div class="b">北京时间5月17日,NBA选秀抽签大会,本届选秀抽签因为准状元维克多-文班亚马的存在而备受关注,经过紧张刺激的抽签,马刺最终抽中状元签。</div>
</body>
</html>

运行结果

image-20230517113208893

第4章 CSS的引入方式

4.1 CSS的三种样式表

  1. 按照CSS的样式书写的位置(或者是引入的方式),CSS样式表可以分为三大类:
    • 行内样式表(行内式)——控制一个标签
    • 内部样式表(嵌入式)——控制一个页面
    • 外部样式表(链接式)——控制多个页面

4.2 内部样式表

  1. 内部样式表(内嵌样式表)是写到HTML页面内部,是将所有的CSS代码抽取出来,单独放到一个

  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>内部样式表</title>
        <style>
            div{
                color: rebeccapurple;
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <div class="b">北京时间5月17日,NBA选秀抽签大会,
            本届选秀抽签因为准状元维克多-文班亚马的存在而备受关注,经过紧张刺激的抽签,马刺最终抽中状元签。</div>
        
    </body>
    </html>
    

    运行结果

    、

  3. 注意:

    • < style>标签理论上可以放在HTML的任何地方,但一般放在文档的标签中
    • 此方法,可以方便的控制当前整个页面中的元素样式设置。
    • 称为嵌入式的样式表

4.3 行内样式表

  1. 行内样式表是在元素标签内部的style属性中设定CSS样式。适合修改简单样式。

  2. 语法

    < div style="color:red;font-size:13px;">xxxxxx

  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>
        
    </head>
    <body>
        <h2>CSS</h2>
        <p>我爱学习</p>
        <p>我爱学习——java</p>
        <p style="color: brown;font-size: 30px;">我爱学习——C++</p>
        <p >我爱学习——Python</p>
        <p>我爱学习——大数据</p>
        <em>我爱学习——linux</em>
    </body>
    </html>
    

    运行结果

    image-20230517193719774

  4. 注意:

    • style其实是标签的属性。
    • 在双引号中,写法要符合CSS规范。
    • 可以控制当前的标签设置样式。

4.4 外部样式表

  1. 实际开发中应用,适合样式较多的情况,核心是样式单独写在CSS文件中,之后把CSS文件引入到HTML页面中。

  2. 引入外部样式表分为两步

    • 新建CSS文件

    • 利用标签引入这个文件

  3. 属性

    • rel:定义当前文档和链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
    • href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径
  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>
        <link rel="stylesheet" href="style.css">
        
    </head>
    <body>
        <div >
            美元霸权是二战后世界体系中的一个重要特征。
            依托美元霸权,美国在自身通胀高企的情况下,通过财政和货币政策向全球输出通胀,将其国内问题通过货币这个载体向全世界“摊派”。
            美联储激进加息的背后,包藏着美国利用美元霸权等“排毒工具”加速对外转嫁危机的算计。这样的事情频繁发生。
        </div>
    </body>
    </html>
    
    
    /* 这个CSS中只有样式 */
    div{
        color: rosybrown;
        font-size: 60px;
    }
    

    运行结果

    image-20230517194921661

第6章 CSS的元素显示模式

6.1 元素的显示模式

  1. 定义
    • 元素显示模式就是元素(标签)以什么方式进行显示,比如自己占一行,比如一行可以放多个 。
  2. 作用
    • 网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好地布局网页
  3. HTML元素的分类:
    • 块元素
    • 行内元素

6.1.1 块元素

  1. 常见的块元素

    <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
    
  2. 块元素的特点:

    • 比较霸道,自己独占一行。
    • 高度、宽度、外边距以及内边距都可以控制。
    • 宽度默认是容器(父级宽度)的100%。
    • 是一个容器及盒子,里面可以放行内或块级元素。
  3. 注意:

    • 文字类的元素内不能使用块级元素。
    • < p>标签主要用于存放文字,因此

      里面不能放块级元素,特别是

    • 同理,

      ~

      等都是文字类块级标签,里面也不能放其他块级元素

6.1.2 行内元素

  1. 常见的元素

    <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
    

    标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

  2. 特点:

    • 相邻行内元素在一行上,一行可以显示多个。
    • 高、宽直接设置是无效的。
    • 默认宽度就是它本身内容的宽度。
    • 行内元素只能容纳文本或其他行内元素。
  3. 注意:

6.1.3 行内元素

  1. 常见元素

    <img />、<input />、<td>同时具有行内元素和块元素的特点
    
  2. 特点:

    • 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
    • 默认宽度就是它本身内容的宽度(行内元素特点)。
    • 高度,行高、外边距以及内边距都可以控制(块级元素特点)。

6.1.4 元素显示模式的总结

学习元素显示模式的主要目的就是分清它们各自的特点,当我们网页布局的时候,在合适的地方用合适的标签元素。

6.1.5 元素显示模式的转换

  1. 简单理解:

  2. 转换方式

    • 转换为块元素:display:block;
    • 转换为行内元素:display:inline;
    • 转换为行内块:display: inline-block;
  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>
            a {
                width: 220px;
                height: 330px;
                color: #e50f0f;
                background-color: aquamarine;
                /* 把行内元素转化为块级元素 */
                display: block;
            }
    
            div {
                width: 200px;
                height: 300px;
                background-color: chartreuse;
                /* 把快元素转化为行内元素 */
                display: inline;
            }
    
            span {
                width: 200px;
                height: 600px;
                background-color: blueviolet;
    
    
                display: inline-block;
            }
        </style>
    </head>
    
    <body>
        <a href="#">CBA</a>
        <div>NBA</div>
        <span>欧文</span>
    
    </body>
    
    </html>
    

    运行结果:

    image-20230518203131222

6.2 单行文字垂直居中的代码

  • CSS没有提供文字垂直居中的代码,

  • 解决方法:让文字的行高等于盒子的高度,就可以让文字在当前盒子内垂直居中

  • 实现原理

    行高2

img

  • 简单理解
    • 行高的上空隙和下空隙把文字挤到中间了,
    • 如果行高小于盒子高度,文字会偏上,
    • 如果行高大于盒子高度,则文字偏下。

第7章 CSS的背景

7.1 CSS背景颜色

  1. 样式名称:

    background-color