当前位置： 首页 > news >正文

CSS:CSS的基础了解

news 2025/10/16 21:23:56

css概述

CSS（Cascading Style Sheets，层叠样式表） 是用于控制网页样式和布局的一种样式表语言。用于描述网页的样式和布局，包括字体、颜色、大小、间距、边框等方面。

前端三🗡客：HTML,CSS,JavaScript，组成了我们看到的页面，CSS时其中不可或缺的一环，如果没有它，页面也就会像数据 一样一行一行展现在我们面前，正是因为CSS强大的修饰能力，让我们看到了五颜六色的页面。

css的发展史

随着技术的不断发展，CSS 也不断更新迭代，目前主要有三个主要版本：CSS1、CSS2 和 CSS3。

CSS1 是最早的版本，于 1996 年推出，引入了基本的样式控制功能，如文本样式、颜色和背景等，当下已基本废弃。

CSS2 在 1998 年发布，增加了更多的样式属性和布局控制功能，如浮动和定位等。

而 CSS3 是最新的版本，于 2011 年开始逐步推出，引入了更多的新特性，如动画、过渡效果、阴影、圆角等，以及对响应式布局和移动端优化的支持。

css的引入规则

三种引入方式

css的修饰这么强大，那么在代码中我们该如何使用它呢。它提供了三种使用方式：行内式（知道即可，不推荐使用），内嵌式，外联式。

行内式：

行内式，顾名思义就是写在行内的样式。在需要使用css修饰的标签上通过style属性添加样式,

样式和样式之间通过 ; 隔开。

行内式的缺点：

  1. 没有完全脱离HTML标签
  2. css样式让标签结构繁重，不利于HTML结构的解读
  3. 一个内联式的css代码只能给一个标签用，复用性差；多个相同时，会增加代码量，影响加载速度。
<div style = "width：300px">
我是盒子
</div>

内联式：

除了行内式，内联式也是写在html页面中的，它相较于行内式更加方便，它写在<head>标签内部写<style>标签,<style>标签写在<title>标签后面 。在style标签中通过class名和id这些选择器完成对页面的渲染

  • 内嵌式优点

    1. 实现了结构与样式的初步分离(css只负责样式，html负责结构)
    2. 多个标签可利用一段代码设置相同的样式，节省代码量。

  • 内嵌式缺点

    1. 结构和样式并没有完全分离，代码仍然写在HTML文件头部
    2. css只能给一个HTML文件使用，不能被多个HTML文件同时利用。
    3. 在HTML中如果css代码太多，会造成文件头重脚轻。

<head>
<style>
.a {
width ： 300px
}
样式写在这里
</style>
<head>

外联式： 

由于发展越来越快，页面样式越来越复杂，css样式也越来越多，外联式也营运而生。写在独立的.css文件中的样式。通过<link>标签引入页面 中完成渲染。

外联样式表的两种导入方式

1，通过link标签引入

2，在style标签中通过@import url(路径)语句进行引用

为什么使用link引入，不使用@import引入

  1. 导入式和外联式作用基本相同
  2. 但是导入式在浏览器中加载时，会在HTML结构加载完毕后再进行编译，网速比较慢的时候，会导致网页出现没有css样式的效果，给用户的体验不好。
  3. 实际工作中，较少用导入式，推荐使用外联式样式表。

行内式，内嵌式 ，外联式的优先级

这三个引用方式的优先级为行内式 > 内联式 > 外联式

css的语法规则

1，css中的样式键值对为 属性名：属性值；的形式

2，属性值为字符串时要用""包裹

3，属性和属性之间要用;连接

4，css属性对空格，缩进不敏感

css的注释语法

css的注释语法为/* 注释 内容*/

快捷键：ctrl+/

<style>
/*注释 内容*/
</style>

相关文章：

CSS:CSS的基础了解

css概述 CSS&#xff08;Cascading Style Sheets&#xff0c;层叠样式表&#xff09; 是用于控制网页样式和布局的一种样式表语言。用于描述网页的样式和布局&#xff0c;包括字体、颜色、大小、间距、边框等方面。 前端三&#x1f5e1;客&#xff1a;HTML,CSS,JavaScript&am…...

编程日记 2024/4/9 2:42:23

Android Framework学习笔记（2）----系统启动

Android系统的启动流程 启动过程中&#xff0c;用户可控部分是framework的init流程。init是系统中的第一个进程&#xff0c;其它进程都是它的子进程。 启动逻辑源码参照&#xff1a;system/core/init/main.cpp 关键调用顺序&#xff1a;main->FirstStageMain->SetupSel…...

编程日记 2024/4/9 2:34:11

项目管理中的估算活动资源

在项目管理中，资源估算是一项至关重要的任务。正确地估算活动资源可以确保项目的顺利进行，避免资源浪费和不必要的延误。以下是对项目管理中常见的活动资源类型的详细分析。 一、人力资源 人力资源是项目管理中最基本的资源之一。它包括项目团队成员的技能、知识和经验。在…...

编程日记 2024/4/9 2:31:07

java中的set集合及其子类

Set系列集合&#xff1a;添加的元素是无序&#xff08;添加的数据的顺序和获取出数据顺序不一样&#xff09;&#xff0c;不重复&#xff0c;无索引 如&#xff1a;HashSet:无序&#xff0c;不可重复&#xff0c;无索引 LinkedHashSet:有序&#xff0c;不重复&#xff0c;无索…...

编程日记 2024/4/9 2:30:06

shell脚本查询匹配文件进行操作

1.寻找文件并赋权 查询当前目录及子目录下所有以“sh”结尾的文件&#xff0c;并赋执行权限。 #!/bin/bash # 将当前目录及子目录下所有以“sh”结尾的文件添加可执行权限 find ./ -name "*.sh" -type f -exec chmod x {} 2.寻找文件并删除 查询当前目录及子目录下存…...

编程日记 2024/4/9 2:29:05

vulnhub----natraj靶机

文章目录 一.信息收集1.网段探测2.端口扫描3.版本服务探测4.漏扫5.目录扫描 二.漏洞利用1.分析信息2..fuzz工具 三.getshell四.提权六.nmap提权 一.信息收集 1.网段探测 因为使用的是VMware&#xff0c;靶机的IP地址是192.168.9.84 ┌──(root㉿kali)-[~/kali/vulnhub] └─…...

编程日记 2024/4/9 2:27:01

Web Component 组件库有什么优势

前言 前端目前比较主流的框架有 react&#xff0c;vuejs&#xff0c;angular 等。 我们通常去搭建组件库的时候都是基于某一种框架去搭建&#xff0c;比如 ant-design 是基于 react 搭建的UI组件库&#xff0c;而 element-plus 则是基于 vuejs 搭建的组件库。 可能你有这种体…...

编程日记 2024/4/9 2:24:59

如何配置vite的proxy

1.前言 vite项目&#xff0c;本地开发环境可以通过配置proxy代理实现跨域请求。但是生产环境&#xff0c;该配置不生效&#xff0c;一般使用 nginx 转发&#xff0c;或者后端配置cors 2.解释 server: {port: 9000,proxy: { // 本地开发环境通过代理实现跨域&#xff0c;生产…...

编程日记 2024/4/9 2:18:51

Linux CentOS基础操作

Linux CentOS基础操作 1. 查看Linux服务器当前主机名等 hostname 2. 查看当前系统日期和时间 date -d -y 3. 显示网络接口信息&#xff0c;获取当前网卡状态&#xff0c;启动、停止网卡&#xff0c;网卡等闪烁显示30秒&#xff0c;配置网卡(网卡名称&#xff1a;eth1)的IP地址…...

编程日记 2024/4/9 2:15:48

最佳情侣身高差

题目描述 专家通过多组情侣研究数据发现&#xff0c;最佳的情侣身高差遵循着一个公式&#xff1a;&#xff08;女方的身高&#xff09;1.09 &#xff08;男方的身高&#xff09;。如果符合&#xff0c;你俩的身高差不管是牵手、拥抱、接吻&#xff0c;都是最和谐的差度。 下面…...

编程日记 2024/4/9 2:13:45

谷歌开发者账号防关联：如何选择性价比高的VPS，阿里、腾讯、酷鸟、AWS？

在Google Play上架应用的开发者朋友们&#xff0c;可能需要多个开发者账号来上架马甲包或矩阵式上架应用。但谷歌那边又不让一个人搞多个账号&#xff0c;所以&#xff0c;要想不被谷歌抓包&#xff0c;就得做好防关联的功课&#xff0c;确保每个账号都像是独立的个体。 而说到…...

编程日记 2024/4/9 2:09:41

Virtual digital asset $E=$eaco. EarthChain

Virtual digital asset $E$eaco. EarthChain Виртуальный цифровой актив $E $eaco. Цепочка Земля. 仮想デジタル資産$E$eaco.アースチェーン. Activos digitales virtuales $e $oaco. cadena terrestre. Virtuelles digitales Asset $E…...

编程日记 2024/4/9 2:08:39

[计算机网络] 当输入网址到网页

HTTP 首先&#xff0c;对URL进行解析&#xff0c;URL包含了Web服务器和对应的文件&#xff08;文件路径&#xff09; URL是请求服务器中的文件资源 通过Web服务器和对应文件来生产HTTP包&#xff08;超文本传输协议&#xff09; DNS 根据域名查询对应的IP地址 域名的层级 根…...

编程日记 2024/4/9 2:07:37

五年经验，还不懂小表驱动大表

小表驱动大表&#xff0c;也就是说用小表的数据集驱动大表的数据集。假如有order和user两张表&#xff0c;其中order表有10000条数据&#xff0c;而user表有100条数据。 这时如果想查一下&#xff0c;所有有效的用户下过的订单列表。可以使用in关键字实现&#xff1a; select…...

编程日记 2024/4/9 2:05:34

springboot+websocket+微信小程序实现评论区功能

springbootwebsocket微信小程序实现评论区功能 WebSocketSTOMP协议具体实现1.在pom文件中添加Spring WebSocket依赖2. 创建WebSocket配置类3.接收发送消息4.前端 参考 WebSocket 1. 什么是WebSocket&#xff1f; WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双…...

编程日记 2024/4/9 2:04:33

【项目】如何在面试中介绍自己的项目经验（附如何解决未知的问题成长路线）

【项目】如何在面试中介绍自己的项目经验&#xff08;附如何解决未知的问题&成长路线&#xff09; 文章目录 1、为什么要准备项目介绍&#xff1f;2、如何准备一份好的项目介绍&#xff1f;3、如何回答项目提问&#xff1f;4、如何避免低级错误&#xff1f;5、如何通过引导…...

编程日记 2024/4/9 2:03:31

解决Selenium元素拖拽不生效Bug

前几天在使用Selenium进行元素拖拽操作时&#xff0c;发现Selenium自带的元素拖拽方法&#xff08;dragAndDrop()&#xff09;不生效&#xff0c;网上的回答也是五花八门&#xff0c;比较混乱&#xff0c;尝试了以下几种方法均无法解决。 方案1&#xff1a;通过dragAndDrop()方…...

编程日记 2024/4/9 2:02:29

提示工程中的10个设计模式

我们可以将提示词定义为向大型语言模型(Large Language Model&#xff0c;LLM)提供的一个查询或一组指令&#xff0c;这些指令随后使模型能够维持一定程度的自定义或增强&#xff0c;以改进其功能并影响其输出。我们可以通过提供细节、规则和指导来引出更有针对性的输出&#x…...

编程日记 2024/4/9 2:01:27

提高网站安全性，漏洞扫描能带来什么帮助

随着互联网的蓬勃发展&#xff0c;网站已经成为人们获取信息、交流思想、开展业务的重要平台。然而&#xff0c;与之伴随的是日益严重的网络安全问题&#xff0c;包括恶意攻击、数据泄露、隐私侵犯等。 为了保障网站的安全性&#xff0c;提前做好网站的安全检测非常有必要&…...

编程日记 2024/4/9 1:58:24

不要再使用 @Builder 注解了！有深坑呀！

曾经&#xff0c;我在《千万不要再随便使用 lombok 的 Builder 了&#xff01;》 一文中提到 Builder 注解的其中一个大坑会导致默认值失效&#xff01; 最近阅读了 《Oh !! Stop using Builder》 发现 Builder 的问题还不止一个&#xff0c;Builder 会让人误以为是遵循构建器…...

编程日记 2024/4/9 1:57:22

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

编程新知 2025/10/10 18:04:11

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/10/15 18:51:32

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/10/12 5:24:59

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/10/4 15:39:53

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/28 8:06:31

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/9/28 3:34:32

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/10/4 7:45:58

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/10/3 1:32:20