CSS:CSS的基础了解

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>

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

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

相关文章

GEE:样本点的样式设置

作者:CSDN @ _养乐多_ 本文将介绍在Google Earth Engine (GEE)平台上为样本点设置样式的方法和代码,样本点可以设置成任何颜色,以及7种形状,以便更直观了解数据的分布和特征。 文章目录 一、统一设置样式1.1 示例代码1.2 示例代码链接二、每一类一个样式2.1 示例代码2.2…

jenv实现mac下多版本jdk管理以及切换

文章目录 背景步骤 背景 多个java项目使用jdk版本不一样,mac机器下需要实现多版本的jdk管理. 使用工具jenv 步骤 oracle javase 官网选择合适的jdk版本,比如 我使用jdk11 下载正确的 macOS Arm 64 dmg版本. 然后在mac系统下双击dmg包进行安装. 安装好之后jdk路径为 /Library…

7款公司电脑监控软件

7款公司电脑监控软件 研究证明&#xff0c;人们在家办公的效率比在办公室办公的效率低一半&#xff0c;其中原因是缺少监督&#xff0c;即便在公司办公&#xff0c;还存在员工偷闲的时刻&#xff0c;比如聊天、浏览无关网站、看剧、炒股等&#xff0c;企业想提高员工的工作效率…

【Java】maven传递依赖冲突解决

传递依赖的概念&#xff1a; 传递依赖:&#xff1a; A.jar 依赖 B.jar, B.jar 依赖 C.jar, 这个时候我们就说B是A的直接依赖, C是A传递依赖; 传递依赖可能会产生冲突: 联系着上面, 新导入一个jar包D.jar, D依赖C.jar, 但是B依赖的1.1版本, 而D依赖的是1.2版本, 这时候C这个j…

绝地求生:齐贺PUBG七周年!分享你的游玩感受及反馈赢惊喜道具

PUBG七周年庆典火热进行中&#xff0c;特殊道具、周年主题艾伦格上线&#xff01;七周年期间游玩PUBG&#xff0c;在评论区分享你的游玩感受及反馈&#xff0c;即可参与活动赢取夏日浪潮宝箱奖励。 参与方式 齐贺PUBG七周年&#xff01;在评论区分享分享你的七周年游玩感受及反…

鸿蒙OS实战开发:【多设备自适应服务卡片】

介绍 服务卡片的布局和使用&#xff0c;其中卡片内容显示使用了一次开发&#xff0c;多端部署的能力实现多设备自适应。 用到了卡片扩展模块接口&#xff0c;[ohos.app.form.FormExtensionAbility] 。 卡片信息和状态等相关类型和枚举接口&#xff0c;[ohos.app.form.formInf…

富足--经历和经验先动脑还是动手

当别⼈犯错误&#xff0c;⽽你不犯销误时&#xff0c;你就赢了。 如果我们把⽬光放得⽐较长远&#xff0c;就会发现重视经验和传统的做法会更好。 理性主义的好处是能够找出世界的共性&#xff0c;因此它通常显示出很⾼的效率&#xff0c;特别是短时间内的效率。 最然依赖经…

计算机网络技术-TCP传输连接的建立和释放过程;

目录 掌握TCP传输连接的建立和释放过程三次握手建立连接四次挥手断开连接 待续、更新中 掌握TCP传输连接的建立和释放过程 三次握手建立连接 请求建立连接、确定可连接、再次发送并确认 A端 发送syn1 同步序列号给 B端&#xff0c;请求建立连接 B端 收到syn请求后&#xff0…

计算机网络-ICMP和ARP协议——沐雨先生

实验内容 改进实验5的TcpFileServer.java代码&#xff0c;使其能在Dos命令窗口执行&#xff1b;改进实验5的TcpFileClient.java代码&#xff0c;使其能在Dos命令窗口执行&#xff1b;利用Wireshark查看和分析ICMP消息&#xff1b;利用Wireshark查看和分析ARP请求和响应。 基本…

谷歌建站用什么程序比较好?

建网站这回事&#xff0c;说容易也容易&#xff0c;现如今市面上建站的程序多如牛毛&#xff0c;哪怕你不会代码也能建一个漂亮的网站&#xff0c;但网站搭建出来是为了什么&#xff1f;是为了获取流量&#xff0c;拉到业务&#xff0c;那么&#xff0c;建站的时候你就要考虑谷…

力扣记录 4.8

50. Pow(x, n) 递归&#xff1a; 终止条件&#xff1a;x0 1&#xff0c;n1 递归主体&#xff1a;xn x**(n//2) * x**(n//2) 在N为偶数时&#xff1b;奇数时需要单独拎出来一个x1&#xff0c;使得也能两个一半相乘 分解问题&#xff1a;每个xn都可以表示为两个x**n的一半 cl…

如何使用校园网——Win10笔记本,台式机互开热点

当我们使用校园网的时候&#xff0c;往往只能连接一个电脑端&#xff0c;但是又想两个机子同时连接WIFI怎么办呢&#xff1f; 当然&#xff0c;前提条件是你先得其中一台电脑有网络哈 1、打开想开共享热点的电脑的设置 A、点击WIN&#xff0c;再点击设置 2、点击网络和Inte…

JavaScript - 请你说一说对随机数的理解

难度级别:初级及以上 提问概率:40% 在前端开发中,随机数的应用场景非常多,而且也是一个常见的考点。例如网页登录的验证码,看似只有4个随机数字加字母的组合,其实这也是随机数的范畴;例如在抽奖算法中,可以用随机数确定用户中奖的概率…

TCP 三次握手与四次挥手面试题(计算机网络)

TCP 基本认识 TCP 头格式有哪些&#xff1f; 序列号&#xff1a;在建立连接时由计算机生成的随机数作为其初始值&#xff0c;通过 SYN 包传给接收端主机&#xff0c;每发送一次数据&#xff0c;就「累加」一次该「数据字节数」的大小。用来解决网络包乱序问题。 确认应答号&a…

Element Plus 表单校验

原理 为 rules 属性传入约定的验证规则&#xff0c;并将 form-Item 的 prop 属性设置为需要验证的特殊键值:model和:rules中字段的名称需要一致 示例&#xff1a; <template><el-form ref"ruleFormRef" :model"ruleForm" :rules"rules&q…

Spring Security——13,认证成功失败注销成功处理器

认证成功&&失败&&注销成功处理器 说明&#xff1a;一、认证成功处理器1.1 自定义成功处理器1.2 配置自定义成功处理器 二、认证失败处理器2.1 自定义失败处理器2.2 配置自定义失败处理器 三、登出成功处理器3.1 自定义登出处理器3.2 配置登出处理器 四、完结撒…

Excel全套213集教程

Excel全套213集教程 包含技术入门93集 图表17集 数据透视35集 公式函数68 基础入门 93节 https://www.alipan.com/s/cMxuPstkS1x 提取码: 77dd 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视…

【C语言】if语句选择题

前言 题目一&#xff1a; 题目二&#xff1a; 题目三&#xff1a; 题目四&#xff1a; 题目五&#xff1a; 题目六&#xff1a; 题目七&#xff1a; 题目八&#xff1a; 前言 关于if语句相关的选择题 题目一&#xff1a; 关于if语句说法正确是&#xff1a;( ) A .if语…

gitlab使用

个人笔记&#xff08;整理不易&#xff0c;有帮助点个赞&#xff09; 笔记目录&#xff1a;学习笔记目录_pytest和unittest、airtest_weixin_42717928的博客-CSDN博客 个人随笔&#xff1a;工作总结随笔_8、以前工作中都接触过哪些类型的测试文档-CSDN博客 目录 一&#xff1a…

C语言中的pow()和floor()

C语言中的pow()函数用于计算一个数的指数幂。 首先&#xff0c;要使用pow()函数&#xff0c;需要包含头文件<math.h>。这是因为pow()函数是在数学库中定义的&#xff0c;所以需要通过包含相应的头文件来访问它。 其次&#xff0c;pow()函数的原型是double pow(double x…