Skip to content

在 HTML 中引入 CSS 样式

html
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./global.css">
</head>

选择器

元素选择器

定义 HTML 中某一类标签的所有元素,例如

css
h4 {
    color : red;
}

即修改所有的 h4 标签的样式。

类选择器

html
<p class="classSelector">class1</p>
css
.classSelector {
    color : blue;
}

. +类名称,即可修改所有类名相同的元素值。

Div 标签下的层级关系
html
<div id="parent">
  <div id="child"></div>
</div>

选择其中的子元素:

css
.parent .child {
    color : yellow;
}
为一个元素分配多个类名
html
<p class="a1 a2 a3">类选择器</p>

ID 选择器

在 html 中给元素分配 ID,这个 ID 与类不同,是唯一的。

html
<p id="idSelector">ID选择器</p>
css
#idSelector {
    color : green;
}

在 css 中可以用 # 选择对应 ID 的元素,修改其样式。

颜色

可以使用 RGB(A) 和 HEX 定义颜色

css
color: rgb(255,2, 0);
color: rgba(255,2,0,0.5)// 透明度0-1
color: #00ff00;

背景颜色和边框颜色属性

css
.back {
    background-color: beige;
}

.edge {
    border: 2px solid black;
}

透明度

调整某个元素中某个属性的透明度时,应当使用 rgba 精细化定义,而修改整个元素的透明度只要设置 opacity 的值即可,范围一样是 0-0.5。

文本

css
.text {
    font-family: 'sans-serif';// 字体集
    font-size: 24px;
    line-height: 32px;
    font-weight: 200;//粗细
    font-style: italic;//斜体
    text-decoration: line-through;//删除线
}

盒子模型

布局

弹性布局

网格布局

定位