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

news2024/12/29 9:59:30

一、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>

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

总结：

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2183049.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Flowable之任务撤回（支持主流程、子流程相互撤回）

Flowable之任务撤回（支持主流程、子流程相互撤回）

撤回任务&#xff1a;主流程 > 主流程 处室主管【送科长审核】 处室主管【撤回科长审核】 流程日志 撤回任务&#xff1a;子流程 > 子流程 会办接收岗【送处室主管】 会办接收岗【撤回处室主管】 会办接收岗【同意】 撤回任务&#xff1a;子流程 > 主流程 处室主管…
阅读更多...
秋招内推--招联金融2025

秋招内推--招联金融2025

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递&#xff09; 【招聘岗位】 后台开发 前端开发 数据开发 数据运营 算法开发 技术运维 软件测试 产品策…
阅读更多...
每日读则推(一)

每日读则推(一)

v.避免,回避,撤销 n.黑花园蚁 Several animals are known to alter their behavior to avoid infections. But black garden v.改变,改动 n.传染病,感染,污染ants are th…
阅读更多...
低空经济时代来临，挑战和机遇详细分析

低空经济时代来临，挑战和机遇详细分析

低空经济作为一种新兴的经济形态&#xff0c;正逐步成为推动国民经济发展的新增长点。它依托于低空空域&#xff0c;涵盖通用航空、无人机应用、航空运动、低空旅游等多个领域&#xff0c;展现了广阔的发展前景和巨大的发展潜力。本文旨在详细分析低空经济时代来临所带来的挑战…
阅读更多...
C语言数组和指针笔试题(三)

C语言数组和指针笔试题(三)

目录 字符数组四例题1例题2例题3例题4例题5例题6例题7 结果字符数组五例题1例题2例题3例题4例题5例题6例题7结果字符数组六例题1例题2例题3例题4例题5例题6例题7 结果 感谢各位大佬对我的支持,如果我的文章对你有用,欢迎点击以下链接 &#x1f412;&#x1f412;&#x1f412;个…
阅读更多...
C语言、Eazy_x——井字棋

C语言、Eazy_x——井字棋

#include<graphics.h>char board_data[3][3] { { -,-,-},{ -,-,-},{ -,-,-}, };char current_piece o;//检测指定棋子玩家是否获胜 bool CheckWin(char c) {if (board_data[0][0] c && board_data[0][1] c && board_data[0][2] c)return true;if (…
阅读更多...
html+css+js实现step进度条效果

html+css+js实现step进度条效果

实现效果 代码实现 HTML部分 <div class"box"><ul class"step"><li class"circle actives ">1</li><li class"circle">2</li><li class"circle">3</li><li class&quo…
阅读更多...
Sui Bridge今日正式上线Sui主网

Sui Bridge今日正式上线Sui主网

等待结束&#xff01;Sui Bridge现已上线Sui主网。 Sui Bridge是一种原生解决方案&#xff0c;用于在外部生态&#xff08;如以太坊&#xff09;之间转移资产。随着Web3的扩展和成熟&#xff0c;打破主要生态之间的壁垒&#xff0c;允许资产和数据自由流动变得尤为重要。 在W…
阅读更多...
十大排序算法集锦

十大排序算法集锦

前言 众所周知&#xff0c;程序数据结构算法&#xff0c;由此可见算法的重要性。 为了了解算法&#xff0c;可以从排序算法入手&#xff0c;如下是十大排序算法的介绍(简介&#xff0c;原理&#xff0c;动图&#xff0c;代码&#xff0c;复杂性分析等)&#xff0c;希望可以带你…
阅读更多...
代码随想录算法训练营Day18 | 530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先

代码随想录算法训练营Day18 | 530.二叉搜索树的最小绝对差、501.二叉搜索树中的众数、236. 二叉树的最近公共祖先

目录 530.二叉搜索树的最小绝对差 501.二叉搜索树中的众数 236. 二叉树的最近公共祖先 530.二叉搜索树的最小绝对差 题目 530. 二叉搜索树的最小绝对差 - 力扣&#xff08;LeetCode&#xff09; 给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值…
阅读更多...
✨机器学习笔记（六）—— ReLU、多分类问题、Softmax、Adam、反向传播

✨机器学习笔记（六）—— ReLU、多分类问题、Softmax、Adam、反向传播

Course2-Week2: https://github.com/kaieye/2022-Machine-Learning-Specialization/tree/main/Advanced%20Learning%20Algorithms/week2机器学习笔记&#xff08;六&#xff09; 1️⃣ReLU&#xff08;Rectified Linear Unit&#xff09;2️⃣多分类问题3️⃣Softmax4️⃣Adam5…
阅读更多...
【Linux】进程+权限管理+软硬链接+其他命令

【Linux】进程+权限管理+软硬链接+其他命令

目录 1. man手册 2. find按文件名称 3. find按文件类型 4. date显示时间 5. cal显示日历 6. du文件大小 7. ln链接 8. 软连接&#xff0c;硬链接区别 9. 文本查找 10. wc统计文本(计算文件的Bytes数、字数或列数) 11. 查看文本内容&#xff1a; 1…
阅读更多...
深度学习---------------------------深度循环神经网络

深度学习---------------------------深度循环神经网络

目录 回顾&#xff1a;循环神经网络总结深度循环神经网络代码 回顾&#xff1a;循环神经网络 RNN就一个隐藏的层&#xff0c;无法做的很宽&#xff0c;所以一般的做法是做的更深。&#xff08;更深的时候是说每一层做一点点的非线性。&#xff09; 怎么样把循环网络变深&#…
阅读更多...
新版IDEA中Git的使用（四）——解决冲突

新版IDEA中Git的使用（四）——解决冲突

说明&#xff1a;之前介绍过新版IDEA中Git的基础操作、分支操作和回滚代码&#xff0c;本文介绍基于新版IDEA&#xff0c;如何解决代码冲突。 避免冲突 解决冲突的最好方法就是不要发生冲突&#xff0c;这里我介绍下面几点&#xff0c;可以避免代码冲突&#xff1b; 时常做pu…
阅读更多...
[Unity Demo]从零开始制作空洞骑士Hollow Knight第十三集：制作小骑士的接触地刺复活机制以及完善地图的可交互对象

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十三集：制作小骑士的接触地刺复活机制以及完善地图的可交互对象

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、制作小骑士的接触地刺复活机制 1.制作动画以及使用UNITY编辑器编辑2.实现有攻击的地刺行为3.使用代码实现小骑士接触复活功能二、完善地图的可交互对象 1.制…
阅读更多...
ThreadLocal原理解析及面试

ThreadLocal原理解析及面试

基本使用 讲原理之前&#xff0c;我简单写个demo小程序 public class TestThreadLocal {public static void main(String[] args) throws InterruptedException {ThreadLocal<String> tl new ThreadLocal();/**主线程设置了一个值*/tl.set("SSSSSs");//tl.…
阅读更多...
黑马头条day10 热点文章定时文章

黑马头条day10 热点文章定时文章

day8-9是项目实战没有新东西 暂时跳过 进度到这里 但是后边的东西一直跑不通 调度一直失败 我也不知道哪里出了问题 整tm一天了也没搞出来 心态炸了 主要是xxl调度算是新内容 但是一直跑不出来就很烦 所谓的热点也就是计算权值然后存储到redis就行了 未解决&#xff1a; we…
阅读更多...
【源码部署】springboot部署服务器之宝塔安装数据库远程无法链接问题

【源码部署】springboot部署服务器之宝塔安装数据库远程无法链接问题

最近新搞了一个阿里云服务器&#xff0c;使用docker安装东西感觉太麻烦&#xff0c;于是用了宝塔。按了宝塔之后麻烦接连不断啊&#xff0c;最让人头疼的就是这个mysql无法远程链接问题&#xff0c;因此整理一下防止忘记在踩坑&#xff1a; 1、首先就是在宝塔面板中放行端口&a…
阅读更多...
深度学习--------------------长短期记忆网络(LSTM)

深度学习--------------------长短期记忆网络(LSTM)

目录 长短期记忆网络候选记忆单元记忆单元隐状态 长短期记忆网络代码从零实现初始化模型参数初始化实际模型训练 简洁实现 长短期记忆网络 忘记门&#xff1a;将值朝0减少 输入门&#xff1a;决定要不要忽略掉输入数据 输出门&#xff1a;决定要不要使用隐状态。 候选记忆单元…
阅读更多...
这4款专业的Windows录屏工具，帮你解决多样的录屏的问题。

这4款专业的Windows录屏工具，帮你解决多样的录屏的问题。

像Xbox 录制&#xff0c;步骤记录器等工具都是Windows系统里面自带的录屏工具&#xff0c;如果时想要更多功能的录屏工具&#xff0c;可以下载一些专业录屏软件&#xff0c;我可以给大家推荐几款&#xff0c;实用稳定&#xff0c;专业高效的录屏软件。 1、福昕多效录屏 直达&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023