深入理解CSS基础【代码审计实战指南】

文章目录

  • 为什么需要css
  • CSS语法
      • CSS的组成
      • css注释：
  • 快速入门示例：
  • 常用样式
    • 字体颜色和边框
      • 颜色介绍
      • 颜色示例：
      • 边框
      • 边框的宽度与高度
    • 字体样式
    • 背景样式
    • 文本居中
  • 字体颜色和边框
      • 颜色介绍
      • 颜色示例：
      • 边框
      • 边框的宽度与高度
  • 字体样式
  • 背景样式
  • 文本居中
  • css使用三种方式
  • CSS选择器
    • 元素选择器
    • ID选择器
    • class选择器

学习参考：CSS 教程 (w3school.com.cn)

为什么需要css

  1. 在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，费心费力。所以CSS就出现了。
  2. 使用CSS将HTML页面的 内容与样式分离提高web开发的工作效率(针对前端开发）
  3. CSS 可以让 html 元素(内容)+ 样式(CSS)分离，更好的控制页面

CSS语法

  1. CSS的组成

  2. 在这里插入图片描述

    1. 选择器

    2. 声明

      1. 由属性与值组成
      2. 用分号分隔

  3. css注释：

    1. /注释内容/

快速入门示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 快速入门</title>
</head>
<body><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/>
</body>
</html>
<!--课堂代码-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 快速入门</title><!--老师解读1. 在 head 标签内，出现了 <style type="text/css"></style>2. 表示要写 css 内容3. div{} 表示对 div 元素进行样式的指定4. width: 300px; (属性) 表示对 div 样式的具体指定，可以有多个5. 如果有多个，使用 ; 分开即可6. 当运行页面时，div 就会被 div{} 渲染，修饰--><style type="text/css">div {width: 200px;height: 100px;background-color: gold;}</style>
</head>
<body><!--先使用传统的方法--><div>hello,北京</div><br/><div>hello,上海</div><br/><div>hello,天津</div><br/><div>hello,深圳</div><br/>
</body>
</html>

在这里插入图片描述

常用样式

字体颜色和边框

  1. 颜色介绍

    1. 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809

  2. 颜色示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>颜色</title><style type="text/css">/* 为了讲课方便，我们就在这里写 css 样式 *//*说明:颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三种方式，指定颜色1. 英文2. 16进制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}</style></head><body><div>韩顺平教育</div></body></html>

    在这里插入图片描述

  3. 边框

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>边框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px dashed blue;}</style></head><body><div>韩顺平教育</div></body></html>

    在这里插入图片描述

  4. 边框的宽度与高度

    1. 介绍：

      1. 宽度/高度像素值：100px；也可以是百分比值：50%

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

字体样式

  1. 介绍

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗体
    3. font-family : 指定类型

  2. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字体样式</title><style type="text/css">/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: '华文新魏', sans-serif;}</style></head><body>说明:1. font-size: 指定大小，可以按照像素大小<br>2. font-weight : 指定是否是粗体<br>3. font-family : 指定字体类型<br><div>hello，word</div></body></html>

在这里插入图片描述

背景样式

  1. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

文本居中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本居中</title><style type="text/css">div {border: 1px solid blue; /*顺序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: '新宋体', sans-serif;margin-left: auto;margin-right: auto;text-align: center;}</style>
</head>
<body><div>hello，word</div>
</body>
</html>

在这里插入图片描述

字体颜色和边框

  1. 颜色介绍

    1. 颜色可以写颜色名 比如 green，也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809

  2. 颜色示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>颜色</title><style type="text/css">/* 为了讲课方便，我们就在这里写 css 样式 *//*说明:颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三种方式，指定颜色1. 英文2. 16进制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}</style></head><body><div>韩顺平教育</div></body></html>

在这里插入图片描述

  1. 边框

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>边框</title><style type="text/css">div {width: 300px;height: 100px;border: 1px dashed blue;}</style></head><body><div>韩顺平教育</div></body></html>

在这里插入图片描述

  1. 边框的宽度与高度

    1. 介绍：

      1. 宽度/高度像素值：100px；也可以是百分比值：50%

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

字体样式

  1. 介绍

    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否粗体
    3. font-family : 指定类型

  2. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字体样式</title><style type="text/css">/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: '华文新魏', sans-serif;}</style></head><body>说明:1. font-size: 指定大小，可以按照像素大小<br>2. font-weight : 指定是否是粗体<br>3. font-family : 指定字体类型<br><div>hello，word</div></body></html>

在这里插入图片描述

背景样式

  1. 代码示例：

    1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style></head><body><div>hello，word</div></body></html>

在这里插入图片描述

文本居中

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本居中</title><style type="text/css">div {border: 1px solid blue; /*顺序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: '新宋体', sans-serif;margin-left: auto;margin-right: auto;text-align: center;}</style>
</head>
<body><div>hello，word</div>
</body>
</html>

在这里插入图片描述

css使用三种方式

  1. 在标签的 style 属性上设置CSS样式

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在标签的style属性上设置CSS样式</title></head><body><div style="color: red;">hello,北京</div><br/><div style="color: blue;">hello,上海</div><br/><div style="color: green;">hello,天津</div><br/></body></html>

在这里插入图片描述

  1. 在head标签中，使用style标签来定义需要的CSS样式

    1. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>在head标签中，使用style标签来定义需要的CSS样式</title><style>div {color: blue;}span {color: red;}</style></head><body><div>hello,北京</div><br/><div>hello,上海</div><br/><span>hello,span</span></body></html>

在这里插入图片描述

  1. 把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入

    1. 代码示例

      1.  /* test.css 内容 */div {width: 300px;height: 100px; /* 这是一个注释信息 */background: beige;}span {border: 3px solid red;}===================================use-css-style.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入</title><!-- link 标签专门用来引入 css 样式代码 --><link rel="stylesheet" href="test.css"/></head><body><div>hello, 北京~</div><br/><div>hello, 上海</div><br/><span>hello, span</span></body></html>

CSS选择器

  1. 元素选择器

    1. 通常是某个 HTML 元素， 比如 p、h1、adiv等

    2. 代码示例

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>元素选择器</title></head><body><h1>hello，word</h1><p>hello, world~</p></body></html>
      2. 在这里插入图片描述

  2. ID选择器

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

    2. id选择器以"#"来定义

    3. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>id 选择器</title><!-- 我们就在这里写css样式解读：1. 使用id选择器，需要先在要修饰元素指定id属性, id值是程序员自己指定2. id 是唯一的，不能重复3. 在<style> 标签中指定id选择器时，前面需要有 #id值 --><style type="text/css">#hsp1 {color: gold;}#css2 {color: green;}</style></head><body><h1 id="hsp1">hello，word</h1><p id="css2">hello, world~</p></body></html>
      2. 在这里插入图片描述

  3. class选择器

    1. ，可以通过 class 属性选择去使用这个样式

    2. 基本语法：

      1. .class 属性值{属性:值；}

    3. 代码示例：

      1.  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>类选择器</title><!-- 我们就在这里写css样式解读：1. 使用class选择器，需要在被修饰的元素上，设置class属性，属性值由程序员指定2. class 属性的值，可以重复3. 需要在 <style></style> 指定类选择器的具体样式，前面需要是 .类选择器名 --><style type="text/css">.css1 {color: red;}.css2 {color: sandybrown;}</style></head><body><div class="css1">hello，word</div><div class="css1">hello，word 8</div><p class="css2">hello, world~</p></body></html>
      2. 在这里插入图片描述

文本来源：韩顺平java课程笔记

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

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

相关文章

硬件开发笔记（二十七）：AD21导入DC座子原理图库、封装库，然后单独下载其3D模型融合为3D封装

硬件开发笔记（二十七）：AD21导入DC座子原理图库、封装库，然后单独下载其3D模型融合为3D封装

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140541464 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…
阅读更多...
韩顺平0基础学Java——第35天

韩顺平0基础学Java——第35天

p689-714 格式化语句 gpt说的&#xff1a; System.out.println 方法不支持像 printf 一样的格式化字符串。要使用格式化字符串&#xff0c;你可以使用 System.out.printf 方法或将格式化后的字符串传递给 System.out.println。下面是两种修正的方法&#xff1a; ### 方法一…
阅读更多...
【Leetcode】十六、深度优先搜索 宽度优先搜索 ：二叉树的层序遍历

【Leetcode】十六、深度优先搜索 宽度优先搜索 ：二叉树的层序遍历

文章目录 1、深度优先搜索算法2、宽度优先搜索算法3、leetcode102&#xff1a;二叉树的层序遍历4、leetcode107&#xff1a;二叉树的层序遍历II5、leetcode938&#xff1a;二叉搜索树的范围和 1、深度优先搜索算法 深度优先搜索&#xff0c;即DFS&#xff0c;从root节点开始&a…
阅读更多...
Go语言之参数传递

Go语言之参数传递

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 修改参数 假设你定义了一个函数&#xff0c;并在函数里对参数进行…
阅读更多...
【已解决】Linux（Centos7）中yum过程域名无法解析问题

【已解决】Linux（Centos7）中yum过程域名无法解析问题

问题原因 Linux中yum过程域名无法解析问题&#xff0c;但是ping 域名时联通的&#xff08;即DNS没问题&#xff09;&#xff0c;所以初步判断是镜像源的问题。 解决方法&#xff08;Centos7&#xff09; 1、备份/etc/yum.repos.d/CentOS-Base.repo 2、下载CentOS-Base.repo…
阅读更多...
【Linux】Linux的基本使用

【Linux】Linux的基本使用

一.Linux的背景知识. 1.1什么是Linux Linux是一种开源的类Unix操作系统内核. 和Windows是" 并列 "的关系. 1.2Linux的发行版本. Linux 严格意义来说只是一个 “操作系统内核”.一个完整的操作系统 操作系统内核 配套的应用程序. 由于 Linux 是一个完全开源免费…
阅读更多...
FPGA:二选一选择器

FPGA:二选一选择器

1、需求 使用XILINX的XC7A35TFFG484-2开发板&#xff0c;完成二选一选择器的设计。 2、分析 二选一选择器如下所示&#xff1a; 观察可知有三个输入端&#xff0c;一个输出端&#xff0c;其逻辑原理为&#xff1a;当sel为高电平时&#xff0c;outa&#xff0c;当sel为低电平…
阅读更多...
十二、数组（2）

十二、数组（2）

1.冒泡排序数组&#xff08;升序&#xff09; 冒泡排序&#xff1a;将一个整型数组排序&#xff08;升序&#xff09; 例&#xff1a; 10 9 8 7 6 5 4 3 2 1 9 10 8 7 6 …
阅读更多...
第十四届蓝桥杯省赛C++C组C题【三国游戏】题解（AC）

第十四届蓝桥杯省赛C++C组C题【三国游戏】题解（AC）

解题思路 由于三种国家都有获胜的可能&#xff0c;所以我们需要分别枚举 X , Y , Z X,Y,Z X,Y,Z 获胜的情况。 设 X X X 获胜&#xff0c;那么对于第 i i i 个事件的贡献为 a [ i ] − ( b [ i ] c [ i ] ) a[i]-(b[i]c[i]) a[i]−(b[i]c[i])&#xff0c;根据贪心的策略…
阅读更多...
【银河麒麟服务器操作系统】java进程oom现象分析及处理建议

【银河麒麟服务器操作系统】java进程oom现象分析及处理建议

了解银河麒麟操作系统更多全新产品&#xff0c;请点击访问麒麟软件产品专区&#xff1a;https://product.kylinos.cn 现象描述 某服务器系统升级内核至4.19.90-25.22.v2101版本后仍会触发oom导致java进程被kill。 现象分析 oom现象分析 系统messages日志分析&#xff0c;故…
阅读更多...
数据编织 Data Fabric：解决“数据孤岛”的新思路

数据编织 Data Fabric：解决“数据孤岛”的新思路

一个不争的事实是&#xff0c;企业内部数据孤岛的形成&#xff0c;根因在于业务发展的复杂性与技术迭代的快速性导致。具体而言&#xff0c;随着企业业务快速增长&#xff0c;如新生产线的引入或外部公司的并购&#xff0c;这些活动往往伴随着新系统上线与独立数据体系的融入&a…
阅读更多...
【safari】react在safari浏览器中，遇到异步时间差的问题，导致状态没有及时更新到state，引起传参错误。如何解决

【safari】react在safari浏览器中，遇到异步时间差的问题，导致状态没有及时更新到state，引起传参错误。如何解决

在safari浏览器中&#xff0c;可能会遇到异步时间差的问题&#xff0c;导致状态没有及时更新到state&#xff0c;引起传参错误。 PS&#xff1a;由于useState是一个普通的函数&#xff0c; 定义为() > void;因此此处不能用await/async替代setTimeout&#xff0c;只能用在返…
阅读更多...
网络安全行业最大的敌人是自己

网络安全行业最大的敌人是自己

在危机四伏的数字丛林时代&#xff0c;网络安全行业需要跳出资本和市场的博弈陷阱&#xff0c;通过拯救自己来拯救所有人。当然&#xff0c;政府和资本也应该意识到这一点。 在当今这个数字化时代&#xff0c;网络安全的重要性与日俱增。然而&#xff0c;尽管政府和企业不断强调…
阅读更多...
【vue+el-table】实现表尾合计行分两行显示，一行显示勾选项之和，一行显示合计，已实现，具体思路解析

【vue+el-table】实现表尾合计行分两行显示，一行显示勾选项之和，一行显示合计，已实现，具体思路解析

效果图&#xff1a; 思路解析&#xff1a; 首先进行了el-table列表的组件封装&#xff0c;很多参数是传进来的。如果是普通的列表&#xff0c;相关参数直接定义就行 1、使用el-table的summary-method处理表尾行 &#xff08;1&#xff09;定义summaryIndex用于指定合计在哪一列…
阅读更多...
vue学习笔记（十一）——开发心得（axios的封装、promise细节、vue-router开发中的使用）

vue学习笔记（十一）——开发心得（axios的封装、promise细节、vue-router开发中的使用）

1. axios的网络请求的封装 1.1 为什么要封装api? 代码分层&#xff0c;便于以后的修改&#xff0c;无需触碰逻辑页面 目标&#xff1a; 网络请求&#xff0c;不散落在各个逻辑页面里&#xff0c;封装起来方便以后修改 1.2 封装api步骤 ① 在项目 src 下新建目录 utlis &am…
阅读更多...
VTD学习笔记(一)-启动vtd、基本界面和按钮

VTD学习笔记(一)-启动vtd、基本界面和按钮

写在前面&#xff1a;真快啊&#xff0c;眨眼就毕业上班了&#xff0c;岗位也是做仿真&#xff0c;看来以后就是一直做仿真了&#xff0c;再见了定位~。公司使用的是vtd&#xff0c;看资料是一个很庞大的自动驾驶仿真软件&#xff0c;囊括了车辆动力学到传感器仿真&#xff0c;…
阅读更多...
Python list comprehension (列表推导式 - 列表解析式 - 列表生成式)

Python list comprehension (列表推导式 - 列表解析式 - 列表生成式)

Python list comprehension {列表推导式 - 列表解析式 - 列表生成式} 1. Python list comprehension (列表推导式 - 列表解析式 - 列表生成式)2. Example3. ExampleReferences Python 中的列表解析式并不是用来解决全新的问题&#xff0c;只是为解决已有问题提供新的语法。 列…
阅读更多...
iPad型号数据解析：了解不同iPad型号的连接和扩展性能力

iPad型号数据解析：了解不同iPad型号的连接和扩展性能力

iPad是一款非常受欢迎的平板电脑&#xff0c;拥有多种型号和规格可供选择。在本篇文章中&#xff0c;我们将深入研究不同iPad型号的连接和扩展性能。数据源来自于挖数据平台&#xff0c;该平台提供了全面的iPad型号数据&#xff0c;共计1485个型号。 首先&#xff0c;让我们来…
阅读更多...
【D3.js in Action 3 精译_020】2.6 用 D3 设置与修改元素样式 + 名人专访（Nadieh Bremer）+ 2.7 本章小结

【D3.js in Action 3 精译_020】2.6 用 D3 设置与修改元素样式 + 名人专访（Nadieh Bremer）+ 2.7 本章小结

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可视化最佳实践&#xff08;下&#xff09;1.4 本章小结 第二章…
阅读更多...
怎样用Java程序与数据库建立联系？

怎样用Java程序与数据库建立联系？

首先我们要了解一下JDBC&#xff0c;一个为Java程序与关系型数据库交互提供便利的API&#xff08;应用程序编程接口&#xff09;&#xff0c; 本期我们尝试用Java编程软件IDEA与MYSQL数据库建立联系。 首先我们在IDEA中穿件一个&#xff08;SQL&#xff09;&#xff0c;然后导…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023