n

nil123

V1

2023/01/16阅读:26主题:蔷薇紫

理解CSS | 青训营笔记

这是我参与[第五届青训营]伴学笔记创作活动的第1天

1.CSS(Cascading Style Sheets)是什么?

  • 定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

2.选择器

2.1 写法

选择器名称 { 属性名:属性值;}

2.2 选择器的定义形式

2.2.1 外联式(单独一个 css 文件)

<link rel="stylesheeethref="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