CSS引入方式、元素显示模式、三大特性

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档

CSS引入方式

行内样式表(内联式)

  • 在元素标签内部style属性中设定css样式
  • 没有体现出结构与样式分离，容易混乱，只用于简单的样式设定

内部样式表(嵌入引入)

  • 一般在<head>部分的<style>元素标签中定义css样式
  • 可以方便的控制当前页面的样式，代码清晰，但没有完全实现结构与样式分离

外部样式表(链接式)

  • 所有样式单独写在css文件中，再由html中<link>引入
  • 外部样式表可以在任何文本编辑器中编写，以.css扩展名保存
  • 实现了结构与样式完全分离，方便复用及维护，减少html文件的内容
  • .css文件不应包含任何html标签
  • 不要在css文件内打开浏览器预览, 浏览器打开的是html文件, 打开前两个文件都要保存
  • 建议创建一个专用来存放CSS文件的文件夹

层叠顺序

页面中的所有样式将按照以下规则“层叠”为新的“虚拟”样式表，其中第一优先级最高：

  • 1.行内样式（在 HTML 元素中）
  • 2.外部和内部样式表（在 head 部分）
  • 3.浏览器默认样式
    因此，行内样式具有最高优先级，并且将覆盖外部和内部样式以及浏览器默认样式

元素显示模式

块级元素

  • 是一个容器/盒子，内部可以容纳其他行内或块级元素(<h1>-<h6>、

    等文字类例外)，一个块级元素独占一行

  • 常见块级元素：<h1>-<h6>、<p>、<div>、<ul>、<ol>、<li> ...
  • 可以设置宽高，内外边距，默认宽度是父级容器宽度的100%

行内元素

  • <a> <strong> <b> <em> <i> <del> <span>...
  • 相邻元素在同一行内，一行可以显示多个
  • 宽高设置无效，默认宽度就是其内容的宽度
  • 内部只能容纳文本或其他行内元素(但a链接内不能再放链接)

行内块元素

  • <img />、<input>等特殊标签，同时具有块级和行内元素的特点
  • 相邻元素在同一行内，一行可以显示多个，相邻元素之间会有空隙
  • 默认宽度就是其内容的宽度
  • 可以设置宽高，内外边距

显示模式转换

特殊情况下，需要元素模式的转换(一个模式的元素需要另一个模式的特性，比如a链接想要增加触发范围

display:block;  /* 转换为块元素 */
display:inline;  /* 转换为行内元素 */
display:inline-block;  /* 转换为行内块元素 */
  • block: 块 line: 行 Inline: 在一行内
  • 转换为行内块或块级元素之后宽高设置有效
  • 转换成行内元素后，宽高设置失效

特性

层叠性

  • 同一个选择器内设置相同的样式，其中一个会覆盖(层叠)另一个冲突的样式，以后面设置的样式为准
  • 样式冲突时, 浏览器调试界面状态，被覆盖的样式会被画上删除线

继承性

  • 子标签会继承父标签的某些样式，如文本颜色和字号

优先级与权重

  • 同一个元素指定多个选择器，就会有优先级的产生

  • 选择器相同时，执行层叠性

  • 选择器不同时，根据选择器权重执行，权重低的样式会被权重高的覆盖

  • 权重相同时后写的会覆盖先写的样式 就近原则

  • 选择器权重

选择器 选择器权重
继承、通配符选择器 0,0,0,0
标签选择器 0,0,0,1
类选择器、伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式 1,0,0,0
！important(重要的) 最高权重

  • 复合选择器需要计算权重

    • 算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高
    • 权重由 4 组数字组成,计算权重不会进位

  • !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

  • !important的优先级是最高的，但出现冲突时则需比较”四位数“

  • 继承得来的属性，不管其父元素优先级多高，其优先级最低

  • css选择器使用强烈建议采用低权重原则，利于充分发挥css的继承性，复用性，模块化、组件化

  • 简洁、高效的css

    • 所谓高效就是让浏览器查找更少的元素标签来确定匹配的style元素。
    • 不要再ID选择器前使用标签名，ID选择是唯一的，加上标签名相当于画蛇添足了，没必要。
    • 不要在类选择器前使用标签名，如果没有相同的名字出现就是没必要，但是如果存在多个相同名字的类选择器则有必要添加标签名防止混淆如（p.colclass{color：red;} 和 span.colclass
    • 尽量少使用层级关系，如：#divclass p.colclass{color:red;}改为 .colclass
    • 使用类选择器代替层级关系（如上）
posted @   ChiseledPumpkin  阅读(68)  评论(0)  编辑  收藏  举报
相关博文：
·  CSS选择器
·  CSS部分属性及分类
·  2022-07-10 第四小组 孙翰章 学习笔记
·  长春人文学院第四组孙乃宇https://www.cnblogs.com/sunnaiyu/css
·  css层叠样式表
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示