第一次接触前端 - CSS笔记

xuyuelin88117
178 阅读8分钟

基础

基础认知

Cascading Style Sheets简称CSS，作用是给页面中的HTML标签设置样式。

CSS写在style标签中，style标签一般写在head标签里面，title标签下面。

CSS常见属性有color（文本颜色），font-size（字体大小），background-color（背景颜色），width（宽度）和height（高度）。

CSS引入方式有三种，分别是内嵌式，外联式和行内式，使用场景分别是小案例、项目中和配合js使用。

基础选择器

选择器的作用是选择页面中对应的标签，方便后续设置样式。

标签选择器

标签名 { css属性名：属性值； }

通过标签名，找到页面中所有这类标签，设置样式。

注意：

  1. 标签选择器选择的是一类标签，而不是单独某一个；
  2. 标签选择器无论嵌套关系有多深，都能找到对应的标签。

类选择器

.类名 { css属性名：属性值； }

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式。

注意：

  1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）；
  2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头；
  3. 一个标签可以同时有多个类名，类名之间以空格隔开；
  4. 类名可以重复，一个类选择器可以同时选中多个标签。

id选择器

#id属性值 { css属性名：属性值； }

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

注意：

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

补充：类与id的区别

  1. class类名与id属性值的区别：
  • class类名相当于姓名，可以重复，一个标签可以同时有多个class类名；
  • id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值。
  1. 类选择器与id选择器的区别：
  • 类选择器以.开头；
  • id选择器以#开头。
  1. 实际开发的情况：
  • 类选择器用的最多；
  • id一般配合js使用，除非特殊情况，否则不要使用id设置样式；
  • 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）。

通配符选择器

* { css属性名：属性值； }

作用：找到页面中所有的标签，设置样式。

字体和文本样式

字体样式

  • 字体大小：font-size：数字+px；
  • 字体粗细：font-weight：正常normal或400，加粗bold或700；
  • 字体样式：font-style：正常normal，倾斜italic；
  • 字体类型：font-family
  • 字体类型：font属性连写

文本样式

  • 文本缩进：text-indent：数字+px或数字+em；
  • 文本水平对齐方式：text-align：left/right/center；
  • 文本修饰：text-decoration：underline/none

line-height行高

数字+px或倍数（当前标签font-size的倍数）。

进阶

选择器进阶

复合选择器

后代选择器：空格

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

选择器1 选择器2 { css }

结果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

注意：

  1. 后代包括：儿子、孙子、重孙子……
  2. 后代选择器中，选择器与选择器之前通过空格隔开

子代选择器：>

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

选择器1 > 选择器2 { css }

结果： 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式

注意：

  1. 子代只包括：儿子
  2. 子代选择器中，选择器与选择器之前通过>隔开

并集选择器：,

作用：同时选择多组标签，设置相同的样式

选择器1 ， 选择器2 { css }

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

注意：

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

交集选择器

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

选择器1选择器2 { css }

结果： 找到页面中既能被选择器1选中又能被选择器2选中的标签，设置样式

注意：

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

hover伪类选择器

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

选择器:hover { css }

Emmet语法

作用：通过简写语法，快速生成代码

背景相关属性

背景颜色

属性名：background-color（bgc）

颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

注意点：

  1. 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
  2. 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

背景图片

属性名：background-image（bgi）

注意：

  1. 背景图片中url中可以省略引号
  2. 背景图片默认是在水平和垂直方向平铺的
  3. 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的

背景平铺

背景位置

背景相关属性连写

属性名：background（bg）

单个属性值的合写，取值之间以空格隔开

书写顺序：background：color image repeat position

省略问题：可以按照需求省略

特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url()

注意：

如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面。

元素显示模式

块级元素

显示特点：

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

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

行内元素

显示特点：

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

代表标签：a、span 、b、u、i、s、strong、ins、em、del……

行内块元素

显示特点：

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

代表标签：input、textarea、button、select……

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

转换成块级元素的属性是display：block

转换成行内块元素的属性是display：inline-block

转换成行内元素的属性是display：inline

CSS 特性

继承性

特性：子元素有默认继承父元素样式的特点

可以继承的常见属性(文字控制属性都可以继承)

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-alig
  4. line-height ……

注意：可以通过调试工具判断样式是否可以继承

好处：可以在一定程度上减少代码

常见应用场景：

  1. 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
  2. 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小

层叠性

特性：

  1. 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
  2. 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效

注意：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意点：

  1. !importantt写在属性值的后面，分号的前面
  2. !important不能提升继承的优先级，只要是继承优先级最低
  3. 实际开发中不建议使用!important
avatar
文章
阅读
粉丝