CSS 入门

[joephon]

♦️ A CSS 的作用

CSS 是 Web 三大核心技术之一

JS 处理业务逻辑，HTML 撑起整体骨架，CSS 处理页面细节

栗子

html { height: 100% }

.class { color: red }

#id {
  height: 100%;
  color: yellow
}

html 是标签名，class 是类名， id 是 id

CSS 可以通过标签名、类名和 id 来找到对应的元素

元素名直接写，类名前面加个 "."，id 前面加个 "#"

小知识点

当 CSS 样式只有一行的时候，末尾的分号 ";" 可以省略，多行时不可省略。

♦️ 2 指定元素

CSS 可以为特定的元素订制样式

方法是直接指定标签名

栗子

html { height: 100% }

div { color: red }

input {
  height: 100%;
  color: yellow
}

html、div、input 都是 HTML 的标签

小知识点

直接指定标签名定义样式的时候，整个 HTML 文档流里的所有此类标签都将拥有的样式

♦️ 3 指定类名

CSS 也可以为拥有同样类名的元素订制样式

方法是直接指定该类名

栗子

.class1 { height: 100% }

.class2 { color: red }

.class3 {
  height: 100%;
  color: yellow
}

class1、class2、class3 都是类名

小知识点

一个元素可以拥有多个类，当大于两个的时候，元素的样式将由这些类来共同决定

相同的属性会彼此覆盖，规则是后者覆盖前者

♦️ 4 指定 id

CSS 还可以为拥有特定 id 的元素订制样式

方法是直接指定该元素的 id

栗子

#id1 { height: 100% }

#id2 { color: red }

#id3 {
  height: 100%;
  color: yellow
}

id1、id2、id3 都是元素的 id

小知识点

一个元素可以拥有多个类，但只能有一个 id

♦️ 5 样式的属性

用 CSS 给元素定义样式的时候，你需要为其书写属性和属性特定的值

attribute : value

栗子

selector {
  attribute: value;
  ...
}

选择器 {
  属性: 属性值;
  ...
}

html {
  width: 100%;
  height: 100%;
}

前面两个是中英文 伪代码 ，最后一个才是真实例子

小知识点

CSS 的属性被一个分号隔开，左边是属性名，右边为属性的值

♦️ 6 宽和高

CSS 描述一个元素的大小，需要用两个属性

width 和 height 即：宽和高

栗子

html {
  width: 100%;
  height: 100px
}

body {
  width: 100rem;
  height: 100em
}

width 和 height 的值有 4 种类型

px、 百分比、 rem 和 em

小知识点

CSS 里横的那条是宽，竖的那条是高，记住咯

♦️ 7 颜色和背景颜色

CSS 给一个元素上色，有两个属性

color 和 background-color 即：颜色和背景颜色

栗子

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 即：内边距和外边距

栗子

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 即：边框

栗子

div { border: 1px solid red }

border 定义元素的边框

1px 定义了边框的厚度

solid 定义了边框的类型为实线

red 定义了边框的颜色为红色

小知识点

1px、solid 和 red 的顺序是可以任意调换了

♦️ 10 文本

CSS 为文本元素提供了丰富的控制属性

最常用的有 font-size、font-weight、text-align 和 line-height

栗子

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 属性来定义

栗子

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 属性来定义

栗子

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 有两种注释风格

单行：//，多行： /**/

栗子

// 我是单行注释
div {
  position: relative；
  // left: 20px;
  top: 10px;
}

／* 我是多行注释 *／
div {
  position: absolute；
  /*
    right: 20px;
    bottom: 10px;
  *／
}

小知识点

被注释掉的代码，会被程序忽略，注释的作用是给程序员一点方便

对代码块进行标记或临时性屏蔽

这篇文章价值九元