css基础

本篇内容讲解

1.1样式定义方式
1.2选择器
1.3颜色
1.4文本
1.5字体

1.1样式定义方式

1.行内样式表

直接定义在标签属性的style属性里面，只对当前标签产生影响

image-20231230132043600

2.内部样式表

image-20231230132408862

3.外部样式表

image-20231230132907036

image-20231230132925287

在写外部样式时，应该现在html页面引入链接

1
<link href="css文件路径" rel="stylesheet">

rel=”stylesheet”表示实现一个样式表，它有stylesheet接口

1.2选择器

1.标签选择器

image-20231230133939085

所有的标签都会变成棕色

2.ID选择器

image-20231230134125335

相比于第一种标签选择器，id 选择器可以实现精准的控制改变

3。类选择器

image-20231230134512890

类名为 x 的标签将会变色

注意：类选择器和 id 选择器的区别就是 id 是唯一的，而类可以定义多个标签为同一类

image-20231230134617946

image-20231230134636994

4. 伪类选择器

  • ：link 链接访问前的样式
  • ：visited 链接访问后的样式
  • ：hover 鼠标悬停时的样式
  • ：active 鼠标点击后长按时的样式
  • ：focus 聚焦后的样式

image-20231230135206628

5. 位置伪类选择器

:nth-child(n):选择是其父标签第 n 个子元素的所有元素

image-20231230135319553

第 1.3.5 个

标签会变成棕色

6. 目标伪类选择器

:target 当 url 指向该元素时生效

image-20231230135451854

7. 复合选择器

由两个及以上基础选择器组合而成的选择器

  • element1,element2 同时选择元素 element1 和 element2
  • element.class 选择包含某类的 element 元素
  • element1 + element2 选择紧跟 element1 的 element2 元素
  • element1 > element2 选择父标签是 element1 的所有 element2 元素（1包含2的那些）
  • Element1 element2 选择 element1 内所有 element2 元素

8.

通配符选择器

* 选择所有标签

image-20231230135956439

[attribute]：选择具有某个属性的所有标签

image-20231230140028716

那么具有 required 属性的标签就会背景颜色变红

[attribute=value]：选择 attribute 值为 value 的所有标签

image-20231230140212370

9. 伪元素选择器

  • ::first-letter 选择第一个字母
  • ::first-line 选择第一行
  • ::selection 选择已被选中的内容
  • ::after 可以在元素后插入内容#ADD
  • ::before 可以在元素前插入内容

image-20231230150119840

1.3 颜色

  • 预定义的颜色值

Black、white、red、green、blue 等

  • 16 进制表示法：

使用 6 位 16 进制表示颜色，例如：#ADD8E6

  • RGB 表示法:red green blue

rgb(173.216.230)

  • RGBA 表示法 A 表示透明度

rgba(173，216，230，0.5)