CSS基本概念以及CSS的多种引入方式

CSS基本概念

CSS是层叠样式表,又叫级联样式表,简称样式表。CSS的文件后缀为.css,CSS用于HTML文档中元素样式的定义。

CSS的基本语法

CSS的规则由2个主要的部分构成:选择器以及一条或者多条声明。

选测器通常是你血药改变样式的HTML元素。每条声明由一个属性和一个值组成。

css 复制代码
   h3{
            font-size: 20px;
        }

CSS的多种引入方式

内联样式

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

注意:此样式缺乏整体性和规划性,不利于维护,维护成本较高。

html 复制代码
 <h3 style="font-size: 20px;">标题</h3>

内部样式

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

注意:单个页面的CSS代码具有统一性和规划性,便于维护,但时在多个页面之间容易混乱。

css 复制代码
  <style>
        h3{
            font-size: 20px;
        }
    </style>

外部样式

当样式需要应用于多个页面时,外部样式表将时理想的选择,在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。<link>标签在文档的<head>标签内。

html 复制代码
 <link rel="stylesheet" href="H5.css">

href属性用于链接外部CSS文件。

相关推荐
be or not to be17 小时前
CSS 背景(background)系列属性
前端·css·css3
冴羽18 小时前
CSS 新特性!瀑布流布局的终极解决方案
前端·javascript·css
牛奶皮子19 小时前
合并 CSS 文件可以减少 HTTP 请求数,因为每个请求都会带来额外的网络开销
css·网络·http
幻影星空VR元宇宙1 天前
9D裸眼轨道影院投资多少钱与5D动感影院设备的市场潜力分析
css·百慕大冒险·幻影星空
proud12121 天前
使用thymeleaf生成PDF方案
javascript·css·pdf
霍理迪1 天前
CSS——背景样式以及雪碧图、渐变
前端·css
wordbaby2 天前
Flexbox 布局中的滚动失效问题:为什么需要 `min-h-0`?
前端·css
前端小黑屋2 天前
查看 Base64 编码的字体包对应的字符集
前端·css·字体
hqwest2 天前
码上通QT实战04--主窗体布局
开发语言·css·qt·布局·widget·layout·label
狗哥哥2 天前
企业级 Vue3 + Element Plus 主题定制架构:从“能用”到“好用”的进阶之路
前端·css·架构