新知
- 键值对的概念
- rel(relation):用来设置对象与链接目的间的关系
- href(Hypertext Reference):指定超链接目标的 URL
- zen:禅宗、思考、沉思;inherit:继承
- Vscode 自动格式化代码设置
CSS 简介
Cascade Style Sheet:美化网页,布局页面。
CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。
CSS 和 HTML 一样,是一种标记语言。
CSS 的最大价值:让 HTML 专注去做结构呈现,样式交给 CSS,即结构和样式相分离。
CSS 语法规范
CSS 规则:选择器 + 声明(一条或多条)
CSS 代码风格
- 样式格式书写:紧凑格式、展开格式(纵向书写,推荐)
- 样式大小写风格:使用小写字母书写
- 样式空格风格:属性值前面,冒号后面,保留一个空格;选择器(标签)和大括号中间保留空格
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 的引入方式
- 行内样式表(行内式):适合简单地修改当前元素。
<p style="color: red; font-size: 12px; ">演示</p>
。控制一个标签。 - 内部样式表(嵌入式):理论可以放在任何在地方,但最好放在前面。可以控制一个页面。
- 外部样式表(链接式):样式单独写到 CSS 文件中,之后把 CSS 文件引入到 HTML 页面中使用。实际开发中都是这样,适合样式比较多的情况。控制多个页面。
3.1 新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。这个文件只有样式,没有标签。
3.2 在 HTML 页面中,使用 <link> 标签引入这个文件。<link rel="stylesheet" href="css文件路径">
Chrome 调试工具
打开方式:F12,或者右键点开检查
操作方式:
- 使用 Ctrl + 滚轮 放大和缩小界面,Ctrl + 0 复原浏览器大小。
- 左边是 HTML,右边是 CSS。
- 右边的 CSS 可以直接改动数值(左右箭头或者直接输入)和查看颜色。
- 可以直接选择某一元素,来查看有无错误,是否正确引入等。
CSS 第二天导读
emmet 语法
emmet 语法的前身是 Zen coding ,它使用缩写来提高 html/css 的编写速度,Vscode 已集成该语法。
快速生成 HTML 结构语法
- 直接输入标签名,按 tab 就可以生成标签。(写代码的时候自己发现的)
- 标签名*数字,生成多个相同标签。(自己发现的,毕竟一个个写太累了)
- 父子关系的标签,可以用 > 。比如
ul > li
,快速生成父子标签 - 兄弟关系的标签,使用 “+”。比如
div + p
- 如果生成带有类名或者 id 名字的,直接写 .demo 或者 #two tab 键就可以了。比如
.nav
#banner
默认是 div 标签,可以加标签,比如p.one
- 如果生成的 dvi 类名是有顺序的,可以用自增符号,比如
.demo$*4
- 如果想要生成的标签内部写内容,可以用 {} 表示。比如
div{我是一颗小小草}
快速生成 CSS 样式语法
- 直接使用首字母简写
<h2 id="5">格式化代码</h2>
- 右键:format document 格式化文档
- 设置 当保存页面的时候自动格式化代码:1.文件-首选项-设置 2.搜索 emmet.include; 3. 在 settings.json 下的 用户 中添加以下语句:
"editor.formatOnType": true
"editor.formatOnSave":true
CSS 的复合选择器
复合选择器是建立在基础选择器之上的,对基本选择器进行组合形成的。
- 可以更准确、高效的选择目标元素(标签)
- 由两个或多个基础选择器,通过不同的方式组合而成的
- 后代选择器、子选择器、并集选择器、伪类选择器等等
后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里面的子元素。
空格隔开的表示后代选择器。把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就称为外层标签的后代。元素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>
等,特点:
- 比较霸道,自己独占一行。
- 可以设置高度、宽度、外边距及内边距。
- 宽度默认是容器(父级宽度)的100%。
- 是一个容器及盒子,里面可以放行内或者块级元素。
注意:文字类的元素内不能使用块级元素。<p> 标签主要用于存放文字,因此里面不能放块级元素,特别是不能放<div>。同理,<h1~6> 文字类块级标签,里面也不能放其他块级元素。
inline element-span
常见的行内元素有:<a><strong><b><em><i><del><s><ins><u><span>
等,特点:
- 相邻行内元素在一行上,一行可以显示多个。
- 高度、宽度直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意:<a>
特殊,链接里不能再放链接,链接里可以放块级元素,但是给<a>
转换一下块级模式最安全。
行内块元素
行内元素中有几个特殊的标签:<img> <input> <td>
,它们同时具有块元素和行内元素的特点,有些资料称它们为行内块元素。特点:
- 一行可以显示多个(行内元素特点)
- 默认宽度就是它本身内容的宽度。(行内元素特点)
- 可以控制高度、行高、外边距、内边距。(块级元素特点)
元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| :- | :- | :- | :- | :- |
| 块级元素 | 一行一个 | 可设置高、宽 | 容器的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 方位名词 |
方位名词:
- 如果是方位名词,那么 x y 的顺序无所谓,top left 和 left top 一样。
- 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐。
精确单位:
- 如果是精确单位,那么第一个肯定是 X 坐标,第二个一定是 Y 坐标。
- 如果只指定一个数值,那该数值一定是 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) |
综合案例-五彩导航
疑问:
- 使用类选择器和a链接选择器,拼成后代选择器,为什么不管用?答:.nav,你写成 .nva 了,要注意留意如何查找此类拼写错误的 bug。
- 使用 id 为什么选不到 a 链接元素?id 属性的值写成“123”不生效?
- 文字水平居中的代码:
text-align:center;
- 图片压背景的,为什么图片不显示?设置错误。
CSS 的三大特性
CSS 有三个重要的特性:层叠性(cascade)、继承性( inheritance)、优先级(specificity)。
这些特性可以帮助我们理清楚不同代码之间的逻辑关系,让它们更加有序,而不会弄晕自己。
层叠性
给一个选择器设置了一个样式的不同值,在冲突的情况下,遵循层叠式原则:
- 就近原则,哪个样式离结构近,就执行哪个样式。(存疑:到底是遵循从上到下的代码执行逻辑还是?)
- 样式不冲突的话,不会层叠。
继承性
子标签会继承父标签的某些样式,如文本颜色和字号。
- 恰当的使用可以简化代码,降低 CSS 样式的复杂性。比如统一的大基调给 body 设置,让其他子标签去继承。
- 可以继承的样式:text-,font-,line-有关文字的,以及 color 属性。
行高的继承:行高可以跟单位,也可以不跟单位。
font: 12px/1.5 'Microsoft YaHei'
表示 line-height 是当前文字大小的1.5倍,重点在于与当前文字大小相关。
行高写 1.5 的优点在于:子元素可以根据自己文字大小自动调整行高。
优先级
当同一个元素指定了多个选择器,就会有优先级的产生。哪个选择器牛?比如一个标签选择器和一个类选择器。
- 选择器相同,执行层叠性。
- 根据选择器权重执行:标签范围越小,指代越明确,权重越大。
| 选择器 | 选择器权重 | 简单记忆 |
| :- | :- | :- |
| 继承 或 * | 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 | ∞ 无穷大 | ∞ 无穷大 |
注意事项:
- 权重是由 4 组数字组成,不会进位,ID 选择器永远>类选择器>元素选择器。
- 等级判断从左向右,如果某一位数字相同,则判断下一位数值。
- 继承的权重是 0 ,简而言之,没有直接针对性指定的,都不行。我们要看这个标签有没有被直接选出来。
- a 链接。 浏览器已默认制定了一个样式,
a { color:blue; text-decoration:underline;}
权重叠加:如果是复合选择器,会有权重叠加(永远不会有进位),需要计算权重。
- ul li 复合选择器的权重是0,0,0,2,li 的权重是0,0,0,1。
update:
- 2020.12.25-2021.01.04 在新知第五条设置了锚点,但是却不支持直接跳转,有些遗憾。