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

CSS:CSS的基础了解

news 2025/12/5 21:10:06

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/12/4 18:46:09

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2025/11/29 14:47:55

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/11/11 23:02:06

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/12/5 18:01:09

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/11/27 12:34:52

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2025/11/27 13:59:08

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2025/11/28 7:26:28

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/3 21:51:26

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/12/3 16:03:07