在 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;//删除线
}盒子模型
