CSS 入门

# ♦️ A CSS 的作用

```CSS``` 是 ```Web``` 三大核心技术之一

```JS``` 处理业务逻辑，```HTML``` 撑起整体骨架，```CSS``` 处理页面细节

### 栗子

```css
html { height: 100% }

.class { color: red }

#id {
  height: 100%;
  color: yellow
}
```

```html``` 是标签名，```class``` 是类名， ```id``` 是 id 

```CSS``` 可以通过标签名、类名和 id 来找到对应的元素

元素名直接写，类名前面加个 "."，id 前面加个 "#"

## 小知识点

当 ```CSS``` 样式只有一行的时候，末尾的分号 ";" 可以省略，多行时不可省略。 



# ♦️ 2 指定元素

```CSS``` 可以为特定的元素订制样式

方法是直接指定标签名

### 栗子

```css
html { height: 100% }

div { color: red }

input {
  height: 100%;
  color: yellow
}
```

```html```、```div```、```input``` 都是 ```HTML``` 的标签 

## 小知识点

直接指定标签名定义样式的时候，整个 ```HTML``` 文档流里的所有此类标签都将拥有的样式



# ♦️ 3 指定类名

```CSS``` 也可以为拥有同样类名的元素订制样式

方法是直接指定该类名

### 栗子

```css
.class1 { height: 100% }

.class2 { color: red }

.class3 {
  height: 100%;
  color: yellow
}
```

```class1```、```class2```、```class3``` 都是类名 

## 小知识点

一个元素可以拥有多个类，当大于两个的时候，元素的样式将由这些类来共同决定

相同的属性会彼此覆盖，规则是后者覆盖前者




# ♦️ 4 指定 id

```CSS``` 还可以为拥有特定 id 的元素订制样式

方法是直接指定该元素的 id

### 栗子

```css
#id1 { height: 100% }

#id2 { color: red }

#id3 {
  height: 100%;
  color: yellow
}
```

```id1```、```id2```、```id3``` 都是元素的 id 

## 小知识点

一个元素可以拥有多个类，但只能有一个 id




# ♦️ 5 样式的属性

用 ```CSS``` 给元素定义样式的时候，你需要为其书写属性和属性特定的值

```attribute``` : ```value```

### 栗子

```css
selector {
  attribute: value;
  ...
}

选择器 {
  属性: 属性值;
  ...
}

html {
  width: 100%;
  height: 100%;
}
```

前面两个是中英文 ```伪代码``` ，最后一个才是真实例子 

## 小知识点

```CSS``` 的属性被一个分号隔开，左边是属性名，右边为属性的值



# ♦️ 6 宽和高

```CSS``` 描述一个元素的大小，需要用两个属性

```width``` 和 ```height``` 即：宽和高

### 栗子

```css
html {
  width: 100%;
  height: 100px
}

body {
  width: 100rem;
  height: 100em
}
```

```width``` 和 ```height``` 的值有 4 种类型 

```px```、 ```百分比```、 ```rem``` 和 ```em```

## 小知识点

```CSS``` 里横的那条是宽，竖的那条是高，记住咯




# ♦️ 7 颜色和背景颜色

```CSS``` 给一个元素上色，有两个属性

```color``` 和 ```background-color``` 即：颜色和背景颜色

### 栗子

```css
div {
  color: red;
  background-color: #fff
}

p {
  color: rgb(0,0,0);
  background-color: rgba(255,255,255,0.8)
}
```

```color``` 和 ```background-color``` 的值有 4 种类型 

```颜色名```、 ```HEX```、 ```RBG``` 和 ```RGBA```

## 小知识点

```color``` 被用来定义文本的颜色

```background-color``` 则被用来定义元素的背景颜色，或者说～填充颜色




# ♦️ 8 内边距和外边距

```CSS``` 定义元素之间的距离，有两个属性

```padding``` 和 ```margin``` 即：内边距和外边距

### 栗子

```css
div {
  padding: 100px;
  margin: 100px
}

p {
  padding: 100px 50px;
  margin: 100px 50px
}

h1 {
  padding: 100px 40px 50px 60px;
  margin: 100px 40px 50px 60px;
}
```

```padding``` 定义了元素的内边距，```margin``` 定义了元素的外边距，

只写一个数值的话，表示上下左右都一样。

写两个数值的话，第一个表示上下，第二个表示左右

四个都写的话，第一个表示上，第二个表示右，第三个表示下，第四个表示左

```上右下左```，记住咯

## 小知识点

```padding``` 和 ```margin``` 的属性值除了 ```px```，也可以是 ```百分比```、```rem``` 和 ```em```

只要属性值是数值，一般都可以是这四种类型。






# ♦️ 9 边框

```CSS``` 所有块级元素都有一层皮，这层皮叫边框。

```border``` 即：边框

### 栗子

```css
div { border: 1px solid red }

```

```border``` 定义元素的边框

```1px``` 定义了边框的厚度

```solid``` 定义了边框的类型为实线

```red``` 定义了边框的颜色为红色

## 小知识点

```1px```、```solid``` 和 ```red``` 的顺序是可以任意调换了






# ♦️ 10 文本

```CSS``` 为文本元素提供了丰富的控制属性

最常用的有 ```font-size```、```font-weight```、```text-align``` 和 ```line-height```

### 栗子

```css
span {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 30px
}

```

```font-size``` 定义文本的字体大小

```font-weight``` 定义文本的粗细

```text-align``` 定义文本的排列模式：居中、居右还是居左

```line-height``` 定义文本的行高

## 小知识点

```font-weight``` 的常用可选择有：```bold```、```normal``` 和 100 - 900 的范围值

400 等同于 ```normal```，700 等同于 ```bold```

```text-align``` 的常用可选择有： ```center```、```left``` 和 ```right```






# ♦️ J 布局

```HTML``` 拥有多种布局方式

可使用 ```CSS``` 的 ```display``` 属性来定义

### 栗子

```css
div { display: block }

p { display: none }

a { display: inline }

.class { display: inline-block }

.class2 { display: box }

.class3 { display: flex }

```

```block``` 表示块级布局方式

```none``` 表示不显示

```inline``` 表示内联布局方式

```line-block``` 表示行内块布局方式

```box``` 表示盒子布局方式

```flex``` 表示弹性盒子布局方式

## 小知识点

想要更好地掌握 ```CSS``` 布局，很有必要深入了解什么是 ```盒子``` 模型






# ♦️ Q 定位

```HTML``` 文档流存在着多种定位模式

可使用 ```CSS``` 的 ```position``` 属性来定义

### 栗子

```css
div { position: static }

div {
  position: relative；
  left: 20px;
  top: 10px;
}

div {
  position: absolute；
  right: 20px;
  bottom: 10px;
}

div {
  position: fixed；
  left: 0;
  bottom: 0;
}

```

```static``` 是默认文档流

```relative``` 表示相对定位

```absolute``` 表示绝对定位

```fixed``` 表示固定定位

## 小知识点

```position``` 的值如果不是 ```static``` 一般与之相随的还有：

```top```、```bottom```、```left``` 和 ```right```，分别对应上、下、左、右

通常情况下，上下左右只需要写两个就可以了。






# ♦️ K 注释

```CSS``` 有两种注释风格

单行：```//```，多行： ```/**/``` 

### 栗子

```css
// 我是单行注释
div {
  position: relative；
  // left: 20px;
  top: 10px;
}

／* 我是多行注释 *／
div {
  position: absolute；
  /*
    right: 20px;
    bottom: 10px;
  *／
}
```

## 小知识点

被注释掉的代码，会被程序忽略，注释的作用是给程序员一点方便

对代码块进行标记或临时性屏蔽


### 这篇文章价值九元

![](https://blog-1253509893.cos.ap-chengdu.myqcloud.com/fee.jpeg)





CSS 入门 #11

Description

♦️ A CSS 的作用

栗子

小知识点

♦️ 2 指定元素

栗子

小知识点

♦️ 3 指定类名

栗子

小知识点

♦️ 4 指定 id

栗子

小知识点

♦️ 5 样式的属性

栗子

小知识点

♦️ 6 宽和高

栗子

小知识点

♦️ 7 颜色和背景颜色

栗子

小知识点

♦️ 8 内边距和外边距

栗子

小知识点

♦️ 9 边框

栗子

小知识点

♦️ 10 文本

栗子

小知识点

♦️ J 布局

栗子

小知识点

♦️ Q 定位

栗子

小知识点

♦️ K 注释

栗子

小知识点

这篇文章价值九元

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions