CSS入门一、初识

已于 2023-04-21 16:38:50 修改
阅读量586 收藏 4
点赞数
分类专栏： 大前端 文章标签： css 前端 html
于 2023-01-11 15:14:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyou123456789/article/details/128645260
版权

零、文章目录

CSS入门一、初识

1、CSS是什么

（1）HTML的局限性
  • HTML，只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这是一个段落，<img> 表明这儿有一个图片，<a> 表示此处有链接。
  • 虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿和繁琐。
  • HTML相关知识请参考HTML入门
（2）CSS是网页的美容师
  • CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 也是一种标记语言。
  • CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
  • CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。

2、CSS的发展史

image-20230109132507425

  • CSS1.0 读者可以从其他地方去使用自己喜欢的设计样式去继承性地使用样式；
  • CSS2.0 融入了DIV+CSS的概念，提出了HTML结构与CSS样式表的分离。
  • CSS2.1 融入了更多高级的用法，如浮动，定位等。
  • CSS3.0 它包括了CSS2.1下的所有功能，它向着模块化的趋势发展，又加了很多新技术，如圆角、阴影、动画等，但它有一定兼容性问题，需要使用最新的浏览器才能支持。

3、CSS 基本语法

  • CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

image-20221208195243983

  • 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式。
  • 属性和值以“键值对”的形式出现，属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等，属性和属性值之间用英文“:”分开，多个“键值对”之间用英文“;”进行区分。
  • 所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS基本语法</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式 { 改什么样式} */
        p {
            color: red;
            /* 修改了文字大小为12像素 */
            font-size: 12px;  
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

4、CSS代码风格

（1）推荐展开
<!--紧凑格式-->
h3 { color: deeppink;font-size: 20px;}

<!--展开格式:推荐，更直观-->
h3 {
 color: pink;
 font-size: 20px; 
}
（2）推荐小写
<!--大写-->
H3 {
 COLOR: PINK; 
}

<!--小写：推荐-->
h3 {
 color: pink;
}
（3）空格规范
  • 属性值前面，冒号后面，保留一个空格
  • 选择器（标签）和大括号中间保留空格
h3 {
 color: pink; 
}

5、引入方式

（1）三种样式表

  • 按照 CSS 样式引入的方式，CSS 样式表可以分为三大类：

    • 行内样式表（行内式）

    • 内部样式表（嵌入式）

    • 外部样式表（链接式）

（2）行内样式表（行内式）
  • 行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。
  • 使用style属性设置CSS样式仅对当前的HTML标签起作为，这种方式不能起到内容与表现相分离，本质上没有体现出CSS的优势，因此不推荐使用。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行内样式表</title>
</head>
<body>
    <p style="color: pink; font-size: 20px;">我是行内样式</p>
</body>
</html>
（3）内部样式表（嵌入式）
  • 内部样式表（内嵌样式表）是将CSS写到html页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。
  • <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。
  • 优点：方便在同页面中修改样式。
  • 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内部样式表</title>
    <style>
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
</body>
</html>
（4）外部样式表（链接式）

  • 外部样式表，核心是：样式单独写到CSS文件中，之后把CSS文件引入到 HTML 页面中使用。样式可以被多个文件使用，做到了结构与样式完全分离。

  • HTML文件引用扩展名为.css的样式表，有两种方式。

    • 链接式：使用 <link> 标签链接外部样式表， <link> 标签必须放在<head> 标签中。

    image-20230109133657442

    • 导入式：使用@import导入外部样式表。

image-20230109133910644

  • 链接式与导入式的区别
    • <link/> 标签是属于XHTML范畴的，@import是属于CSS2.1中特有的。
    • 使用 <link/> 链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页与用户预期的效果一样，即使网速再慢也一样的效果。
    • 使用@import导入的CSS文件，客户端在浏览网页时是先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉。
    • 由于@import是属于CSS2.1中特有的，因此对于不兼容CSS2.1的浏览器来说就是无效的。

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>外部样式</div>
</body>

</html>
（5）引入方式总结

image-20221214163254418

（6）引入方式优先级
行内样式>内部样式表>外部样式表

6、基础选择器

（1）选择器的作用

  • 找到对应的标签。

  • 设置标签的样式。

image-20221209172717903

（2）选择器分类

选择器分为基础选择器和复合选择器两个大类，当前先看基础选择器。

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器
（3）标签选择器

  • 标签选择器（元素选择器）是指用 HTML标签名称作为选择器，为页面中某一类标签指定统一的 CSS 样式。

  • **优点：**能快速为页面中同类型的标签统一设置样式。

  • **缺点：**不能设计差异化样式，只能选择全部的某类标签。

image-20230110114340255

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签选择器</title>
    <style>
    /* 标签选择器 : 写上标签名 */
    p {
        color: green;
    }
    div {
        color: pink;
    }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

image-20221210085727558

（4）类选择器

  • 类选择器可以差异化选择不同的标签，单独选一个或者某几个标签。

  • 在标签上以 class 属性表示，属性值就是类名。

  • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名，用以选择类。

  • 命名：长名称或词组可以使用中横线连接；不要使用纯数字、中文等命名，尽量使用英文；命名要有意义，尽量使别人一眼就明白。

image-20230110114431186

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>类选择器</title>
    <style>
        div {
            height: 80px;
        }
        
        .red {
            background-color: red;
        }
        
        .orange {
            background-color: orange;
        }
        
        .yellow {
            background-color: yellow;
        }
        
        .green {
            background-color: green;
        }
        
        .indigo {
            background-color: rgb(21, 133, 207);
        }
        
        .blue {
            background-color: blue;
        }
        
        .purple {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="red"></div>
    <div class="orange"></div>
    <div class="yellow"></div>
    <div class="green"></div>
    <div class="indigo"></div>
    <div class="blue"></div>
    <div class="purple"></div>
</body>

</html>

image-20230109203247999

（5）类选择器-多类名

  • 我们可以给一个标签指定多个类名，从而达到更多的选择目的。

  • 在标签class 属性中写多个类名，多个类名中间必须用空格分开。

  • 使用场景：可以把一些公共样式放到一个类里面，这些标签都可以调用这个公共的类，然后再调用自己独有的类，从而节省CSS代码，统一修改也非常方便。

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多类名的使用场景</title>
    <style>
        .box {
            width: 150px;
            height: 100px;
            font-size: 30px;
        }
        
        .red {
            background-color: red;
        }
        
        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>
</body>

</html>

image-20221221092826998

（6）id 选择器

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

  • 在标签上以 id 属性表示，属性值就是id名。

  • id选择器使用“#”进行标识，后面紧跟id名。

  • id 属性在每个 HTML 文档中是唯一的，每个id在整个页面上是唯一的。

image-20230110114543800

id 选择器VS类选择器：

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

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id选择器</title>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div>
    <div>刘德华</div>
</body>
</html>

image-20221214141717644

（7）通配符选择器
  • 通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
  • 通配符选择器不需要调用， 自动就给所有的元素使用样式。
* {
 属性1: 属性值1; 
 ...
}

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通配符选择器</title>
    <style>
     * {
         color: red;
     }
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

image-20221214142722579

（8）基础选择器总结

image-20221214152752582

（9）基础选择器优先级
ID选择器>类选择器>标签选择器

7、组合器选择器

（1）CSS 组合器
  • 组合器是解释选择器之间关系的某种机制。
  • CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
  • CSS 中有四种不同的组合器。

image-20230109140527288

（2）后代选择器 (重要）
  • 后代选择器（包含选择器），可以选择父元素里面子元素。
  • 其写法就是把父元素写在前面，子元素写在后面，中间用空格分隔。
  • 子元素可以是儿子，也可以是孙子等，只要是父元素的后代即可。当标签发生嵌套时，内层标签就成为外层标签的后代。
  • 父元素和子元素可以是任意基础选择器。
父元素 子元素 { 样式声明 }

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后代选择器</title>
    <style>
        /* 我想要把ol里面的小li选出来改为pink */
        
        ol li {
            color: pink;
        }
        
        ol li a {
            color: red;
        }
    </style>
</head>

<body>
    <ol>
        变态写法
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
    </ul>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
        <li><a href="#">不会变化的</a></li>
    </ul>

</body>

</html>

image-20221221111059398

（3）子选择器 (重要）
  • 子元素选择器（子选择器），只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。其孙子、重孙之类都不归他管。
  • 父元素 和 子元素中间用 大于号 隔开。
父元素 > 子元素 { 样式声明 }

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>

image-20221221111238691

（4）相邻兄弟选择器
  • 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
  • 兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”那一个兄弟。
元素1+元素2{ 样式声明 }

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>相邻兄弟选择器</title>
    <style>
        .active+p {
            background-color: red;
        }
    </style>
</head>

<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>

</html>

image-20230109144208964

（5）通用兄弟选择器
  • 通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
  • 兄弟（同级）元素必须具有相同的父元素，“通用”的意思是其后所有兄弟。
元素1~元素2{ 样式声明 }

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通用兄弟选择器</title>
    <style>
        .active~p {
            background-color: red;
        }
    </style>
</head>

<body>
    <p>p0</p>
    <p class="active">p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
</body>

</html>

image-20230109144514077

（6）并集选择器 (重要）
  • 并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。
  • **并集选择器**是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2 { 样式声明 }

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>并集选择器</title>
    <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2: 请把熊大和熊二改为粉色 还有 小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }

        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 一定要注意,最后一个选择器 不需要加逗号 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

image-20221221111523532

8、伪类选择器

（1）伪类选择器
  • 伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
  • 伪类选择器书写最大的特点是冒号（:）表示，比如 :hover 、 :first-child 。
  • 因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
（2） 链接伪类选择器
  • a:link 没有点击过的(访问过的)链接
  • a:visited 点击过的(访问过的)链接
  • a:hover 鼠标经过的那个链接
  • a:active 鼠标正在按下还没有弹起鼠标的那个链接

链接伪类选择器注意事项

  • 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
  • 记忆法：love hate 或者 lv 包包 hao 。
  • 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接伪类选择器</title>
    <style>
        /* 1.未访问的链接 a:link  把没有点击过的(访问过的)链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*2. a:visited 选择点击过的(访问过的)链接 */
        a:visited {
            color: orange;
        }

        /*3. a:hover 选择鼠标经过的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>

链接伪类选择器实际工作开发中的写法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>链接伪类选择器实际工作开发中的写法</title>
    <style>
        body {
            color: red;

        }

        a {
            color: #333;
            text-decoration: none;
        }

        a:hover {
            color: #369;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.xxxxxxxx.com">未知的网站</a>
</body>

</html>
（3）:focus 伪类选择器
  • :focus 伪类选择器用于选取获得焦点的表单元素。
  • 一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus { 
 background-color:yellow;
}

案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>focus伪类选择器</title>
    <style>
        /* // 把获得光标的input表单元素选取出来 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

image-20221221151806102

（4） 组合+伪类选择器总结

image-20221216142014472

9、三大特性

CSS 有三个非常重要的特性：层叠性、继承性、优先级。

（1）层叠性
  • 给同一个标签设置不同的样式，此时样式会层叠叠加，会共同作用在标签上。
  • 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效，遵循的原则是就近原则。

image-20221224082856695

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS层叠性</title>
    <style>
       div {
           color: red;
           font-size: 12px;
       }
       div {
           color: pink;
       }
    </style>
</head>
<body>
    <div>长江后浪推前浪,前浪死在沙滩上</div>
</body>
</html>

image-20221224093337398

（2）继承性
  • 说明：子元素有默认继承父元素样式的特点（子承父业）。
  • 范围：
    • color
    • text-xx 开头：text-indent、text-align
    • line-xx 开头：line-height
    • font-xx 开头：font-style、font-weight、font-size、font-family
  • 好处：简化代码，节省代码。
  • 应用场景：直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小。
  • 继承失效的特殊情况：如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式。
    • a标签的color会继承失效
    • h系列标签的font-size会继承失效
    • div的高度不能继承，但是宽度有类似于继承的效果

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS继承性</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>
</html>

image-20221224093938114

行高的继承性

  • 行高可以跟单位也可以不跟单位。
  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5。此时子元素的行高是：当前子元素的文字大小 * 1.5。
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行高的继承</title>
    <style>
        body {
            color: pink;
            /* font: 12px/24px 'Microsoft YaHei'; */
            font: 12px/1.5 'Microsoft YaHei';
        }
        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个1.5 就是当前元素文字大小 font-size 的1.5倍   所以当前div 的行高就是21像素 */
            font-size: 14px; 
        }
        p {
            /* 1.5 * 16 =  24 当前的行高 */
            font-size: 16px;
        }
        /* li 么有手动指定文字大小  则会继承父亲的 文字大小  body 12px 所以 li 的文字大小为 12px 
        当前li 的行高就是  12 * 1.5  =  18
        */
    </style>
</head>
<body>
    <div>粉红色的回忆</div>
    <p>粉红色的回忆</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

image-20221224103838577

（3）优先级
  • 当同一个元素指定多个选择器，就会有优先级的产生。
  • 选择器不同，则根据选择器权重执行。

image-20221224111403408

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS优先级</title>
    <style>
       
        .test {
            color: red;
        }
        div {
            color: pink!important;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color: purple">你笑起来真好看</div>
</body>
</html>

image-20221224112659562

优先级注意点:

  1. 权重是有4组数字组成,但是不会有进位。

  2. 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推…

  3. 等级判断从左向右，如果某一位数值相同，则判断下一位数值。

  4. 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.

  5. 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>css权重注意点</title>
    <style>
        /* 父亲的权重是 100  */
        #father {
            color: red!important;
        }
        /* p继承的权重为 0 */
        /* 所以以后我们看标签到底执行那个样式,就先看这个标签有么有直接被选出来 */
        p {
            color: pink;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认制定了一个样式 蓝色的 有下划线  a {color: blue;}*/
        a {
            color: green;
        }
    </style>
</head>
<body>
    <div id="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>
</html>

image-20221224112840055

权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

  • div ul li ------> 0,0,0,3
  • .nav ul li ------> 0,0,1,2
  • a:hover -----—> 0,0,1,1
  • .nav a ------> 0,0,1,1

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>权重的叠加</title>
    <style>
       /* 复合选择器会有权重叠加的问题 */
       /* 权重虽然会叠加,但是永远不会有进位 */
       /* ul li 权重  0,0,0,1 + 0,0,0,1  =  0,0,0,2     2 */
        ul li {
            color: green;
        }
        /* li 的权重是 0,0,0,1    1 */
        li {
            color: red;
        }
        /* .nav li  权重    0,0,1,0  +  0,0,0,1  =  0,0,1,1    11 */
        .nav li {
            color: pink;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>大猪蹄子</li>
        <li>大肘子</li>
        <li>猪尾巴</li>
    </ul>
</body>
</html>

image-20221224120021916

权重练习1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS权重练习</title>
    <style>
        .nav {
            color: red;
        }
        /* 继承的权重是0 */
        li {
            color: pink;
        }
    
    </style>
</head>
<body>
    
    <ul class="nav">
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</body>
</html>

image-20221224122020238

权重练习2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS权重练习</title>
    <style>
        /* .nav li  权重是 11 */
        .nav li {
            color: red;
        }
        /* 需求把第一个小li 颜色改为 粉色加粗 ? */
        /* .pink  权重是 10    .nav .pink  20  */
       .nav .pink {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>
<body>
    
    <ul class="nav">
        <li class="pink">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没wifi</li>
    </ul>
</body>
</html>

image-20221224122129343

10、注释

  • 注释用于解释代码，它们会被浏览器忽略。
  • CSS 中的注释以“ /* ”开头，以“*/ ”结尾。
/* 需要注释的内容 */

11、Emmet语法

  • Emmet是简写HTML和CSS的一个好工具。
  • Emmet语法相关知识请参考Emmet详解。

12、Chrome调试工具

Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试我们的 HTML 结构和 CSS 样式。

（1）打开调试工具

打开 Chrome 浏览器，按下 F12 键或者右击页面空白处检查。选择Elements。

image-20221214164320010

（2）使用调试工具
  • Ctrl+滚轮 可以放大开发者工具代码大小。
  • 左边是 HTML 元素结构，右边是 CSS 样式。
  • 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。（只会调试当前页面，不会修改代码，需要把调试结果贴到代码里）
  • Ctrl + 0 复原浏览器大小。
  • 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
  • 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。
  • 可以在页面上直接修改样式查看效果，不影响源代码，你需要的样式可以手工贴回源代码。

image-20221219075410368

李宥小哥
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS入门---初识弹性布局
qq_44433209的博客
03-11 456
CSS入门—弹性布局 此节内容包括： 1. 改变弹性元素方向 2. 控制弹性元素溢出的换行处理 一、首先声明一个弹性盒模型 <!DOCTYPE html> <html lang="en"> <head>`在这里插入代码片` <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
css - 基础
weixin_43587933的博客
09-02 410
css基础
（一）HTML+CSS入门 标签初识
qq_31712145的博客
03-13 110
（一）HTML+CSS入门 ## 标签初识 1.HTML标题 h1~h6 <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5&
初识入门css
weixin_55597825的博客
02-27 560
1,什么是CSS 如何学习 1.CSS是什么 2.CSS怎么用（快速入门） 3.CSS选择器（重点+难点） 4.美化网页（文字，阴影，超链接，列表，渐变....） 5.盒子模型 6.浮动 7.定位 8.网页动画（特效） 1.1什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页浮动..... 1.2 发展史 css1.0 css2.0 DIV(块)+CSS，HTML与CSS..
CSS简介：初识CSS
2401_84098058的博客
04-19 605
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。6.2 易于使用和修改CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
初识css简单入门
Angels_Descent的博客
06-19 150
@月月鸟 一、什么是css CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 二、 css语法 // 选择器：选中要美化的元素 // 声明：就是要给选中...
CSS入门
热门推荐
wuyxinu的博客
12-17 6万+
目录 一、CSS简介 二、内容 1.css的引入方式 2.元素的id和class 3、CSS选择器 4、文本样式总结 5、文本样式总结 6、边框样式 7、 背景样式概述 8、超链接样式 9、图片样式 10、列表样式 11、表格样式 12、CSS盒子模型 13、浮动布局 14、定位布局 预备知识与后续知识及项目案例 [HTML入门与进阶以及HTML5][CSS][...
初识CSS
qq_54496810的博客
06-04 235
本文将学习CSS基础知识，如选择器类型、盒子模型、CSS定位、布局、伪类、伪元素、还有导航栏等知识点。
初识html基本入门篇+引入css
ZLQiang_csdn的博客
06-01 111
对于一个网页设计者来说，对HTML语言并不陌生，因为它是所有网页制作者的基础。如果要把网页做得美观、大方一点，这时候引入CSS就起到了很大作用。 CSS（Casscadin
Bootstrap入门教程一Hello Bootstrap初识
08-31
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap是基于 HTML5、CSS3和Javascriopt开发的。这篇文章主要介绍了基于Bootstrap3实现漂亮简洁的CSS3价格表（精美代码版）,需要的朋友可以参考下
重新整理了一遍,花了小半月终于将基础Html+css系统的学完，期间的学习笔记+中文手册都在这，分享..
01-08
html+css基础入门月总结 文章目录 一.HTML初识 二.HTML常见标签 三.CSS初识 四.基础选择器 五.后代选择器 六.display转换模式 七.CSS 背景(background) 八.选择器优先级 九.盒子边框（border） 十. 内边距（padding...
python入门到高级全栈工程师培训 第3期 附课件代码
06-07
python入门到高级全栈工程师培训视频学习资料；本资料仅用于学习，请查看后24小时之内删除。 【课程内容】 第1章 01 计算机发展史 02 计算机系统 03 小结 04 数据的概念 05 进制转换 06 原码补码反码 07 物理层和...
CSS弹窗
那片枫叶~
05-21 369
CSS 曲线弹窗和气泡弹窗小笔记，高德地图。标注气泡，背景是图片。
css都有哪些选择器怎么使用
codedadi的博客
05-19 582
实际上，CSS 还提供了许多其他选择器，如组合选择器（如逗号分隔的选择器组、后代选择器、子选择器、相邻兄弟选择器和一般兄弟选择器）等。* `:last-child`、`:nth-child()`、`:nth-last-child()` 等也是常见的伪类选择器。在 HTML 中，你可以这样使用它：<div id="myID">这是一个 ID 为 myID 的 div。CSS 选择器是用于选择你想要样式化的 HTML 元素的模式。这将选择所有的 <p> 元素，并将它们的文本颜色设置为红色。
B站pink老师CSS学习（一）
最新发布
m0_56685529的博客
05-22 396
总结 总结 总结 总结
深入了解 CSS 预处理器 Sass
_midnight的博客
05-21 508
Sass 是一种 CSS 预处理器，它为 CSS 增加了更强大的功能和灵活性。通过使用 .scss 文件扩展名编写代码，然后编译成标准 CSS，Sass 提供了变量、嵌套、Mixins、继承以及部分文件和导入等功能。这些功能使得 CSS 代码更简洁、可重用且易于维护，是前端开发中非常实用的工具。
CSS-元素堆叠顺序
Kevin7_35Durant的博客
05-18 169
元素的堆叠效果，是根据书写的顺序来的，后面的在上面绿色在最上面，随后是红色，最后是蓝色，跟书写的顺序一样我们可以改变这个顺序。
tailwindcss 入门
03-29
入门Tailwind CSS需要以下步骤： 1. 安装：使用npm或yarn安装Tailwind CSS。 2. 配置：创建一个配置文件（通常是`tailwind.config.js`），在其中定义你的自定义样式和配置选项。 3. 引入：在你的HTML或CSS文件中引入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李宥小哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值