web前端学习笔记2

VIP文章 已于 2024-04-26 15:45:31 修改
阅读量1k 收藏 26
点赞数 24
文章标签： 前端 学习 笔记
于 2024-04-24 12:29:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hanq2016/article/details/138155449
版权

2. 网页穿上美丽外衣

2.0 代码地址

https://gitee.com/qiangge95243611/java118/tree/master/web/day02

2.1 什么是CSS

  • CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

  • CSS样式包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

  • CSS文件如下图：

2.1.1 CSS的发展史
2.1.2 CSS的优势

  • 分离内容和样式

    CSS允许将网页内容与其样式分离，这使得网站维护更为简单，同时提高了页面加载速度和搜索引擎优化。

  • 样式重用

    CSS允许通过类和ID选择器对样式进行重用，这意味着可以轻松地对整个网站或其特定部分应用一致的样式。

2.2 CSS的基本语法

2.2.1 CSS基本语法结构
选择器{
	样式声明1;
	样式声明2;
	...
}

​ 如上图所示，h1是选择器会找到页面中所有的h1标签，font-size:12px;声明字体大小样式为12像素，color:#F00;声明文本颜色样式。在css样式声明中，最后一个样式声明的分号可以省略，但不建议省略。

2.2.2 style标签

​ 知道声明css样式的语法后，那么样式应该写在页面的哪里呢？页面内部的样式可以在style标签中进行声明，如下：

<style type="text/css">
h1 {
     
	font-size:12px;
	color:#F00;
}
</style>

​ style标签一般在页面中是不显示的，所有建议把style标签放到head标签中。此时就可以对页面中的h1标签设置样式了。

2.3 引入CSS样式

2.3.1 行内样式
  • 在元素的开始标签中使用style属性引入CSS样式，称行内样式。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>行内样式</title>
  </head>
  <body>
    <!-- 行内样式：是定义在开始标签属性style中的样式，优先级比较高，是就近原则 -->
    <h3 style="color: blue; font-size: 16px">
      美订单什么时候发货？大概多长时间可以收到货？
    </h3>
    <p style="color: #666">
      正常情况下您的订单将在6小时内发出（最晚不超过1个工作日）。8月1日的订单，将在3日内全部发出。发货之后，您可以在我的订单中可以查看发货状态。由于快递公司可能无法实时更新信息，因此您看到的发货情况可能有一定延迟。
    </p>
  </body>
</html>
  • 效果图如下：

2.3.2 内部样式
  • CSS代码写在<head>的<style>标签中
  • 优点：方便在同页面中修改样式
  • 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内部样式</title>
    <!--
      内部样式：样式表声明在html内部的style标签中
      style可以放在页面的任何位置，建议放在head中
    -->
    <style>
      /* h3是选择器，找到页面中所有的h3元素 */
      h3 {
     
        /* 样式声明，样式属性color值为blue */
        color: blue;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h3>美订单什么时候发货？大概多长时间可以收到货？</h3>
    <p>
      正常情况下您的订单将在6小时内发出（最晚不超过1个工作日）。8月1日的订单，将在3日内全部发出。发货之后，您可以在我的订单中可以查看发货状态。由于快递公司可能无法实时更新信息，因此您看到的发货情况可能有一定延迟。
    </p>
  </body>
</html>
  • 效果图如下

2.3.3 外部样式
  • 外部样式顾名思义，样式定义的位置不在html页面中，CSS代码保存在扩展名为.css的外部样式表中
  • HTML文件可以引用扩展名为.css的样式表，主要有2种方式：
    • 链接式 使用link标签
    • 导入式 使用 @import 在css文件或style标签中引入
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>外部样式</title>
    <!-- 0. 外部样式: 定义在html外部.css文件中样式表 -->
    <!-- 1. 使用link引入外部样式，是html的语法 -->
    <link rel="stylesheet" href="css/demo3.css" type="text/css" />
    <!-- 2. 使用css2的 @import url(外部文件的地址) 语法引入外部样式 -->
    <!-- <style>
      @import url("css/demo3.css");
    </style> -->
    <!-- 3. 行内，内部，外部样式三种方式设置样式，推荐使用外部样式，外部样式推荐使用link标签引入 -->
  </head>
  <body>
    <h3>美订单什么时候发货？大概多长时间可以收到货？</h3>
    <p>
      正常情况下您的订单将在6小时内发出（最晚不超过1个工作日）。8月1日的订单，将在3日内全部发出。发货之后，您可以在我的订单中可以查看发货状态。由于快递公司可能无法实时更新信息，因此您看到的发货情况可能有一定延迟。
    </p>
  </body>
</html>
  • 下面是css/demo3.css文件内容
h3 {
   
  color: red;
  font-size: 18px;
}

p {
   
  color: #777;
}
  • 效果图如下

2.3.4 链接式与导入式的区别
  • link引入外部样式时，使用的是html标签，用的是html的语法，@import引入外部样式时，使用的是css的语法
  • 所有的浏览器都可以执行link标签，然而@import是css2.1的语法，所有只有支持css2.1的浏览器才能使用@import方式导入样式。
  • link方式先导入css样式，再编译显示，页面加载完就会有样式，不会看到没有样式的html页面效果
  • @import方式导入css样式，页面先显示html结构，再编译样式
2.3.5 CSS样式优先级
  1. 行内样式比外部和内部样式都高，遵循就近原则
  2. 内部和外部样式，后加载样式会覆盖前面的样式
  3. 如果外部有内部和行内没有声明的样式，样式会有叠加效果。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三种样式优先级</title>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/demo4.css" />
    <!-- 内部样式 -->
    <style>
      h3 {
     
        color: blue;
        font-size: 26px;
      }
    </style>
  </head>
  <body>
    <!-- 行内样式 -->
    <h3>
      <!-- <h3 style="color: red; font-size: 16px"> -->
      美订单什么时候发货？大概多长时间可以收到货？
    </h3>
    <p>
      正常情况下您的订单将在6小时内发出（最晚不超过1个工作日）。8月1日的订单，将在3日内全部发出。发货之后，您可以在我的订单中可以查看发货状态。由于快递公司可能无法实时更新信息，因此您看到的发货情况可能有一定延迟。
    </p>
  </body>
</html>
<!--
  结论：
    1. 行内样式比外部和内部样式都高，遵循就近原则
    2. 内部和外部样式，后加载样式会覆盖前面的样式
    3. 如果外部有内部和行内没有声明的样式，会叠加样式声明。
 -->
  • 外部样式css/demo4.css内容如下：
h3 {
   
  color: green;
  font-size: 36px;
  border: 1px solid #000;
}
  • 效果图如下：

  • h3有行内样式时的效果：
<h3 style="color: red; font-size: 16px">
	美订单什么时候发货？大概多长时间可以收到货？
</h3>

2.4 CSS基本选择器

​ 选择器是css语法中帮助用户快速查找页面元素的名称。

名称 描述 举例
* 全局选择器，找到页面中所有的元素 *{padding:0; margin:0;}
a,div,.box 并集选择器, 通过不同的选择合并一起设置样式 a,div,.box{color:red;}
div 标签选择器，通过标签名称找到页面中所有元素div div{color:red;}
.box 类选择器，匹配在开始标签中声明class="box"的所有元素 .box{border:1px solid red;}
#box id选择器，匹配在开始标签中声明class="box"的所有元素 #box{border:1px solid red;}
2.4.1 标签选择器

​ HTML标签作为标签选择器的名称，如：body, div, p, a, img…

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标签选择器</title>
    <!-- 为了课堂演示方便使用内部样式, 作业，项目统统使用外部样式 -->
    <style>
      h3 {
     
        color: #090;
      }
      p {
     
        color: red;
      }
    </style>
  </head>
  <body>
    <h3>北京欢迎你</h3>
    <p>北京欢迎你，有梦想谁都了不起！</p>
    <p>有勇气就会有奇迹。</p>
  </body>
</html>
  • 效果图如下：

2.4.2 类选择器

​ 在开始标签中定义class=“值”，通过 class的值作为选择器称类选择器。

  • 案例代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类选择器</title>
    <!-- 为了课堂演示方便使用内部样式, 作业，项目统统使用外部样式 -->
    <style>
      h3 {
     
        color: #090;
      }
      p {
     
        color: red;
      }
      /* 类选择器 */
      .green {
     
        font-size: 20px;
        color: green;
      }
    </style>
  </head>
  <body>
    <h3>北京欢迎你</h3>
    <p>北京欢迎你，有梦想谁都了不起！</p>
    <p class="green">有勇气就会有奇迹。</p>
  </body>
</html>
  • 效果图

2.4.3 ID选择器

​ 在开始标签中定义id=“值”，使用id的值作为选择器。

  • 案例代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ID选择器</title>
    <style>
      #first {
     
        font-size: 18px;
        color: red;
      }
      #second {
     
        font-size: 28px;
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>北京欢迎你</h1>
    <p id="first">北京欢迎你，有梦想谁都了不起！</p>
    <p id="second">有勇气就会有奇迹。</p>
    <p>北京欢迎你，为你开天辟地</p>
    <p>流动中的魅力充满朝气。</p>
  </body>
</html>
  • 效果图如下

2.4.4 基本选择器的优先级

  • 基本选择器的优先级不遵循就近原则

  • !important > 行内样式 > id选择器 > class选择器 > tag选择器

  • 代码

    <!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>基本选择器的优先级</title>
    <!-- 标题小图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/demo8.css" />
  </head>
  <body>
    <div class="box" id="div" style="color: blueviolet">基本选择器的优先级</div>
  </body>
</html>
<!--
  1. 基本选择器的优先级不遵循就近原则
  2. !important > 行内样式 > id选择器 > class选择器 > tag选择器
-->

  • css/demo8.css的样式表如下：

    #div {
     
  color: blue;
}

.box {
     
  color: green;
}

div {
     
  color: red !important;
}

  • 效果图如下

2.5 CSS的高级选择器

2.5.1 层次选择器
选择器 类型 描述
E F 后代选择器 匹配E元素中的所有F元素
E>F 子选择器 匹配E元素中的所有直接子元素F
E+F 相邻兄弟选择器 匹配E元素后面第一个兄弟元素F
E~F 通用兄弟选择器 匹配E元素后面所有的兄弟元素F

  • 后代选择器

    <!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>后代选择器</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      /* 设置body中的后代元素p */
      body p {
       
        background-color: red;
        color: #fff;
      }
      ul {
       
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <!-- body元素的直接子元素p -->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <!-- ul是无序列表 -->
    <ul>
      <!-- body中的间接子元素p -->
      <li><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>
    </ul>
  </body>
</html>

  • 子选择器

    <!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>子选择器</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      ul,
      p {
       
        border: 1px solid red;
      }
      /* 子选择器: 不包括间接子元素p */
      body > p {
       
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <ul>
      <li><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>
    </ul>
  </body>
</html>

  • 相邻兄弟选择器

    <!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>相邻兄弟选择器</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      /* 基本选择其中的并集选择器 */
      ul,
      p,
      div {
       
        border: 1px solid red;
      }
      /* 相邻兄弟选择器: 找当前元素.active的后面一个兄弟元素div */
      .active + div {
       
        background-color: green;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <p class="active">1</p>
    <div>2</div>
    <p>3</p>
    <ul>
      <li><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>
    </ul>
  </body>
</html>

  • 通用兄弟选择器

    <!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>通用兄弟选择器</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      ul,
      p {
       
        border: 1px solid red;
      }
      /* 通用兄弟选择器: 找到与.active同级别后面的兄弟元素p */
      .active ~ p {
       
        background-color: yellow;
      }
      .first ~ li > p {
       
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <p class="active">1</p>
    <p>2</p>
    <p>3</p>
    <ul>
      <!-- 设置p5、p6设置背景色pink -->
      <li class="first"><p>4</p></li>
      <li><p>5</p></li>
      <li><p>6</p></li>
    </ul>
  </body>
</html>

2.5.2 属性选择器
选择器 描述
E[attr] 匹配有attr属性的所有E元素
E[attr=val] 匹配有attr属性值为val的所有E元素
E[attr^=val] 匹配有attr属性值以val开头的所有E元素
E[attr$=val] 匹配有attr属性值以val结尾的所有E元素
E[attr*=val] 匹配有attr属性值包含val的所有E元素

  • 代码

    <!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, maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>属性选择器</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
      .demo a {
       
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        text-align: center;
        background: #aac;
        color: blue;
        font: bold 20px/50px Arial;
        margin-right: 5px;
        text-decoration: none;
        margin
最低0.47元/天 解锁文章
hanq2016
关注
  • 24
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Web前端学习笔记（1
weixin_47016359的博客
03-16 824
Web前端学习笔记1 一、第一个网页 第一次接触web前端第一个代码可以试着用记事本逐行敲代码，保存的时候要记着文件名的后缀为.html，保存类型为所有文件，编码选中UTF-8 举个栗子： <!Doctype Html> <html lang ="en"> <head> <meta charset = "UTF-8"> <!--title是网页标题--> <!-- 注释标签--> &
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
Web前端学习笔记
DAOkonglong的博客
10-16 3215
Web前端学习
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3492
Web前端学习笔记（1）
Web前端开发学习笔记
qq_41622776的博客
02-02 1524
自学笔记，仅供参考
web前端学习笔记二
别不开心ovo
08-04 771
css
web前端学习笔记以及代码
02-24
web前端学习笔记以及代码
web前端基础学习笔记
01-08
web前端基础知识学习笔记，内含有HTML、CSS、JavaScript的基础知识的总结，可以帮助大家学习
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
web前端开发笔记整理（一）
01-08
...1. 告诉搜索引擎爬虫我们的网站关于什么内容 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎...2. HTML全局属性，lang 属性规定元素内容的语言。 lang 属性在以下标签中无效：, , , , , , 以
前端调用WebSocket协议接口获取数据
m0_56023096的博客
04-29 465
createWs("测试数据", (res) => {
web server apache tomcat11-32-rewrite
05-06 513
整理这个官方翻译的系列，原因是网上大部分的 tomcat 版本比较旧，此版本为 v11 最新的版本。重写阀门实现了 URL 重写功能，与 Apache HTTP Server 中的 mod_rewrite 非常相似。
菜鸡学习netty源码（三）—— Reactor 模型
u013127325的博客
05-03 553
我们先进行理解一下Reactor模型，知道什么是Reactor模型，它有什么特别之处。我们先来简单介绍一下这个Reactor模型。Reactor模型的核心思想：就是将所关注的I/O事件进行注册到一个多路复用器上，一旦有I/O事件的发生，将事件进行分发到对应的事件处理器中，执行I/O事件对应的函数。Rector模型有3中模型的实现：单Reactor单线程模型，单Reactor多线程模型，多Reactor多线程模型。
前端 | iframe框架标签应用（二）| 外部页面导入
因为健忘，所以记点有的没的〒▽〒
05-06 808
点击右上角喇叭，弹出iframe页面框，链接bilibili白噪音视频页面；点击关闭按钮，关闭弹出框。
uni框架下的前端小知识
weixin_53908842的博客
04-30 326
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
基于若依框架搭建网站的开发日志（一）：若依框架搭建、启动、部署
lzh804121985的博客
05-05 847
若依是一款开源的基于Vue+SpringCloud的微服务后台管理系统（也有SpringBoot版本），集成了用户管理、权限管理、定时任务、前端表单生成等各种基础功能，对于像我这种前端代码写不了一点的玩家来说十分友好！
组件化开发&根组件
最新发布
m0_74462339的博客
05-06 199
组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。好处：便于维护，利于复用，提升开发效率。
JavaScript：Web APIs（三）
ma_no_lo的博客
05-03 945
Js中事件流和基本阻止方式，包含load,scroll,resize事件
使用Axios从前端上传文件并且下载后端返回的文件
哈哈哈哈哈哈哈哈的博客
05-03 260
【代码】使用Axios从前端上传文件并且下载后端返回的文件。
web前端开发笔记vscode
10-26
这个插件可以帮助开发者快速查找和学习Web前端开发的知识点，提高开发效率。 该插件的主要功能包括： 1. 提供了一些常用的Web前端开发知识点和技巧的笔记； 2. 可以通过搜索功能快速查找需要的知识点； 3. 支持...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值