CSS（上：走进CSS）|青训营笔记

2023-01-16 94 阅读3分钟

这是我参与【第五届青训营】伴学笔记创造活动的第2天

CSS

一、CSS是什么

Cascading Style Sheets 层叠样式表

用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

选择器{
       属性：属性值；
}

1、CSS在页面中三种使用方法

外链
- <link rel="stylesheet" href="css文件地址">
嵌入
- ```
  <style>
      css内容
  </style> 
```
内联
- <标签名 style="样式内容"></标签名>

2、CSS如何工作

CSS工作.jpg

3、选择器 Selector

使用多种方式选择元素
- 按照标签名、类名、或id
- 按照属性
- 按照DOM树中的位置

（1）、几种常见的选择器：

通配选择器
- *{}匹配所有
标签选择器
- 标签设置样式，例
```
<style>
h1{
    color:red;
}
</style>
```
id 选择器（id唯一值）

//为标签设置id，#id选择

<h1 id="h1Color">
    HELLO WORLD
</h1>

<style>
    #h1Color{
        color:red;
    }
</style>

类选择器 class

<h1 class="h1C">hello</h1>

<style>
    .h1C{
        color:red;
    }
</style>

属性选择器
- [属性]{}
  - [属性="特定值"]{}匹配特定值的属性
  - ^= 匹配特定开头值
  - $= 匹配特定结尾值

（2）、伪类

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

更多伪类方法的使用：

W3school CSS伪类

MDN文档 CSS伪类

(3）组合

组合.jpg

（4）选择器组

相关标签用逗号分隔开，例：

body,h1,h2{
    margin:0;
    padding:0;
}

[type="checkbox"],[type="radio"]{
    box-sizing:border-box;
    padding:0;
}

二、CSS文本操作

1、颜色

RGB
- red、green、blue
- #000000 #+6位字符（16进制）（00-ff）
- rgb(0,0,0) (0-255)
HSL
- Hue 色相
- Saturation 饱和度
- Lightness 亮度
- hsl(360,100%,0%)
透明度操作 alpha
- alpha 为1时，不透明，区间: 0~1
- rgba(0,0,0,0)或rgb(0,0,0,0)第四位即设置透明度

2、字体

（1）、字体设置建议

定义字体时，在最后加入通用字体族
中英文混排，英文字体在前面
必须使用某字体时，使用Web Fonts 将字体放到服务器，再下载使用。例如：

（2）字体设置

font-size 设置字体大小
- 关键字
  - small、 medium、large
- 长度
  - px、em 其中em 为相对大小
- 百分数
  - 相对于父元素字体大小
font-style 字体样式
- normal 常规字体
- italic 斜体
- oblique 倾斜体，可设置倾斜角度
```
font-style: oblique 45deg;
```

font-weight 字重，字的粗细（100~900）

font-weight:100;

//并非所有字体都有相对应的字重

line-height 行高
- 当数值后没有单位时，表示原字体的 x 倍
text-align 对齐
- left 左对齐
- right 右对齐
- center 居中对齐
- justify 两端对齐
- inherit 从父类继承
word-spacing 字体间距
text-indent 缩进
text-decoration文本装饰
- none 默认
- underline 下划线
- overline 上划线
- line-through 穿过文本的线（删除线）
- blink 闪烁文本
- inherit 继承
white-space 空白
- normal 合并连续空白符，换行符当作空白符
- nowrap 合并空白符，文本内换行无效
- pre 保留连续空白符，遇到换行符或<br>元素才换行
- pre-wrap 与pre同，且在需要填充时换行
- pre-line 连续空白合并，遇到换行符或<br>元素，或为了填充时，换行
- break-spacecs 与pre-wrap 行为相同，但存在差异
  - 包括行尾，任何保留空白序列都会占用空间
  - 每个保留的空格字符后都存在换行机会，包括空格字符之间
  - 保留的空间不会挂起，而会占用空间，从而影响盒子的固有尺寸