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

CSS:CSS的基础了解

news 2025/8/28 1:40:48

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

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2025/8/22 5:05:32

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2025/8/11 3:57:38

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

编程新知 2025/8/22 5:43:27

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2025/8/25 7:12:04

ui框架-文件列表展示

ui框架-文件列表展示 介绍 UI框架的文件列表展示组件&#xff0c;可以展示文件夹&#xff0c;支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项&#xff0c;适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

编程新知 2025/8/23 11:02:32

土建施工员考试：建筑施工技术重点知识有哪些？

《管理实务》是土建施工员考试中侧重实操应用与管理能力的科目&#xff0c;核心考查施工组织、质量安全、进度成本等现场管理要点。以下是结合考试大纲与高频考点整理的重点内容&#xff0c;附学习方向和应试技巧&#xff1a; 一、施工组织与进度管理 核心目标&#xff1a; 规…...

编程新知 2025/7/9 1:00:40

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

编程新知 2025/8/6 1:05:46

Spring是如何实现无代理对象的循环依赖

无代理对象的循环依赖 什么是循环依赖解决方案实现方式测试验证 引入代理对象的影响创建代理对象问题分析 源码见&#xff1a;mini-spring 什么是循环依赖 循环依赖是指在对象创建过程中&#xff0c;两个或多个对象相互依赖&#xff0c;导致创建过程陷入死循环。以下通过一个简…...

编程新知 2025/8/26 9:12:38

八、【ESP32开发全栈指南：UDP客户端】

1. 环境准备 安装ESP-IDF v4.4 (官方指南)确保Python 3.7 和Git已安装 2. 创建项目 idf.py create-project udp_client cd udp_client3. 完整优化代码 (main/main.c) #include <string.h> #include "freertos/FreeRTOS.h" #include "freertos/task.h&…...

编程新知 2025/7/5 17:08:03