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

CSS引入方式(本文为个人学习笔记,内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 > 所有知识点归属原作者,仅作非商业用途分享)

CSS引入方式

内联样式(行内样式)

  • 要使用内联样式,需要在相关的标签内使用样式(style)属性,
  • style属性可以包含任何CSS属性

注意事项:

1.该引入方式缺乏整体性和规划性,不利于维护,维护成本高
2.意思就是:当有多行相同的标签时,如果采用内联样式,一个一个添加及其费时间,后面改样式(维护)还要一个一个找,成本太高。
如:<span style=“packground:orange;font-size:24px;”>CSS内联样式</span>
CSS内联样式演示
在这里插入图片描述

内部样式

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

温馨提示:

1.单个页面内的CSS代码具有统一性和规划性,便于维护,但是在多个页面之间容易混乱
2.具体意思就是:在一个html文件当中,使用内部样式的好处是在同一选择器下,作用于全部标签,
3.但是当不在同一个html文件下,要想编辑同一种样式,就只能全部复制到新的html,head标签内,
4.当文件太多的时候,要想修改样式,就要一个一个修改,效率底下,到后面改的大脑混乱。

<head><style>p{color:green;font-size:25px;}</style>
</head>
没有使用内部样式时:

在这里插入图片描述

使用内部样式时:
  • 当在head标签内先建立style标签,并在其内部添加样式,是整个页面的P标签同时添加样式,就不用想内联样式一样逐个添加,省下非常多的时间,[且便于当前html文件的维护]
    在这里插入图片描述

外部样式[非常推荐]

  • 当样式需要应用于很多页面时,外部样式表时理想的选择。
  • 在使用外部样式表的情况下,可以通过改变一个文件(css)来改变整个网页的外观
  • 每个页面使用<link>标签链接到样式表。
  • <link>标签在文档头部(即在<head>标签内部)
  • 语法:<link rel=“stylesheet” href=“url”>
    • rel="stylesheet"是于声明标签固定的,不可缺少,url指的是CSS文件具体路径。
在外部建立CSS文件,并编辑样式

在这里插入图片描述

引入CSS文件,查看具体效果

在这里插入图片描述

总结

  • 内联样式(行内样式):

    1. 需要建立在首标签内,加入style属性和双引号,所有样式均在style内生效(可以多次声明,每个声明由分号隔开)。
    2. 优点:可以利用选择器优先级(最高),单独添加样式,不受其他选择器影响。
    3. 缺点(不推荐):当标签过多,需要多次建立,极为繁琐,后续修改工作量巨大,难以维护。
  • 内部样式:

    1. 需要建立在头部(head)标签内,加入style标签(双标签),然后加入选择器及大括号,所有样式均在大括号内有效。(可以多次声明每个声明后面必须加分号且独占一行)
    2. 开发单个网页够用,但还是建议用外部样式。
    3. 优点:内部样式所添加的样式,对整个页面均生效,也就是说,不用再单独在标签内添加样式,后面修改样式简单,在当前页面便于维护
    4. 缺点:当网页过多,又需要同一个样式,然后每个网页修改样式,工作量剧增,且容易出错
  • 外部样式(非常推荐):

    1. 需要在文件外新建一个CSS文件,在文件内编写样式,然后通过link标签引入样式。
    2. link标签在头部标签内部,关键在记住语法。
    3. 优点:可以反复使用,建立了一个CSS文件,在所有网页均可引入,而且更改后,被引入的网页,同时发生更改,非常方便,对要使用同一样式的网页非常友好,且易于维护。
http://www.dtcms.com/a/535755.html

相关文章:

  • SuperMap iObjects .NET 11i 二次开发(十六)—— 叠加分析之合并
  • 【Linux笔记】网络部分——传输层协议UDP
  • Ansible 自动化项目结构与 Harbor 安装示例(基于 kubeasz)①
  • Spring 源码学习(十五)—— HandlerMethodReturnValueHandler
  • everviz 数据可视化平台
  • 12 U盘挂载
  • 【Kylin Linux root 密码故障处置指南(超限重试 + 改回原密码)】
  • 网络原理:数据链路层、NAT与网页加载
  • 【从零开始开发远程桌面连接控制工具】01-项目概述与架构设计
  • 网站建设竞价托管什么意思在国内做推广产品用什么网站好
  • 有没有做宠物的网站网站开发中间商怎么做
  • 深度强化学习 | 详解从信赖域策略优化(TRPO)到近端策略优化(PPO)算法原理
  • 在类中定义装饰器:Python高级元编程技术详解
  • [C++][正则表达式]常用C++正则表达式用法
  • 基于大数据的短视频数据分析系统 Spark哔哩哔哩视频数据分析可视化系统 Hadoop大数据技术 情感分析 舆情分析 爬虫 推荐系统 协同过滤推荐算法 ✅
  • 参考抖音推荐算法的功能:不同用户规模的推荐技术框架
  • 深入理解C语言scanf函数:从基础到高级用法完全指南
  • 检测相邻递增子数组1 2(LeetCode 3349 3350)
  • 《算法闯关指南:优选算法--前缀和》--25.【模板】前缀和,26.【模板】二维前缀和
  • 快速搭建网站2020缅甸新闻最新消息
  • 搜索网站做推广全网推广平台推荐
  • 仓颉编程(16)泛型类型
  • 「小有可为」AI 开源公益创新挑战赛
  • 《 Linux 点滴漫谈: 四 》文件权限与用户管理
  • 评估虚拟机资源规划
  • 深入理解 SO_REUSEADDR:从“Address already in use”到服务器瞬间重启
  • 机器人中的多模态——RoboBrain
  • MySQL 8.0.x 全平台安装指南:Windows、CentOS、Ubuntu 详细步骤与问题解决
  • YOLO!!
  • 电子电气架构 --- 汽车座舱行业背景综述