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

CSS:CSS的基础了解

news 2025/7/8 9:08:12

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/7/7 5:57:21

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

编程新知 2025/7/7 19:25:19

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/6/17 19:00:28

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/6/27 10:06:34

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/7/7 3:01:07

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/7/6 15:58:45

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/7/6 1:55:51

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/7/6 19:18:14

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

编程新知 2025/7/6 4:23:14

EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势

一、WebRTC与智能硬件整合趋势​ 随着物联网和实时通信需求的爆发式增长&#xff0c;WebRTC作为开源实时通信技术&#xff0c;为浏览器与移动应用提供免插件的音视频通信能力&#xff0c;在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能&#xff0c;对实时…...

编程新知 2025/7/7 15:25:45