理解CSS(上)|青训营笔记

桂圆栗子炒饭
122 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第3天~

一、本堂课重点内容

1.什么是CSS？

CSS全称Cascading Style Sheets(层叠样式表)， 用来定义页面元素的样式。

  1. 设置字体和颜色
  2. 设置位置和大小
  3. 添加动画效果

CSS代码部分主要由选择器（Selector）、属性（Property）和属性值（ Value）构成。其中属性名和属性值构成声明（ Declaration），用分号隔开每条声明。

h1 { <!--h1是选择器-->
  color: white;   <!--color是属性，white是属性值-->
  text-align: center;   <!--text-align: center;是一条声明-->
}

2.CSS三种引入方式：

  1. 链入外部样式表 <link rel="stylesheet" type="text/css" href="css文件路径">
  2. 内部样式表 <style> div { color: red; font-size: 12px; } </style>
  3. 内联样式 <div style="color: red; font-size: 12px;">这是内联样式</div>

3.CSS工作原理：

676f7740ce10efcfac18f4e7ec49c66.png

4.选择器：

  • 找出页面中的元素，以便给他们设置样式
  • 使用多种方式选择元素
  1. 按照标签名、类名或id
  2. 按照属性
  3. 按照DOM 树中的位置

（1）选择器种类有：

  1. 通配选择器
  2. 标签选择器
  3. id选择器
  4. 类选择器
  5. 属性选择器

（2）伪类(pseudo-classes)

不基于标签和属性定位元素

  • 状态伪类
  • 结构性伪类

（3）选择器组合

不同的选择器组合会产生不同的选择效果：

e78ea7974b3162f651573f800bde460.png

  • 后代选择器(空格)：选择
    元素内的所有p元素。 div p { background-color: yellow; }
  • 子选择器 (>)：选择其父元素是div元素的所有p元素。 div > p { background-color: yellow; }
  • 相邻兄弟选择器 (+)：选择所有紧随div元素之后的p元素。div + p { background-color: yellow; }
  • 通用兄弟选择器 (~)：选择前面有div元素的每个p元素。 div ~ p { background-color: yellow; }

二、个人总结

重点：

  1. CSS作用：CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。
  2. CSS三种引入方式：内部样式表、外部样式表和内联样式。
  3. CSS选择器种类：
  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）
  • 属性选择器（根据属性或属性值来选取元素）
avatar
文章
阅读
粉丝