Web前端笔记-2、CSS基础-基础选择器、文字控制属性、复合选择器、层叠性、优先级、Emmet语法

布局设计思路

布局先画好盒子，然后填充内容。

拿到一个效果，先看盒子的结构如何。
盒子结构清楚后，先画大盒子，养成习惯，先添加宽高背景色，看到盒子正确显示。
大盒子设置好，再设置小盒子，添加宽高背景色，正确显示后，再考虑盒子的位置(flex,margin,padding)。
小盒子没问题，再填充内容。

基础选择器

作用：查找标签，设置样式。

层叠样式表（Cascading Style Sheets，缩写为CSS），是一种样式表语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 签下方添加 style 双标签，style 标签里面书写CSS 代码。

规则：选择器 {属性名:属性值;}

CSS引入方式

内部：style标签

外部样式：.css 用link标签，rel="stylesheet" herf=".css的URL"

行内样式：在标签加属性style，适合于少量的样式，通常配合js使用。

画盒子

目标：使用合适的选择器画盒子。

拿到一个盒子，先定宽高背景色。

宽：w100，回车，就是width:100px;

高：h100

背景色：bgc

w100+h20+bgc

文字控制属性

字体大小：font-size，chrome默认是16，PC 端网页最常用的单位 px。fz38

字体粗细：font-weight，bold 700,normal 400，提倡用数字。

字体倾斜：font-style，不倾斜 normal,倾斜 itatic

行高：line-height，lh设置多行文本的间距。数字 +px 或者数字（当前标签font-size属性值的倍数）。借助于行高，可以实现单行垂直居中：行高属性值等于盒子高度属性值。

字体族：font-family：字体,font-fa mily属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。font-family 属性最后设置一个字体族名，网页开发建议使用无衬线字体。

字体复合属性：font。严格按照顺序：是否倾斜是否加粗字号/行高字体。 font: itatic 700 30px/2 楷体;只有两个必须写，字号和字体，其他可以不写。

文本缩进：text-indent ti，数字+px 或者数字+em（推荐：1em = 当前标签的字号大小）

文本对齐：text-align，left center right tac。text-align本质是控制内容的对齐方式，属性要设置给内容的父级。

修饰线：text-decoration，td。none无，underline下划线，line-through删除线，overline上划线。

颜色：color。开发常使用的：rgba(r, g, b, a)实现透明色a在0-1之间和 #RRGGBB 16进制表示

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成。

作用：更准确、更高效的选择目标元素（标签）。

后代选择器

后代选择器：选中某元素的后代元素。

选择器写法：父选择器子选择器{CSS 属性}，父子选择器之间用空格隔开。

<style>
  div span {
    color:#ff6700;
  }
</style>

<div>
  <span>我是儿子</span>
  <p>
    <span>我是孙子</span>
</p>

上述代码会同时将儿子和孙子变色。

在代码执行时，先去找子，再找父。

子代选择器

子代选择器：选中某元素的子代元素（最近的子级）。

选择器写法：父选择器＞子选择器｛CSS 属性｝，父子选择器之间用＞隔开。

并集选择器

并集选择器：选中多组标签，设置相同的样式。

div, span, p {}

交集选择器

选中同时满足多个条件的元素。

div.red {}

既是div标签，又有red类名。

伪类选择器

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover{CSS 属性}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    a {
      color: #333;
      text-decoration: none;
    }

    a:hover {
      color: orange;
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <a href="#">点击一下</a>
</body>
</html>

链接伪类

超链接一共有四个状态

选择器

:link：访问前

:visited：访问后

:hover：鼠标悬停

:active：点击时（激活）

四个状态不能颠倒顺序。

CSS特性

继承性，层叠性，优先级

继承性：文字属性继承，盒子属性不继承。特殊：链接的颜色不继承。

层叠性

相同的属性会覆盖：后面的CSS 属性覆盖前面的CSS 属性

不同的属性会叠加：不同的CSS 属性都生效

优先级

优先级：也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

公式：通配符选择器＜标签选择器＜类选择器＜id选择器＜行內样式<！important

（选中标签的范围越大，优先级越低）

叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算。

公式：（每一级之间不存在进位）权重值累加

（行内样式，id选择器个数，类选择器个数，标签选择器个数）=（1000， 100， 10， 1）

规则：

• 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

• ！important 权重最高

• 继承权重最低，为0。通配符也为0。

Emmet语法

Emmet写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

在HTML里：

类选择器 标签名.类名

id选择器 标签名#id名

同级标签 div+p

父子级标签 div>p

多个相同标签 span*n

有内容的标签 div{aaaaa}

在CSS里：

CSS：大多数简写方式为属性单词的首字母

posted @ 2025-05-15 20:22 subeipo 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

苏北坡