【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)

CSS总结(一)

shift+alt,选中多行

外链式


1 选择器

1.1 标签选择器

结构:标签名

1.2 类选择器

结构:.类名{ }

1.3 id选择器

结构:#id属性值{ }

作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:

  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码。在一个页面中是唯一的,不可重复的!
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签

1.4 通配符选择器

结构:*{ }

作用:选中页面中所有标签

2 文字和文本样式

2.1 字体样式

2.1.1 字体大小:font-size

2.1.2 字体粗细:font-weight

取值:

  • 关键字:

    正常 normal
    加粗 bold
  • 纯数字 100~900的整数:

    正常 400
    加粗 700

2.1.3 字体样式:font-style(倾斜)

取值:

正常(默认值):normal

倾斜:italic

2.1.4 字体类型:font-family

2.1.5 字体类型:font属性连写

属性名:font(复合属性

取值:font: style weight size family;

省略要求:只能省略前两个,如果省略了相当于设置了默认值

2.1.6样式层叠问题

样式可以一层一层的层叠覆盖


如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效

2.2 文本样式

2.2.1文本缩进

属性名:text-indent

取值:

  • 数字 + px
  • 数字 + em (推荐:1em = 当前标签的font-size的大小)

2.2.2文本水平对齐方式

属性名:text-align

取值:

属性值 效果
left 左对齐
center 居中对齐
right 右对齐

2.2.3文本修饰

属性值:text-decoration

取值:

属性值 效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)

注意:开发中会使用 text-decoration :none ; 清除a标签默认的下划线

2.3 line-height行高

作用:控制一行上的上下间距

属性名:line-height

取值:

  • 数字 + px
  • 倍数(当前标签 font-size 的倍数)

应用:

  1. 让单行文本垂直居中可以设置 line-height :文字父元素高度
  2. 网页精准布局时,设置 line-height :1 可以取消上下间距

行高与font连写注意点:

  • 如果同时设置了行高与font连写,注意覆盖问题
  • font: style weight size/line-height family ;

垂直居中技巧:设置行高属性值 = 自身高度属性值

2.4标签水平居中

margin:0 auto;

3 选择器进阶

3.1 复合选择器

3.1.1 后代选择器

作用:根据HTML标签的嵌套关系,选择父元素 后代中 满足条件的元素

选择器语法:选择器1 选择器2 { css }

结果:在选择器1所找到标签的后代(儿子、孙子、重孙子...)中,找到满足选择器2的标签,设置样式

注意点:

  1. 后代包括:儿子、孙子、重孙子...
  2. 后代选择器中,选择器与选择器之间通过 空格 隔开

    【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图

3.1.2子代选择器

作用:根据HTML标签的嵌套关系,选择父元素 子代中 满足条件的元素

选择器语法:选择器1 > 选择器2 { css }

结果:在选择器1所找到标签的后代(儿子)中,找到满足选择器2的标签,设置样式

注意点:

  1. 子代只包括:儿子
  2. 子代选择器中,选择器与选择器之间通过 > 隔开
    【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图1
    【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图2

3.2 并集选择器

作用:同时选择多组标签,设置相同样式

选择器语法:选择器1 , 选择器2 { css }

结果:找到 选择器1 和 选择器2 选中的标签,设置样式

注意点:

  1. 并集选择器中的每组选择器之间通过 , 分隔
  2. 并集选择器中的每组选择器可以是 基础选择器 或者 复合选择器
  3. 并集选择器中的每组选择器通常一行写一个,提高代码的可读性

3.3 交集选择器

作用:选中页面中 同时满足 多个选择器的标签

选择器语法:选择器1选择器2 { css }

结果:

(既又原则)找到页面中 即 能被选择器1选中。又 能被选择器2选中的标签,设置样式

注意点:

  1. 交集选择器中的选择器之间是紧挨着的,没有东西分隔
  2. 交集选择器中如果有标签选择器,标签选择器必须写在最前面

3.4 hover伪类选择器

作用:选中鼠标悬停在元素上的状态,设置样式

选择器语法:选择器:hover { css }

3.5 Emmet语法

作用:通过简写语法,快速生成代码

语法:类似于刚刚学习的选择器的写法
【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图3
【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图4

4 背景相关属性

4.1 背景颜色

属性名:background-color

注意点:背景颜色默认值是 透明:rgba(0,0,0,0)、transparent

4.2 背景图片

属性名:background-image

属性值:background-image :url ('图片的路径')

4.3 背景平铺

属性名:background-repeat

属性值:

取值 效果
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向(x轴)平铺
repeat-y 沿着垂直方向(y轴)平铺

4.4 背景位置

属性名:background-position

属性值:background-position:水平方向位置 垂直方向位置

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图5

如果指定一个像素值,则该值用于x坐标,y值默居中

4.5 背景相关属性连写

属性名:background

书写顺序:随意

注意:

  1. 把单独的样式写在连写的下面
  2. 把单独的样式写在连写的里面

5 元素显示模式

5.1 块级元素

特点:

  1. 独占一行(一行只能显示一个)
  2. 宽度默认是父元素的宽度,高度默认由内容撑开
  3. 可以设置宽高

代表标签:

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

5.2 行内元素

显示特点:

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签:

a、span、b、u、i、s、strong、ins、em、del......

5.3 行内块元素

显示特点:

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签:

  • input、textarea、button、select......
  • 特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline

5.4 元素显示模式转换

属性 效果 使用频率
display:block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display:inline 转换成行内元素 较少

块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素...

  • 但是:p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素

  • 但是:a标签不能嵌套a标签

6 CSS特性

6.1 继承性

6.2 层叠性

6.3 优先级

优先级公式:

继承

注意点:

  1. !important不能提升继承的优先级,只要是继承优先级最低
  2. 实际开发中不建议使用!important

6.4 权重叠加计算

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图6

7 盒子模型

7.1 盒子模型介绍

CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是盒子模型

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图7

7.2 边框(border)- 连写形式

属性名:border

属性值:单个取值的连写,取值之间以空格隔开

border:10px solid red;

7.2.1边框(border)— 单方向设置

场景:只给盒子的某个方向单独设置边框

属性名:border—方位名词

属性值:连写的取值

7.2.2边框(border)— 单个属性:

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图8

7.3 内边距取值

作用:设置边框与内容区域之间的距离

属性值:padding

常见取值:

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图9

记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面!

7.3.1 内边距(padding)—单方向设置

场景:只给盒子的某个方向单独设置内边距

属性名:padding - 方位名词

7.4 自动内减

操作:给盒子设置属性 box-sizing:border-box;即可

优点:浏览器会自动计算多余的大小,自动在内容中减去

7.5 外边距(margin)— 取值

作用:设置边框以外,盒子与盒子之间的距离

常见取值:

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图10

记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面!

7.5.1 外边距(margin)— 单方向设置

场景:只给盒子的某个方向单独设置外边距

属性值:margin - 方位名词

应用:

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)插图11

文章来源于互联网:【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)

THE END
分享
二维码