【零基础入门前端系列】—CSS介绍(九)

news2024/11/19 0:38:14

【零基础入门前端系列】—CSS介绍(九)

一、为什么需要CSS?

使用Css的目的就是让网页具有美观一致的页面, 另外一个最重要的原因是内容与格式
分离
,在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义
样式属性。

当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要
逐个修改,费心费力。是时候做出改变了,所以CSS就出现了。

二、CSS的概念

CSS(Cascading Style Sheets)层叠样式表,又叫级联样式表,简称样式表。

🎈CSS的作用

  • 用于HTML文档中元素样式的分离
  • 实现了将内容与表现分离
  • 提高代码的可重用性和可维护性

🎈🎈CSS的文件后缀:.css

🎈🎈🎈CSS的特点:

  • 继承性:子元素可以继承父元素的样式
  • 层叠性:一个元素可以设置多个样式
  • 优先级:优先级大的样式生效,优先级相同,后写的样式生效

CSS的语法:属性:属性值

在这里插入图片描述

在这里插入图片描述

三、CSS的引入方式

(1)、内联样式
在这里插入图片描述
在这里插入图片描述

(2)、内部样式
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用<style> 标签在文档头部定义内部样式表

特点:单个页面内的CSS代码具有统一性和规划性, 便于维护,但是在多个页面之间容易混乱, 只在当前页面生效
在这里插入图片描述

在这里插入图片描述

引入样式的优先级:行内样式>内部样式;内部样式和外部样式的优先级相同,写在后面的生效。

一个CSS文件可以被多个HTML文件引入,一个HTML文件可以引入多个CSS文件

(3)、外部样式(实现了内容与表现的完全分离提高了代码的可重用性和可重复性)

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。 每个页面使用<link> 标签链接到样式表。<link> 标签在(文档的)头部: .
在这里插入图片描述

(4)、导入式
在这里插入图片描述
在这里插入图片描述

@import和link的区别?

  • @import是CSS提供加载样式的一种方式,只能用于加载CSS。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义rel连接属性等。
  • 加载顺序的差别。当一个页面被加载的时候,link
    引用的CSS会同时被加载,@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候会比较明显。
  • 兼容性的差别。@import在IE5以上才能识别,而link标签无此问题。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为dom操作元素的样式时,用@import方式的样式也许还未加载完成。
  • 使用@import方式会增加HTTP请求,会影响加载速度,所以谨慎使用该方法。
    在这里插入图片描述

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

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

相关文章

用户认证-cookie和session

无状态&短链接 短链接的概念是指&#xff1a;将原本冗长的URL做一次“包装”&#xff0c;变成一个简洁可读的URL。 什么是短链接-> https://www.cnblogs.com/54chensongxia/p/11673522.html HTTP是一种无状态的协议 短链接&#xff1a;一次请求和一次响应之后&#…

女生可以参加IT培训吗?

2023年了&#xff0c;就不要把性别当作选择专业的前提条件了。虽然这句话说过很多次了&#xff0c;作为IT行业来说&#xff0c;是非常欢迎女生的加入&#xff1b;尤其是整天都是面对一大堆男攻城狮&#xff0c;工作氛围一点都不活跃&#xff0c;反而显得压抑和杂乱&#xff0c;…

在Windows上安装Scala

文章目录Windows上安装Scala&#xff08;一&#xff09;到Scala官网下载Scala&#xff08;二&#xff09;安装Scala安装向导&#xff08;三&#xff09;配置Scala环境变量&#xff08;四&#xff09;测试Scala是否安装成功1、查看Scala版本2、启动Scala&#xff0c;执行语句Win…

什么是装运单IFTMIN?

符合EDIFACT国际报文标准的IFTMIN主要用于传输电子运输订单&#xff0c;这些装运单作为EDI数据交换的一部分&#xff0c;由客户或托运人发送给物流服务提供商。通过EDI传输的运输信息可以被用来计划当前所需的运输能力&#xff0c;并且物流服务提供商也可以据此提前将包装材料准…

【正点原子FPGA连载】第十一章PL SYSMON测量输入模拟电压 摘自【正点原子】DFZU2EG_4EV MPSoC之嵌入式Vitis开发指南

1&#xff09;实验平台&#xff1a;正点原子MPSoC开发板 2&#xff09;平台购买地址&#xff1a;https://detail.tmall.com/item.htm?id692450874670 3&#xff09;全套实验源码手册视频下载地址&#xff1a; http://www.openedv.com/thread-340252-1-1.html 第十一章PL SYSM…

使用注意力机制的seq2seq

注意力机制在NLP中的应用&#xff0c;是早期工作之一 1.为什么使用注意力机制 ①在机器翻译的时候&#xff0c;每个生成的词可能相关于源句子不同的词 ②语言翻译的时候&#xff0c;中英文存在倒装句&#xff0c;几个相同意思的句子中的词的位置可能近似的对应。翻译句子某部分…

Lp正则化

一、L1 和 L2范数&#xff08;norm&#xff09;A norm is a mathematical thing that is applied to a vector. The norm of a vector maps vector values to values in [0,∞). In machine learning, norms are useful because they are used to express distances: this vect…

DataWhale-统计学习方法打卡Task01

学习教材《统计学习方法&#xff08;第二版&#xff09;》李航 统计学习方法&#xff08;第2版&#xff09; by...李航 (z-lib.org).pdf https://www.aliyundrive.com/s/maJZ6M9hrTe 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无…

论文笔记:NeuLF: Efficient Novel View Synthesis with Neural 4D Light Fight

中文标题&#xff1a;基于神经4D光场的高效新视角合成 创新点 在我们的方法中&#xff0c;一个3D场景被表示为一个光场&#xff0c;即一组射线&#xff0c;每条射线在到达图像平面时都有相应的颜色。为了实现高效的新视图渲染&#xff0c;我们采用了光场的双平面参数化&#…

JAVA实现心跳检测【长连接】

文章目录1、心跳机制简介2、心跳机制实现方式3、客户端4 、服务端5、代码实现5.1 KeepAlive.java5.2 MyClient.java5.3 MyServer5.4 测试结果1、心跳机制简介 在分布式系统中&#xff0c;分布在不同主机上的节点需要检测其他节点的状态&#xff0c;如服务器节点需要检测从节点…

Git 介绍和使用

文章目录前言1、Git 安装和使用2、Git 工作区域和状态3、Git 常用指令3.1、Git 参数配置3.2、Git 本地仓库3.3、Git 远程仓库3.4、分支前言 Git 是一个免费&#xff0c;开源的分布式版本控制系统&#xff0c;可以敏捷高效的进行各种规模大小的版本管理。Git 与 SVN 的二者最核心…

ChatGPT到底是什么

ChatGPT到底是什么 我将在这里尝试解释清楚 ChatGPT 到底什么。 对于非常了解和非常熟悉 ChatGPT 的朋友&#xff0c;这篇推文您可以跳过不看&#xff01; ChatGPT 在全球互联网上制造了一场人工智能风暴。 ChatGPT是什么&#xff1f; ChatGPT是由OpenAI开发的一个人工智能聊…

Golang-数组与切片常见错误及陷阱

数组与切片有什么区别 slice 的底层数据是数组&#xff0c;slice 是对数组的封装&#xff0c;它描述一个数组的片段。两者都可以通过下标来访问单个元素。 数组是定长的&#xff0c;长度定义好之后&#xff0c;不能再更改。在 Go 中&#xff0c;数组是不常见的&#xff0c;因…

Zabbix 3.0 从入门到精通(zabbix使用详解)

Zabbix 3.0 从入门到精通(zabbix使用详解) 第1章 zabbix监控 1.1 为什么要监控 在需要的时刻&#xff0c;提前提醒我们服务器出问题了 当出问题之后&#xff0c;可以找到问题的根源 网站/服务器 的可用性 1.1.1 网站可用性 在软件系统的高可靠性&#xff08;也称为可用性…

css复习

CSS 最大价值: 由 HTML 专注去做结构呈现&#xff0c;样式交给 CSS&#xff0c;即 结构 ( HTML ) 与样式( CSS ) 相分离。 CSS 规则由两个主要的部分构成&#xff1a;选择器以及一条或多条声明。 代码风格&#xff1a; ①属性值前面&#xff0c;冒号后面&#xff0c;保留一个空…

Java基础:异常与错误(ExceptionError)

1 缘起 某天上网冲浪时&#xff0c;偶然看到一个问题&#xff0c;说Java的Error和Exception有什么区别&#xff1f; 一句话&#xff1a;不知道。并不能很清晰地描述出个中区别。 当然&#xff0c;曾经也看过Throwable相关的知识&#xff0c;但是&#xff0c;并没有通过源码及注…

Java递归问题

3 递归 3.1 递归基础 递归概述&#xff1a;以编程的角度来看&#xff0c;递归指的是方法定义中调用方法本身的现象递归解决问题的思路&#xff1a; 把一个复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解递归策略只需少量的程序就可描述出解题过程所需要的多次重…

CHAPTER 3 Zabbix Grafana

Zabbix & Grafana3.1 Grafana简介3.2 安装grafana3.3 启动grafana3.4 登录控制台3.5 链接zabbix1.安装zabbix插件2.启用插件3.链接数据源4.导入仪表盘5.创建仪表板6.创建仪表盘7.添加自建监控项8.监控信息3.1 Grafana简介 Grafana是一款开源的数据可视化工具&#xff0c;使…

多商户java版小程序+公众号+h5+app秒杀拼团砍价分销商城源码

三勾多商户商城小程序、支持多端发布&#xff0c;一套代码发布到8个平台&#xff0c;面向开发&#xff0c;方便二次开发 项目介绍 三勾多商户小程序商城基于springbootelement-uiuniapp打造的面向开发的小程序商城&#xff0c;方便二次开发或直接使用&#xff0c;可发布到多端&…

做软文发布需要注意哪些细节?

软文发布是一种有效的网络营销和推广活动&#xff0c;它以媒体等形式把产品信息植入到软文报道或新闻中&#xff0c;进行心理暗示和引导销售&#xff0c;进行正面宣传以及促进销售的新型网络营销方式&#xff0c;它不但能够有效地推行产品宣传、也能有效地提高网络曝光率&#…