05.CSS前言

2023-12-15 04:46:33

CSS前言

1.CSS产生背景

  • 从 HTML 被发明开始,样式就以各种形式存在,最初的 HTML 只包含很少的显示属性
  • 随着 HTML 的成长,为了满足页面设计者的要求,HTML 添加了很多显示功能,例如文本格式化标签
  • 但是随着这些功能的增加,HTML 变的越来越杂乱,而且 HTML 页面也越来越臃肿

2.CSS介绍

CSS 的全称为:层叠样式表 ( Cascading Style Sheets )

CSS 也是一种标记语言,用于给 HTML 结构设置样式,例如:文字大小、颜色、元素宽高等等

3.CSS发展过程

在这里插入图片描述

4.CSS的编写位置

总览

  1. 行内样式
  2. 内部样式
  3. 外部样式

行内样式

介绍

写在标签的 style 属性中,(又称:内联样式)

语法
<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>
注意
  • style 属性的值不能随便写,写要符合 CSS 语法规范,是 k:v; 的形式
  • 行内样式表,只能控制当前标签的样式,对其他标签无效
存在的问题

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

内部样式

介绍

写在 html 页面内部,将所有的 CSS 代码提取出来,单独放在

语法
<style>
    h1 {
        color: red;
        font-size: 40px;
    }
</style>
注意点
存在的问题
  • 并没有实现:结构与样式完全分离
  • 多个 HTML 页面无法复用样式

外部样式

介绍

写在单独的 .css 文件中,随后在 HTML 文件中引入使用

语法
<link rel="stylesheet" href="./xxx.css">
注意点
  • 标签要写在 标签中

总结

在这里插入图片描述

CSS编写位置的优先级

在这里插入图片描述

5.CSS语法规范

组成

CSS 语法规范由两部分构成:

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

图示

在这里插入图片描述

注意

  1. 最后一个声明后的分号理论上能省略,但最好还是写上
  2. 选择器与声明块之间,属性名与属性值之间,均有一个空格,理论上能省略,但最好还是写上

注释的写法

/* 给h1元素添加样式 */

6.CSS代码风格

总览

  1. 展开风格:开发时推荐,便于维护和调试
  2. 紧凑风格:项目上线时推荐,可减小文件体积

展开风格

h1 {
    color: red;
    font-size: 40px;
}

紧凑风格

h1{color:red;font-size:40px;}

备注

项目上线时,我们会通过工具将【展开风格】的代码,变成【紧凑风格】,这样可以减小文
件体积,节约网络流量,同时也能让用户打开网页时速度更快

比如 webpack 这类的工具

7.长度单位

总览

  1. px:像素
  2. em:相对元素 font-size 的倍数
  3. rem:相对根字体大小,html标签就是根
  4. %:相对父元素计算
  5. 注意:CSS 中设置长度,必须加单位,否则样式无效

像素

介绍

像素是 CSS 的长度单位,也就是 px,当然不只有 px

我们的电脑屏幕是,是由一个一个“小点”组成的,每个“小点”,就是一个像素(px)

规律

像素点越小,呈现的内容就越清晰、越细腻

8.元素的显示模式

块元素

  • 在页面中独占一行,不会与任何元素共用一行,是从上到下排列的
  • 默认宽度:撑满父元素
  • 默认高度:由内容撑开
  • 可以通过 CSS 设置宽高

行内元素

  • 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
  • 默认宽度:由内容撑开
  • 默认高度:由内容撑开
  • 无法通过 CSS 设置宽高

行内块元素

  • 在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
  • 默认宽度:撑满父元素
  • 默认高度:由内容撑开
  • 可以通过 CSS 设置宽高

注意

元素早期只分为:行内元素、块级元素,区分条件也只有一条:“是否独占一行”,如果按照这种
分类方式,行内块元素应该算作行内元素

常见的块元素

常见的行内元素

常见的行内块元素

修改元素的显示模式

通过 CSS 中的 display 属性可以修改元素的默认显示模式,常用值如下:

9.CSS三大特性

层叠性

介绍

如果发生了样式冲突,那就会根据一定的规则(选择器优先级),进行样式的层叠(覆盖)

什么是样式冲突

元素的同一个样式名,被设置了不同的值,这就是冲突

继承性

介绍

元素会自动拥有其父元素、或其祖先元素上所设置的某些样式

能继承的属性,都是不影响布局的,简单说:都是和盒子模型没关系的

规则

优先继承离得近的

注意

不是所有属性都能继承,具体参考 MDN 网站

CSS优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式

文章来源:https://blog.csdn.net/weixin_43891622/article/details/134986944
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。