已完成
务必下载!! 今日的代码和讲义 以及思维导图:【点击此链接下载 Day08.zip】
:nth-child
:nth-child(1)
父元素
中的第1
个子元素
:nth-child(2n)
n
代表任意正整数
和0
2
、4
、6
、8
……个):nth-child(even)
同义:nth-child(2n + 1)
n
代表任意正整数
和0
1
、3
、5
、7
……个):nth-child(odd)
同义nth-child(-n + 2)
:nth-last-child( )
:nth-last-child()
的语法跟:nth-child()
类似,不同点是:nth-last-child()
从最后一个子元素开始往前计数:nth-last-child(1)
,代表倒数第一
个子元素:nth-last-child(-n + 2)
,代表最后2
个子元素:nth-of-type()
用法跟:nth-child()
类似:nth-of-type()
计数时只计算同种类型的元素:nth-last-of-type()
用法跟 :nth-of-type()
类似:nth-last-of-type()
从最后一个这种类型的子元素开始往前计数:nth-of-type( )
、:nth-last-of-type( )
:first-child
,等同于:nth-child(1)
:last-child
,等同于:nth-last-child(1)
:first-of-type
,等同于:nth-of-type(1)
:last-of-type
,等同于:nth-last-of-type(1)
:only-child
,是父元素中唯一的子元素:only-of-type
,是父元素中唯一的这种类型的子元素:root
,根元素,就是HTML元素:empty
代表里面完全空白的元素:not()
的格式是:not(x)
x
是一个 简单选择器元素选择器
、通用选择器
、属性选择器
、类选择器
、id选择器
、伪类(除否定伪类)
:not(x)
表示 除x以外的元素border
宽度设置成50
会是什么效果呢?旋转
呢?border
或者CSS的特性
我们可以做出很多图形:font-family
一个或多个字体种类名称
,浏览器会在列表中搜寻
,直到找到它所运行的系统上可用的字体
。字体选择是有限的
;Web-safe
字体;并不能进行一些定制化的需求
;获取到希望使用的字体
(不是开发来做的事情):某些收费的字体
, 我们需要获取到对应的授权
;公司定制的字体
, 需要设计人员来设计
;免费的字体
, 我们需要获取到对应的字体文件
;CSS代码
当中使用该字体(重要):部署静态资源
时, 将HTML/CSS/JavaScript/Font一起部署在静态服务器中
;字体文件会被一起下载下来
;下载的字体文件中查找、解析、使用对应的字体
;在浏览器中使用对应的字体显示内容
;第一步
:在字体天下网站下载一个字体
第二步
:使用字体;
@font-face
来引入字体, 并且设置格式@font-face
用于加载一个自定义的字体;
OpenType/TrueType字体
:拓展名是 .ttf、.otf,
建立在TrueType字体之上Embedded OpenType字体
:拓展名是 .eot, OpenType字体的压缩版SVG字体
:拓展名是 .svg、 .svgzWOFF表示Web Open Font Format web开放字体
:
拓展名是 .woff,建立在TrueType字体之上https://font.qqe2.com/#
暂时可用bulletproof @font-face syntax
(刀枪不入的@font-face语法)“:Paul Irish
早期的一篇文章提及后@font-face开始流行起来 (Bulletproof @font-face Syntax)。src
用于指定字体资源url
指定资源的路径format
用于帮助浏览器快速识别字体的格式;设计成各式各样的形状
,那么能不能把字体直接设计成图标的样子呢
?当然可以
,这个就叫做字体图标
。阿里icons
(https://www.iconfont.cn/)link
引入iconfont.css
文件Unicode
来显示代码;class
, 直接使用即可;CSS图像合成技术
,将各种小图片合并到一张图片上
,然后利用CSS的背景定位来显示对应的图片部分
CSS雪碧
、CSS精灵
减少网页的http请求数量
,加快网页响应速度
,减轻服务器压力
图片总大小
图片命名的困扰
,只需要针对一张集合的图片命名Photoshop
, 设计人员提供cursor
可以设置鼠标指针(光标)在元素上面时的显示样式cursor
常见的设值有auto
:浏览器根据上下文决定指针的显示样式,比如根据文本和非文本切换指针样式default
:由操作系统决定,一般就是一个小箭头pointer
:一只小手,鼠标指针挪动到链接上面默认就是这个样式text
:一条竖线,鼠标指针挪动到文本输入框上面默认就是这个样式none
:没有任何指针显示在元素上面normal flow
( 标准流、常规流、正常流、文档流【document flow
】)进行排布margin-padding
位置调整margin
、padding
对元素进行定位margin
还可以设置负数margin
或者padding
,通常会影响到标准流中其他元素
的定位效果正常的文档流布局中取出元素
,并使它们具有不同的行为:放在另一个元素的上面
;始终保持在浏览器视窗内的同一位置
;position
属性static
:默认值, 静态定位relative
:相对定位absolute
:绝对定位fixed
:固定定位sticky
:粘性定位position属性
的默认值normal flow
布局left
、right
、top
、bottom
没有任何作用normal flow
布局left
、right
、top
、bottom
进行定位参照对象
是元素自己原来的位置
在不影响其他元素位置的前提
下,对当前元素位置进行微调
脱离normal flow
(脱离标准流、脱标)left
、right
、top
、bottom
进行定位viewport
)红框
所示黑框
所示画布 >= 视口
严格按照从上到下
、从左到右
排布严格区分块级
、行内级
,块级
、行内级的很多特性
都会消失