CSS学习笔记1-CSS基本属性、选择器

1 如何将CSS样式应用到元素上

1.1 内联样式（行内样式）

内联样式表存在于HTML元素的style属性之中。
CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

1.2 内部样式表

将CSS放在HTML文件<head>元素里的<style>元素之中。

1.3 外部样式表

外部样式表（external style sheet） 是将css编写一个独立的文件中，并且通过<link>元素引入进来；
使用外部样式表主要分成两个步骤：

  • 第一步：将css样式在一个独立的css文件中编写（后缀名为.css）；
  • 第二步：通过<link>元素引入进来；

1.4 @import

可以在style元素或者CSS文件中使用@import导入其他的CSS文件
img

2 CSS属性（文本）

2.1 text-decoration

text-decoration用于设置文字的装饰线
text-decoration有如下常见取值:

  • none：无任何装饰线
  • underline：下划线
  • overline：上划线
  • line-through：中划线（删除线）

2.2 text-transform

text-transform用于设置文字的大小写转换
transform单词是使变形/变换(形变);
text-transform有几个常见的值:

  • capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
  • uppercase：(大写字母)将每个单词的所有字符变为大写
  • lowercase：(小写字母)将每个单词的所有字符变为小写
  • none：没有任何影响

2.3 text-indent

text-indent用于设置第一行内容的缩进
text-indent: 2em; 刚好是缩进2个文字
img

2.4 text-align

text-align: 直接翻译过来设置文本的对齐方式;
MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;
W3C中的解释:
img
常用的值：

  • left：左对齐
  • right：右对齐
  • center：中间对齐
  • justify：两端对齐

2.5 letter-spacing、word-spacing

letter-spacing、word-spacing分别用于设置字母、单词之间的间距
默认是0，可以设置为负数

3 CSS属性（字体）

3.1 font-size

font-size决定文字的大小
常用的设置

  • 具体数值+单位，如100px，也可以是用em（不推荐）
  • 百分比，基于父元素的font-size计算

3.2 font-family

用于设置文字的字体名称

  • 可以设置1个或者多个字体名称;
  • 浏览器会选择列表中第一个该计算机上有安装的字体;
  • 或者是通过 @font-face 指定的可以直接下载的字体。

3.3 font-weight

font-weight用于设置文字的粗细（重量）
取值：

  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
  • normal：等于400
  • bold：等于700

3.4 font-style

font-style用于设置文字的常规、斜体显示
取值：

  • normal：常规显示
  • italic(斜体)：用字体的斜体显示(通常会有专门的字体)
  • oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)

3.5 font-variant

3.6 line-height

line-height用于设置文本的行高
行高可以先简单理解为一行文字所占据的高度

3.7 font

书写顺序：font-style font-variant font-weight font-size/line-height font-family
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略
img

4 CSS选择器

选择器种类：通用选择器（universal selector）、元素选择器（type selectors）、类选择器（class selectors）、id选择器（id selectors）、属性选择器（attribute selectors）、组合（combinators）、伪类（pseudo-classes）、伪元素（pseudo-elements）

4.1 通用选择器

所有的元素都会被选中;
一般用来给所有元素作一些通用性的设置

  • 比如内边距、外边距;
  • 比如重置一些内容;

效率比较低，尽量不要使用;

4.2 元素选择器（type selectors）

4.3 类选择器（class selectors）

4.4 id选择器（id selectors）

注意：一个HTML文档里面的id值是唯一的，不能重复

  • id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
  • 最好不要用标签名作为id值

4.5 属性选择器(attribute selectors)

拥有某一个属性 [att]
属性等于某个值 [att=val]
img

4.6 后代选择器（descendant combinator）

4.6.1 后代选择器一: 所有的后代(直接/间接的后代)

选择器之间以空格分割
img

4.6.2 后代选择器二: 直接子代选择器(必须是直接子代)

选择器之间以 > 分割;
img

4.7 兄弟选择器(sibling combinator)

4.7.1 兄弟选择器一:相邻兄弟选择器

使用符号 + 连接
img

4.7.2 兄弟选择器二: 普遍兄弟选择器

img

4.8 交集选择器

需要同时符合两个选择器条件(两个选择器紧密连接)
在开发中通常为了精准的选择某一个元素;
img

4.9 并集选择器

符合一个选择器条件即可(两个选择器以,号分割)
在开发中通常为了给多个元素设置相同的样式;
img

4.10 伪类选择器

4.10.1 动态伪类

使用举例：

  • a:link 未访问的链接
  • a:visited 已访问的链接
  • a:hover 鼠标挪动到链接上(重要)
  • a:active 激活的链接（鼠标在链接上长按住未松开）

使用注意：

  • :hover必须放在:link和:visited后面才能完全生效
  • :active必须放在:hover后面才能完全生效
  • 所以建议的编写顺序是 :link、:visited、:hover、:active
  • 除了a元素，:hover、:active也能用在其他元素上

4.10.2 结构伪类

img
img
img

4.11 伪元素选择器

::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
常通过 content 属性来为一个元素添加修饰性的内容。
img

posted @ 2023-06-10 21:27  落枫潇潇  阅读(78)  评论(0)    收藏  举报
levels of contents