新知

  1. 键值对的概念
  2. rel(relation):用来设置对象与链接目的间的关系
  3. href(Hypertext Reference):指定超链接目标的 URL
  4. zen:禅宗、思考、沉思;inherit:继承
  5. Vscode 自动格式化代码设置

CSS 简介

Cascade Style Sheet:美化网页,布局页面。

CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式

CSS 和 HTML 一样,是一种标记语言。

CSS 的最大价值:让 HTML 专注去做结构呈现,样式交给 CSS,即结构和样式相分离。

CSS 语法规范

CSS 规则:选择器 + 声明(一条或多条)

CSS 代码风格

  1. 样式格式书写:紧凑格式、展开格式(纵向书写,推荐)
  2. 样式大小写风格:使用小写字母书写
  3. 样式空格风格:属性值前面,冒号后面,保留一个空格;选择器(标签)和大括号中间保留空格

CSS 基础选择器

CSS 选择器的作用:根据不同需求把不同的标签选出来,简单来说,就是选择标签用的。

选择器很多,但不要畏难,要乐观,因为这是给了我们越多的选择,比如我要从家到公司,可以走路、电动车、汽车、飞机等等,出行方式不是越多越好吗?我们可以根据情况自由的选择方式!

CSS 选择器可分为基础选择器复合选择器两个大类。

CSS 基础选择器是由 单个选择器 组成的。

基础选择器又包括:标签选择器类选择器id选择器通配符选择器

标签选择器

标签选择器是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

优点:快速为页面中同类型的标签统一设置样式。

缺点:不能设计差异化样式,只能选择全部的当前标签。

类选择器

类选择器可以差异化选择不同的标签,单独选一个或者某几个标签。

类的概念:class

口诀:样式点定义,结构类(class)调用,一个或多个,开发最常用

  • 长名称或词组可以使用“-”来为选择器命名
  • 不要使用纯数字、中文等命名,尽量使用英文字母来表示。
  • 类命名规则:web 前端开发规范手册

多类名:一个标签指定多个类名。一个标签有多个名字,就跟人的大名、小名、笔名、艺名一样。

  • 写法:<div class = "red font20">亚瑟</div>
  • 可写多个类名,中间必须用空格分开。
  • 为什么要多个类名呢?把公共的样式放到一起,提公因式。节省 CSS 代码,统一修改也非常方便。

ID 选择器

HTML 元素以 ID 属性来设置 ID 选择器;CSS 中 ID 选择器用 “#”来定义。

口诀:样式#定义,结构ID调用,只能调用一次,别人切勿使用。(ID就是身份证,独一无二)

#pink {

    color : pink;

}

<div id = "pink">迈克尔.杰克逊</div>

通配符选择器

在 CSS 中,通配符选择器使用 “*” 定义,它表示选取页面中所有元素(标签)。

写法:* {}

基础选择器总结

| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
| :- | :- | :- | :- | :- |
| 标签选择器 | 选出所有相同的标签,如 p | 不能差异化选择 | 较多 | p { color: red;} |
| 类选择器 | 可以选出一个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id 选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和JS搭配使用 | #nav { color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多,有部分不需要 | 特殊情况使用 | * { color: red;} |

CSS 字体属性

CSS Fonts 属性用于定义 字体系列4、大小3、粗细2和文字样式1(如斜体)。

1. 文字样式

attribute:font-style ,实际工作中常常用来让倾斜的字体回正。

normal(正常) italic(斜体)

2. 字体粗细

attribute:font-weight

实际开发中最常使用数字:font-weight: 700;

bold 就是700,normal 就是 400 ,取值在 100-900 区间

3. 字体大小

px 像素单位有必要去深入了解一下: wikipedia

谷歌浏览器默认的字体大小是 16px

p { font-size: 20px;}

4. 字体系列

各种字体之间使用英文逗号隔开;有空格隔开的多个单词组成的字体,加引号;尽量使用系统默认自带的字体,保证兼容性;浏览器会依次去寻找设置的字体并使用。

body {font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';}

字体复合属性(简写)

注意:顺序不要乱!

严格按照以下顺序去写:前两个可省,size 和 family 不能省略

font: font-style font-weight font-size/line-height font-family;

字体属性总结

| 属性 | 意义 | 注意点 |
| :- | :- | :- |
| font-style | 字体样式 | Normal Italic |
| font-weight | 字体粗细 | 700-bold 400-normal |
| font-size | 字号 | 单位PX不要忘 |
| font-family | 字体 | 团队约定,多固定 |
| font | 字体设置简写 | 记住顺序不能变,字号字体必须有 |

文本属性

CSS Text 属性可定义文本的外观,比如文本的 颜色、对齐方式、装饰、文本缩进、行间距等。

小工具:faststone-capture

文本颜色

属性值:预定义的颜色值;十六进制颜色值;RGB(255,0,0)代码格式。

颜色一般是根据效果图,使用吸管吸过来的,无须自己设计。

文本对齐

text-align 属性 用于设置元素内文本内容的水平对齐方式

装饰文本

attribute:text-decoration

默认值为 none,没有装饰线,另外还有下划线、上划线、删除线。

最常用的就是取消 a 链接自带的下划线。

文本缩进

attribute:text-indent ,一般用于首行缩进两个字符

单位:em 是一个相对单位,当前元素1个文字的大小(font-size),px 是一个绝对单位。

行间距

attribute:line-height 用于设置行间的距离(行高),可以控制文字行与行之间的距离。

可以实现在盒子里垂直居中的效果。如果行高<盒子高度,文字偏上;如果行高>盒子高度,文字偏下。

文本属性总结

| 属性 | 表示 | 注意点 |
| :- | :- | :- |
| color | 文本颜色 | 通常用 十六进制 比如而且是简写形式 |
| text-align | 文本对齐 | 水平对齐方式 |
| text-indent | 文本缩进 | 单位:2em |
| text-decoration | 文本修饰 | underline none |
| line-height | 行高 | 26px较好,可以实现文字垂直居中的效果。 |

综合案例

做一个新闻页面,见 Vscode。

CSS 的引入方式

  1. 行内样式表(行内式):适合简单地修改当前元素。<p style="color: red; font-size: 12px; ">演示</p>。控制一个标签。
  2. 内部样式表(嵌入式):理论可以放在任何在地方,但最好放在前面。可以控制一个页面。
  3. 外部样式表(链接式):样式单独写到 CSS 文件中,之后把 CSS 文件引入到 HTML 页面中使用。实际开发中都是这样,适合样式比较多的情况。控制多个页面。

3.1 新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。这个文件只有样式,没有标签。

3.2 在 HTML 页面中,使用 <link> 标签引入这个文件。<link rel="stylesheet" href="css文件路径">

Chrome 调试工具

打开方式:F12,或者右键点开检查

操作方式:

  1. 使用 Ctrl + 滚轮 放大和缩小界面,Ctrl + 0 复原浏览器大小。
  2. 左边是 HTML,右边是 CSS。
  3. 右边的 CSS 可以直接改动数值(左右箭头或者直接输入)和查看颜色。
  4. 可以直接选择某一元素,来查看有无错误,是否正确引入等。

CSS 第二天导读

emmet 语法

emmet 语法的前身是 Zen coding ,它使用缩写来提高 html/css 的编写速度,Vscode 已集成该语法。

快速生成 HTML 结构语法

  1. 直接输入标签名,按 tab 就可以生成标签。(写代码的时候自己发现的)
  2. 标签名*数字,生成多个相同标签。(自己发现的,毕竟一个个写太累了)
  3. 父子关系的标签,可以用 > 。比如 ul > li,快速生成父子标签
  4. 兄弟关系的标签,使用 “+”。比如 div + p
  5. 如果生成带有类名或者 id 名字的,直接写 .demo 或者 #two tab 键就可以了。比如.nav #banner 默认是 div 标签,可以加标签,比如 p.one
  6. 如果生成的 dvi 类名是有顺序的,可以用自增符号,比如 .demo$*4
  7. 如果想要生成的标签内部写内容,可以用 {} 表示。比如div{我是一颗小小草}

快速生成 CSS 样式语法

  1. 直接使用首字母简写

<h2 id="5">格式化代码</h2>

  1. 右键:format document 格式化文档
  2. 设置 当保存页面的时候自动格式化代码:1.文件-首选项-设置 2.搜索 emmet.include; 3. 在 settings.json 下的 用户 中添加以下语句:
"editor.formatOnType": true

"editor.formatOnSave":true

CSS 的复合选择器

复合选择器是建立在基础选择器之上的,对基本选择器进行组合形成的。

  1. 可以更准确、高效的选择目标元素(标签)
  2. 由两个或多个基础选择器,通过不同的方式组合而成的
  3. 后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器(重要)

后代选择器又称为包含选择器,可以选择父元素里面的子元素。

空格隔开的表示后代选择器。外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就称为外层标签的后代。元素1和元素2可以是任意基础选择器。

需求:同时有 ol 和 ul 标签,想要把 ol 里面的 li 选出来改为 pink 颜色。ol li {color: pink;} 孙子也行:ol li a { color:red;}

子选择器(重要)

子选择器只能选择作为某元素的最近一级子元素。简单来说就是亲儿子元素。元素1>元素2 {样式声明}

并集选择器(重要)

并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。

通过逗号连接,表示和的意思。任何形式的选择器都可以作为并集选择器的一部分。

约定竖着写,这样比较好识别。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第N个元素。:hover`:first-child`

链接伪类选择器

love hate 需要按顺序进行书写,不要颠倒!

a:link a:visited a:hover`a:active`

a 链接在浏览器中具有默认样式,在实际工作中需要给链接单独指定样式。

focus 伪类选择器

focus 伪类选择器 用于选取获得焦点表单元素。焦点就是光标,一般情况下 <input>类表单元素才有。

复合选择器总结

| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
| :- | :- | :- | :- | :- |
| 后代选择器 | | | | 空格 |
| 子代选择器 | | | | > |
| 并集选择器 | | | | , |
| 链接伪类选择器 | | | | a:hover |
| :focus伪类选择器 | | | | input:focus |

CSS 的元素显示模式(block inline)

什么是元素显示模式?网页的标签非常多,在不同的地方会用到不同类型的标签,了解它们的特点可以更好的布局我们的网页。

元素显示模式 就是 元素(标签)以什么方式进行显示,比如 <div>自己占一行,比如一行可以放多个<span>。

HTML 元素一般分为 块元素(block) 和 行内元素(inline) 两种。

block element-div

常见的块元素有:<h1>-<h6>、<p>、<div>、<ol><ul><li>等,特点:

  1. 比较霸道,自己独占一行。
  2. 可以设置高度、宽度、外边距及内边距。
  3. 宽度默认是容器(父级宽度)的100%。
  4. 是一个容器及盒子,里面可以放行内或者块级元素。

注意:文字类的元素内不能使用块级元素。<p> 标签主要用于存放文字,因此里面不能放块级元素,特别是不能放<div>。同理,<h1~6> 文字类块级标签,里面也不能放其他块级元素。

inline element-span

常见的行内元素有:<a><strong><b><em><i><del><s><ins><u><span>等,特点:

  1. 相邻行内元素在一行上,一行可以显示多个。
  2. 高度、宽度直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或其他行内元素。

注意:<a>特殊,链接里不能再放链接,链接里可以放块级元素,但是给<a>转换一下块级模式最安全。

行内块元素

行内元素中有几个特殊的标签:<img> <input> <td>,它们同时具有块元素和行内元素的特点,有些资料称它们为行内块元素。特点:

  1. 一行可以显示多个(行内元素特点)
  2. 默认宽度就是它本身内容的宽度。(行内元素特点)
  3. 可以控制高度、行高、外边距、内边距。(块级元素特点)

元素显示模式总结

| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| :- | :- | :- | :- | :- |
| 块级元素 | 一行一个 | 可设置高、宽 | 容器的100% | 可包含任何标签 |
| 行内元素 | 一行多个 | 不可设置 | 内容宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行多个 | 可设置高、宽 | 内容宽度 | |

元素显示模式的转换

我需要行内元素大一点,方便选择和点击。比如想要增加链接<a>的触发范围。

写法:display: block; other value:inline inline-block none

课堂练习:

小米商城侧边栏,见 Vscode 。

CSS 的背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图片固定等。

背景颜色

默认的值是:transparent(透明的)

背景图片

背景图片,实际开发中常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,相较于插入图片,优点是非常便于控制位置(精灵图也是一种运用场景)。

background-image: url();

背景平铺

背景图片平铺:background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景图片位置(重要)

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

X 坐标和 Y 坐标,可以使用方位名词或精确单位。

| value | description |
| :- | :- |
| length | 百分数、由浮点数字和单位标识符组成的长度值 |
| position | top / center / bottom / left / center / right 方位名词 |

方位名词:

  1. 如果是方位名词,那么 x y 的顺序无所谓,top left 和 left top 一样。
  2. 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐。

精确单位:

  1. 如果是精确单位,那么第一个肯定是 X 坐标,第二个一定是 Y 坐标。
  2. 如果只指定一个数值,那该数值一定是 X 坐标,另一个默认垂直居中。

混合单位:如果指定的两个值是混合使用的,则第一个值是x,第二个是y

背景图像固定(背景附着)

该属性用来设置背景图片随页面滚动或者固定不动,默认是随对象内容滚动。

background-attchment: scoll | fixed

背景复合写法

为了简化代码,将上面的属性合并简写在同一个属性 background 中。

并无特定的书写顺序,一般习惯约定顺序为:

background: 背景颜色 图片地址 背景平铺 背景图像滚动 背景图像位置;

背景色半透明

background: rgba(0,0,0,0.3);

red green blue alpha(0是全透明,1是不透明,可以简写成.3)

背景总结

| 属性 | 作用 | 值 |
| :- | :- | :- |
| background-color | | |
| background-image | | url(image's path) |
| background-repeat | | repeat/no-repeat/repeat-x/repeat-y |
| background-position | | length/positior,x y 坐标 |
| background-attachment | | |
| 背景简写 | | |
| 背景色半透明 | 背景颜色透明度 | background:rgba(0,0,0,0.3) |

综合案例-五彩导航

疑问:

  1. 使用类选择器和a链接选择器,拼成后代选择器,为什么不管用?答:.nav,你写成 .nva 了,要注意留意如何查找此类拼写错误的 bug。
  2. 使用 id 为什么选不到 a 链接元素?id 属性的值写成“123”不生效?
  3. 文字水平居中的代码:text-align:center;
  4. 图片压背景的,为什么图片不显示?设置错误。

CSS 的三大特性

CSS 有三个重要的特性:层叠性(cascade)、继承性( inheritance)、优先级(specificity)。

这些特性可以帮助我们理清楚不同代码之间的逻辑关系,让它们更加有序,而不会弄晕自己。

层叠性

给一个选择器设置了一个样式的不同值,在冲突的情况下,遵循层叠式原则:

  1. 就近原则,哪个样式离结构近,就执行哪个样式。(存疑:到底是遵循从上到下的代码执行逻辑还是?)
  2. 样式不冲突的话,不会层叠。

继承性

子标签会继承父标签的某些样式,如文本颜色和字号。

  1. 恰当的使用可以简化代码,降低 CSS 样式的复杂性。比如统一的大基调给 body 设置,让其他子标签去继承。
  2. 可以继承的样式:text-,font-,line-有关文字的,以及 color 属性。

行高的继承:行高可以跟单位,也可以不跟单位。

font: 12px/1.5 'Microsoft YaHei' 表示 line-height 是当前文字大小的1.5倍,重点在于与当前文字大小相关。

行高写 1.5 的优点在于:子元素可以根据自己文字大小自动调整行高。

优先级

当同一个元素指定了多个选择器,就会有优先级的产生。哪个选择器牛?比如一个标签选择器和一个类选择器。

  1. 选择器相同,执行层叠性。
  2. 根据选择器权重执行:标签范围越小,指代越明确,权重越大。

| 选择器 | 选择器权重 | 简单记忆 |
| :- | :- | :- |
| 继承 或 * | 0,0,0,0 | 0 |
| 元素选择器 | 0,0,0,1 | 1 |
| 类选择器、伪类选择器 | 0,0,1,0 | 10 |
| ID选择器 | 0,1,0,0 | 100 |
| 行内样式 style=“” | 1,0,0,0 | 1000 |
| !important | ∞ 无穷大 | ∞ 无穷大 |

注意事项:

  1. 权重是由 4 组数字组成,不会进位,ID 选择器永远>类选择器>元素选择器。
  2. 等级判断从左向右,如果某一位数字相同,则判断下一位数值。
  3. 继承的权重是 0 ,简而言之,没有直接针对性指定的,都不行。我们要看这个标签有没有被直接选出来。
  4. a 链接。 浏览器已默认制定了一个样式,a { color:blue; text-decoration:underline;}

权重叠加:如果是复合选择器,会有权重叠加(永远不会有进位),需要计算权重。

  1. ul li 复合选择器的权重是0,0,0,2,li 的权重是0,0,0,1。

update:

  1. 2020.12.25-2021.01.04 在新知第五条设置了锚点,但是却不支持直接跳转,有些遗憾。
如果觉得我的文章对你有用,请随意赞赏