HTML+CSS 基础第三季课堂笔记

忆南呦

已于 2024-10-01 19:25:18 修改

阅读量582

点赞数 8

分类专栏： HTML&CSS零基础入门到网页设计文章标签： html css 笔记

于 2024-10-01 18:23:00 首次发布

本文链接：https://blog.csdn.net/qq_64177395/article/details/142673093

版权

HTML&CSS零基础入门到网页设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、CSS基础概念

CSS有两个重要的概念，分别是样式和布局

CSS的样式分为两种，一种是文字的样式，一种是盒模型的样式

CSS的另一个重要的特性就是辅助页面布局，完成HTML不能完成的功能，比如并排显示，比如精确定位显示

从HTML4.0开始，结构层和样式层进行了分离

前端三层：

结构层：HTML作用是从语义的角度讲进行网页结构的搭建
样式层：CSS作用从美观的角度讲修饰页面样式
交互层：JavaScript作用从交互的角度讲描述页面的行为

二、CSS常用属性的学习

CSS常用的文字属性有三个，color，font-size，font-family

CSS的属性样式发生了改变由HTML的k=’v’变为了k:v;

2.1文字颜色

属性名：color

基本使用

<p style="color:blue;">看我是什么颜色</p>

属性值：主要分为两种，单词表示法，一种是颜色值（十六进制，rgba）

以蓝色为准

rgb颜色表示法

<p style="color:rgb(0,0,225);">看我是什么颜色</p>

十六进制颜色表示法

<p style="color:#0000FF;">看我是什么颜色</p>

需要记忆一些常用颜色的单词表示法的单词，比如red、blue、orange、pink...

2.2字号

属性：font-size

属性值：常用的是以px为单位的数字值

根据浏览器的不同，有默认不同的字号大小，比如Chrome和ie默认就是16px的文字

每个浏览器都有自己最小的显示像素，比如Chrome最小字号为8px

ie浏览器最小字号是1px

基本使用：

  <p style="font-size:10px;">看我的文字大小</p>

2.3字体

属性：font-family

属性值：必须以双引号包裹，属性值可以有多个，使用逗号分隔开

中文字体的常用字体属性值：

微软雅黑，宋体

英文常用字体属性值：

Arial

consolas

事迹的字体属性是根据设计图获取

大多数浏览器默认显示字体是微软雅黑

如果页面中有中英文混合的，需要同时设置对应的字体

如果设置多个字体，使用逗号隔开，如果浏览器不识别前面的字体，会自动向后识别，中英文会分别进行加载

<p style="font-family: 'Arial','consolas','黑体','宋体'">看我的字体是什么blue,yellow</p>

三、盒子的三属性

盒子的三属性width、height、background-color

width：是宽度的意思

height：是高度意思

常用的属性值都是以px为单位的数值

background-color：属于background系列属性的一种

属性值和color一样分为单词和颜色值表示法

基本使用

<div style="width:100px;height:100px;background-color:red;"></div>

四、CSS样式表

到现在为止，我们学习行内式样式表的使用

4.1 行内式样式表

基本语法：

<div style="width:100px;height:100px;background-color:red;"></div>

引入位置：在标签的style属性中，等号后面的引号内属性CSS样式，多个属性使用分号分隔

4.2 内嵌式样式表

基本语法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div {

            color: red;

            font-size: 18px

        }

    </style>

</head>

<body>

    <div>文字</div>

</body>

</html>

书写位置：head标签的内部，title标签的下面，一对style标签中

4.3 外链式样式表

基本语法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="css/1.css">

</head>

<body>

    <div>文字</div>

</body>

</html>

书写位置：head标签的内部，title标签的下面，一个link内部去进行css文件引入

<link rel="stylesheet" href="css/1.css">

link标签的作用就是引入外部文件，通过href属性，属性值是文件地址

rel属性值如果是stylesheet，代表的就是引入样式表

通过引入css文件到html文件中，从而实现样式的加载

css文件的内部不需要写任何的标签，直接属性css选择器和代码，因为css文件内部是不允许属性HTML骨架的

4.4 导入式样式表（只需要了解）

基本语法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        @import url(css/1.css);

    </style>

</head>

<body>

    <div>文字</div>

</body>

</html>

书写位置：head标签的内部title标签下面style标签内，通过@import进行导入

注意：导入式必须写在style标签的最顶部

url内部是css文件的引入地址

4.5 四种样式表的区别和优缺点

样式表的名称	权重	优点	缺点
行内式样式表	最高	权重高，样式设置更精确	结构和样式没有进行分离。不能批量修改样式
内嵌式样式表	大于导入式，等于外链式	能够将CSS样式和估计进行分离，可以进行批量属性的修改	样式和骨架没有进行完全分离，多个html文件不能使用同一套css代码。
外链式样式表	大于导入式，等于内嵌式	样式和骨架进行完全分离，一份css代码可以重复使用	如果我们写小的demo的时候，每次写外链式比较麻烦，并且看起来不直观
导入式样式表	最低	样式和骨架进行完全分离，一份css代码可以重复使用	导入式有样式问题，引入导入式涉及到加载顺序，说白了，页面会白一下，体验不好

五、选择器

选择器分为两种，一种是基础选择器，一种高级选择器

基础选择器：标签选择器、id选择器、类名选择器

高级选择器；后代选择器、交集选择器、并集选择器

5.1 标签选择器

选择方法：通过标签名称去选择

书写方法：标签名

选择范围：HTML文档中所有的同名标签

基本使用

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        p{

            color: red;

        }

        h3{

            color: blue;

        }

    </style>

</head>

<body>

    <p>

        段落标签

    </p>

    <h3>

        三级标题

    </h3>

</body>

需要注意的是标签选择器无视嵌套规则，都能进行识别加载

<p>

    段落标签

</p>

<div>

    <div>

        <div>

            <div>

                <p>我是段落标签</p>

            </div>

        </div>

    </div>

</div>

用途：实现全选同名标签，可以设置公共样式

缺点：只能进行全选，不能进行单独的布局样式

5.2 id选择器

通过标签上id属性进行选择

书写方法：#id属性值（自定义）

选择范围:只能选中一个标签

基本使用：

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #p1{

            color: blue;

        }

    </style>

</head>

<body>

    <p id="p1">第1段文字</p>

    <p>第2段文字</p>

    <p>第3段文字</p>

</body>

id其实就是标签的身份证号，具有唯一性。规定一个页面中不允许有同名id属性

优点：id属性的权重高

缺点：只能实现单选

5.3 类名属性

通过标签上的clas属性进行选择

书写方法：.匹配对应的class属性值

选择范围：选择所有同名clss属性标签

基本使用

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .par{

            color: blue

        }

    </style>

</head>

<body>

    <p class="par">第1段文字</p>

    <p class="par">第2段文字</p>

    <p class="par">第3段文字</p>

</body>

一个标签的class属性值可以有一个或者多个

多个class属性之间使用空格隔开

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .par{

            color: blue

        }

        .cur{

            color: yellow;

        }

    </style>

</head>

<body>

    <p class="par">第1段文字</p>

    <p class="par cur">第2段文字</p>

    <p class="par">第3段文字</p>

</body>

id和class属性的命名规范：第一个字符必须是字母，后面的字符可以是字母、数字、下划线

5.4 通配符选择器

书写方法：

选择范围：选择包含html标签在内的所有标签

通配符*后面添加的样式，每一个标签都会加载一次

我们通常使用清除页面的默认样式

基本使用

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            color: yellow

        }

    </style>

</head>

<body>

    <span>span</span>

    <p>p标签</p>

    <div>div</div>

    <h3>h3</h3>

</body>

清除页面的默认内外边距


*{

      margin: 0;

      padding: 0;

  }

5.5 后代选择器

书写方法：使用空格连续链接多级选择器

作用：通过标签之间的后代关系去决定选择某个范围内的元素，具有精确匹配性

基本使用

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box ul li{

            color: red;

        }

        .box2 ul li{

            color: green;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>box里面的li</li>

            <li>box里面的li</li>

            <li>box里面的li</li>

            <li>box里面的li</li>

        </ul>

    </div>

    <div class="box2">

        <ul>

            <li>box2里面的li</li>

            <li>box2里面的li</li>

            <li>box2里面的li</li>

            <li>box2里面的li</li>

        </ul>

    </div>

</body>

需要注意的是，后代关系不一定是父子关系

.box li{

color: red;

}

表示选择类名为box后代中的li

5.6 交集选择器

作用：进行满足所有选择器条件的匹配

书写方法：将多个选择器连接书写，中间没有空格，不需要加任何符号

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        p.par{

            color: blue;

        }

    </style>

</head>

<body>

    <p class="par">文字</p>

    <div class="par">文字</div>

</body>

5.7 并集选择器

并集选择器有‘和’的意思，代表多个标签设置同样的属性
书写方法：将多个选择器使用逗号进行连接，最后一个不能加逗号

选择范围：多个选中标签的集合

我们看下面的结构

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div{

            color: red;

        }

        p{

            color: red;

        }

    </style>

</head>

<body>

    <p>文字</p>

    <div>文字</div>

</body>

div和p标签设置的属性是一样，这个时候我们可以通过并集选择器设置同样的属性值

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        div,p{

            color: red;

        }

    </style>

</head>

<body>

    <p>文字</p>

    <div>文字</div>

</body>

并集选择器非常灵活，可以结合多种选择器使用，就是利用逗号进行分割从而区分属性

#par .par li,p{

            color: red;

}

上面的代码指的是#par里面的.par里面的li和p标签的文字颜色为红色

六、CSS的继承性和层叠性

6.1 继承性

只需要给祖先元素设置文字属性，后代元素就能加载这个属性，这个特性我们叫做继承性

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box{

            color: red;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>文字</li>

        </ul>

    </div>

</body>

注意，css可以继承的属性都是关于文字的，比如color，font-size，font-family

6.2 层叠性

CSS样式表又叫做“层叠式样式表”，什么是层叠性

看下面的案例

HTML结构

<p class="par" id="par">

    文字

</p>

CSS样式

<style>

    p{

        color: red;

    }

    .par{

        font-size: 20px;

    }

    #par {

        /* 文字添加下划线 */

        text-decoration: underline;

    }

</style>

浏览器的效果

通过上面的案例，我们发现一个标签可以被多个选择器选中，并设置对应的属性

如果多个选择器，设置了同一个属性，怎么办？

#par {

    color:purple;

}

.par{

    color: blue;

}

p{

    color: red;

}

我们看浏览器的效果是紫色的；

我们看上图后两个选择器设置的内容被‘杠’掉了，我们叫做被层叠了，这个就是css的层叠性。

我们学习选择器的权重：

id选择器>class类名选择器>标签选择器

如果被多个选择器同时选中，首先看id的，如果没有id的，看class的，如果没有class的，看标签的

我们看下面的案例

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box1 div.box2 #box3 p{

            color: red;

        }  

        #box1 #box2 div.box3 p{

            color: blue;

        }

        #box1 div.box2 .box3 {

            color: pink;

        }

    </style>

</head>

<body>

    <div id="box1" class="box1">

        <div id="box2" class="box2">

            <div id="box3" class="box3">

                <p>文字</p>

            </div>

        </div>

    </div>

</body>

如果遇到复杂的选择器，不要慌，要学会数选择器

方法，首先将所有的选择器罗列出来，从id选择器比较，如果id选择能比出大小，则数量多的获胜。如果id选择器数量相同或者没有，则比较类名选择器，数量多的获胜。如果类名选择器数量相同或者没有，则比较标签选择器，数量多的获胜，如果所有选择器数量相同，后写的覆盖先写的。

6.3 就近原则

上面的案例是所有选择器都选择同一个元素p，所以需要数权重数量

现在如果都没有选中，怎么办？

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

       #box1 #box2 {

           color: blue;

       }

       .box1 .box2 .box3 {

           color: purple;

       }

    </style>

</head>

<body>

    <div id="box1" class="box1">

        <div id="box2" class="box2">

            <div id="box3" class="box3">

                <p>文字</p>

            </div>

        </div>

    </div>

</body>

如果都没有选择中对应标签，就看谁离得近，离得近的就是被选中的，如果选择的都是同一个元素中，再去数权重

总结：

遇到了复杂的选择器，首先看是否同时选中的一个元素，如果都选择的是同一个元素，则数权重，如果层级不同，比如有的是父亲级别，有的是爷爷级别，使用就近原则，谁离得近听谁的；如果所有的权重一样，选择位置也一样，后书写的覆盖先写的