n
nil123
V1
2023/01/16阅读:36主题:蔷薇紫
理解CSS | 青训营笔记
这是我参与[第五届青训营]伴学笔记创作活动的第1天
1.CSS(Cascading Style Sheets)是什么?
-
定义页面元素的样式 -
设置字体和颜色 -
设置位置和大小 -
添加动画效果
2.选择器
2.1 写法
选择器名称 { 属性名:属性值;}
2.2 选择器的定义形式
2.2.1 外联式(单独一个 css 文件)
<link rel="stylesheeet" href="style.css">
2.2.2嵌入式(写在html文件头部)
<style>
li {margin:0;}
</style>
2.2.3内联式(写在标签内)
<p style="margin:1em 0">内联式</p>
2.3选择器的使用方法
-
按照标签名类名或id
-
按照属性
-
按照 DOM树中的位置
2.3.1基础选择器
名称 | 定义 | 说明 | 使用 |
---|---|---|---|
通配符选择器 | * | 全部应用 | 自动应用 |
id选择器 | # | 唯一 | id=“ ” |
类选择器 | . | 可以应用多次 | class=" " |
标签选择器 | 标签名 | 自动应用 |
2.3.2 属性选择器
定义 | 说明 | 使用 |
---|---|---|
[属性名] | 自动应用 | |
标签名[属性名=“属性值”] | 特定值 | 自动应用 |
标签名[属性名^=" "] | 以双引号内容开头的属性值 | 自动应用 |
标签名[属性名 $=" "] | 以双引号内容结尾的属性值 | 自动应用 |
2.2.3 伪类选择器
-
状态性伪类
-
超链接伪类:
a:link 默认状态
a:hover 悬停状态
a:active 点击状态
a:visited 已访问状态
-
-
结构性伪类
-
li:first-child 如果 li 是父标签的第一个孩子
-
li:last-child 如果 li 是父标签的最后一个孩子
-
2.2.4 复合选择器

2.2.5 选择器组
A,B,C{ } 给 A、B、C 同样的样式
3.颜色
3.1RGB
#XXXXXX X 取值为 A~F
rgb( X,X ,X) X 取值为 0~255
3.2HSL
3.3 英文
3.4 alpha 透明度
0 为透明,1 为不透明
4.文字属性
4.1 字体
font-family
-
设置 font-family 时,在最后加一个通用字体族,如果对方电脑上没有一开始设置的字体,就使用通用字体族显示。 -
中英文混排时,先写英文字体再写中文字体。
@font-face {
font-family: ;
src:url( ) format( );
}
4.2 字号
font-size:20px
font-size:2em 父级的 2 倍
font-size:80% 父级的 80%
4.3 字体样式
font-style:normal 正常
font-style:italic 斜体
4.4 字体粗细
font-weight 取值 100~900
normal=400 bold=700
4.5 行高
line-height:1.6em 自己字体大小的 1.6 倍
4.6 简写
font:font-style font-weight fontsize/line-height font-family;
注意:只能省略前两个,顺序不能换。
4.7 空白 white-space
nomal:碰到边缘自动换行,多个空格只显示一个
nowrap:强制不换行
pre:换行,空格正常显示
pre-wrap:自动换行,空格和自己手敲的换行都正常显示。
pre-line:自动换行,空格合并,自己手敲的换行正常显示。
5.调试 CSS
-
右击页面/检查 -
ctrl+shift+I
作者介绍
n
nil123
V1