【前段基础入门之】=>玩转【CSS】开篇章!

在这里插入图片描述

在这里插入图片描述

CSS 的简介:

层叠样式表(Cascading Style Sheets,缩写为 CSS)是一种样式表语言,用来描述 HTML XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

  • 简单理解:CSS可以美化HTML结构,让HTML更加富有色彩化
  • 核心思想HTML 搭建结构, CSS 添加样式,实现了:结构与样式的分离

CSS的编写位置

行内样式

  • 写在标签的 Style 属性中,(又称为:内联样式)
<h1 style="color: red;font-size: 25px;font-weight: bold;">CSS层叠样式表</h1>

值得注意

  1. Style 属性的值不能随便写,写要符合 CSS 语法规范,是 名:值; 的格式
  2. 行内样式表,只能控制当前书写的标签载体的样式,对其他标签无效

缺点:书写繁琐、样式不能复用、并且没有体现出:结构与样式分离 的思想,不推荐大量使用,只有对当前元素添加简单样式时,才偶尔使用。


内部样式

  • 写在 HTML 页面内部,将所有的 CSS 代码提取出来,单独放在 <Style> 标签中。
  • 语法结构:
<style>
    h1 {
        color: red;
        font-size: 25px;
        font-weight: bold;
    }
</style>

值得注意

  1. <style> 标签理论上可以放在 HTML 文档的任何地方,但一般都放在 <head> 标签中。
  2. 此种写法:样式可以复用、代码结构清晰。

缺点:

  • 并没有实现:结构与样式完全分离
  • 多个 HTML 页面无法复用样式。

外部样式

  • 写在单独的 .css 文件中,随后在 ``文件中引入使用。
  • 语法:在页面外部新建一个扩展名为 .css 的样式文件,把所有CSS代码都放入此文件中
h1 {
    color: red;
    font-size: 25px;
    font-weight: bold;
}

在这里插入图片描述

  • HTML 文件中引入 css 文件。
<link rel="stylesheet" href="./xxxx.css">

值得注意
在这里插入图片描述


样式表的优先级

  • 优先级的规则:行内样式 > (内部样式 = 外部样式)

值得注意

  1. 内部样式、外部样式,这二者的优先级相同,且:后面的会覆盖 前面的(简记:“后来者居上”)。
  2. 同一个样式表中,优先级也和编写顺序有关,且:后面的会覆盖 前面的(简记:“后来者居上”)。
分类优点缺点使用频率作用范围
行内样式优先级最高结构与样式未分离;代码结构混乱;样式无法复用很低当前载体标签
内部样式样式可复用;代码结构清晰结构与样式未彻底分离;样式不能多页面复用一般当前HTML页面
外部样式样式可复用;代码结构清晰;可触发浏览器缓存机制;结构与样式彻底分离;需要引入才能使用最高多个页面

CSS语法规范:

CSS语法规范由两部分构成

  • 选择器:找到要添加样式的元素。
  • 声明快:设置具体的样式(声明块是由一个或多个声明组成的)声明的格式为: 属性名: 属性值;

在这里插入图片描述


总结:

本章节我们介绍了有关 CSS的简介,以及一些有关CSS的语法规范和风格结构。下一章节我们将继续探讨CSS的更多知识。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

旧梦星轨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值