CSS****属性的官方文档
? CSS****官方文档地址
? CSS****推荐文档地址:
? 由于浏览器版本、****CSS****版本等问题，查询某些CSS是否可用:
可以到https://caniuse.com/查询CSS属性的可用性;
这个网站在后续的browserlist工具中我们再详细说明;
目前需要掌握的****CSS****属性
? 要想深刻理解所有常用****CSS****属性，最好先学会以下几个最基础最常用的CSS属性
font-size:文字大小
color:前景色(文字颜色)
background-color:背景色
width :宽度
height:高度
CSS属性 - background-color
? background-color决定背景色
CSS属性 - color
? color属性用来设置文本内容的前景色
- 包括文字、装饰线、边框、外轮廓等的颜色
CSS属性 – text
CSS属性 – text-decoration(常用)
? text-decoration用于设置文字的装饰线
- decoration是装饰/装饰品的意思;
? text-decoration有如下常见取值:
- none:无任何装饰线
? 可以去除a元素默认的下划线 - underline:下划线
- overline: 上划线
- line-through:中划线(删除线)
? a元素有下划线的本质是被添加了text-decoration属性
text-transform(一般)
? text-transform用于设置文字的大小写转换
- Transform单词是使变形/变换(形变);
? text-transform有几个常见的值:
- capitalize:(使...首字母大写, 资本化的意思)将每个单词的首字符变为大写
- uppercase:(大写字母)将每个单词的所有字符变为大写
- lowercase:(小写字母)将每个单词的所有字符变为小写
- none:没有任何影响
? 实际开发中用JavaScript代码转化的更多.
text-indent(一般)
? text-indent用于设置第一行内容的缩进
? text-indent: 2em; 刚好是缩进2个文字
text-align(重要)
? text-align: 直接翻译过来设置文本的对齐方式;
? MDN: 定义行内内容(例如文字)如何相对它的块父元素对齐;
? 常用的值
- left:左对齐
- right:右对齐
- center:正中间显示
- justify:两端对齐
letter-spacing、word-spacing(一般)
? letter-spacing、word-spacing分别用于设置字母、单词之间的间距
- 默认是0，可以设置为负数
CSS属性-字体
font-size(重要)
? font-size决定文字的大小
? 常用的设置
- 具体数值+单位
? 比如100px
? 也可以使用em单位(不推荐):1em代表100%，2em代表200%，0.5em代表50% - 百分比
? 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
font-family (重要, 不过一般仅设置一次)
? font-family用于设置文字的字体名称
- 可以设置1个或者多个字体名称;
- 浏览器会选择列表中第一个该计算机上有安装的字体;
- 或者是通过 @font-face 指定的可以直接下载的字体。
? 淘宝使用的字体:
font-weight(重要)
? font-weight用于设置文字的粗细(重量)
? 常见的取值:
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一个数字表示一个重量
- normal:等于400
- bold:等于700
? strong、b、h1~h6等标签的font-weight默认就是bold
font-style(一般)
? font-style用于设置文字的常规、斜体显示
- normal:常规显示
- italic(斜体):用字体的斜体显示(通?；嵊凶诺淖痔?
- oblique(倾斜):文本倾斜显示(仅仅是让文字倾斜)
? em、i、cite、address、var、dfn等元素的font-style默认就是italic
font-variant(了解)
? font-variant可以影响小写字母的显示形式
- variant是变形的意思;
? 可以设置的值如下
- normal:常规显示
- small-caps:将小写字母替换为缩小过的大写字母
line-height(常用)
? line-height用于设置文本的行高
- 行高可以先简单理解为一行文字所占据的高度
为什么文本需要行高?
line-height
? 行高的严格定义是:两行文字基线(baseline)之间的间距
? 基线(baseline):与小写字母x最底部对齐的线
line-height
? 注意区分height和line-height的区别
- height:元素的整体高度
- line-height:元素中每一行文字所占据的高度
? 应用实例:假设div中只有一行文字，如何让这行文字在div内部垂直居中
- 让line-height等同于height
font
? font是一个缩写属性
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
font-style font-variant font-weight font-size/line-height font-family
? 规则:
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
/line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略
CSS选择器(selector)
? 开发中经常需要找到特定的网页元素进行设置样式
- 思考:如何找到特定的那个元素?
? 什么是CSS选择器
- 按照一定的规则选出符合条件的元素，为之添加CSS样式
? 选择器的种类繁多，大概可以这么归类
- 通用选择器(universal selector)
- 元素选择器(type selectors)
- 类选择器(class selectors)
- id选择器(id selectors)
- 属性选择器(attribute selectors)
- 组合(combinators)
- 伪类(pseudo-classes)
- 伪元素(pseudo-elements)
通用选择器
? 通用选择器(universal selector)
- 所有的元素都会被选中;
? 一般用来给所有元素作一些通用性的设置
- 比如内边距、外边距;
- 比如重置一些内容;
? 效率比较低，尽量不要使用;
简单选择器
? 简单选择器是开发中用的最多的选择器:
- 元素选择器(type selectors), 使用元素的名称;
- 类选择器(class selectors), 使用 .类名 ;
- id选择器(id selectors), 使用 #id;
id注意事项
? 一个HTML文档里面的id值是唯一的，不能重复
id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为id值
? 中划线又叫连字符(hyphen)
属性选择器(attribute selectors)
? 拥有某一个属性 [att]
? 属性等于某个值 [att=val]
? 其他了解的(不用记)
[attr*=val]: 属性值包含某一个值val;
[attr^=val]: 属性值以val开头;
[attr$=val]: 属性值以val结尾;
[attr|=val]: 属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割;
后代选择器(descendant combinator)
? 后代选择器一: 所有的后代(直接/间接的后代)
- 选择器之间以空格分割
? 后代选择器二: 直接子代选择器(必须是直接自带)
- 选择器之间以 > 分割;
兄弟选择器(sibling combinator)
? 兄弟选择器一:相邻兄弟选择器
- 使用符号 + 连接
? 兄弟选择器二: 普遍兄弟选择器 ~
- 使用符号 ~ 连接
选择器组 – 交集选择器
? 交集选择器: 需要同时符合两个选择器条件(两个选择器紧密连接)
- 在开发中通常为了精准的选择某一个元素;
? 并集选择器: 符合一个选择器条件即可(两个选择器以,号分割)
- 在开发中通常为了给多个元素设置相同的样式;
认识伪类
? 什么是伪类呢?
Pseudo-classes: 翻译过来是伪类;
伪类是选择器的一种，它用于选择处于特定状态的元素;
? 比如我们经?；崾迪值? 当手指放在一个元素上时, 显示另外一个颜色;
伪类(pseudo-classes)
? 常见的伪类有
-
1.动态伪类(dynamic pseudo-classes)
- :link、:visited、:hover、:active、:focus
-
2.目标伪类(target pseudo-classes)
- :target
-
3.语言伪类(language pseudo-classes)
- :lang( )
-
4.元素状态伪类(UI element states pseudo-classes)
- :enabled、:disabled、:checked
-
5.结构伪类(structural pseudo-classes)
:nth-child( )、:nth-last-child( )、:nth-of-type( )、:nth-last-of-type( )
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty
-
6.否定伪类(negation pseudo-classes)
- :not()
所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
动态伪类(dynamic pseudo-classes)
? 使用举例
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接(鼠标在链接上长按住未松开)
? 使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
所以建议的编写顺序是 :link、:visited、:hover、:active
? 除了a元素，:hover、:active也能用在其他元素上
动态伪类 - :focus
? :focus指当前拥有输入焦点的元素(能接收键盘输入)
- 文本输入框一聚焦后，背景就会变红色
? 因为链接a元素可以被键盘的****Tab****键选中聚焦，所以:focus也适用于a元素
? 动态伪类编写顺序建议为
- :link、:visited、:focus、:hover、:active
? 直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
- 相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
伪元素(pseudo-elements)
? 常用的伪元素有
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after
? 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
伪元素 - ::first-line - ::first-letter(了解)
? ::first-line可以针对首行文本设置属性
? ::first-letter可以针对首字母设置属性
伪元素 - ::before和::after(常用)
? ::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)
- 常通过 content 属性来为一个元素添加修饰性的内容。
CSS继承-层叠-元素类型
CSS的属性继承
? CSS的某些属性具有继承性(Inherited):
如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性;
当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高);
? 如何知道一个属性是否具有继承性呢?
常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性;
这些不用刻意去记, 用的多自然就记住了;
? 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的:
tips:注意(了解):继承过来的是计算值, 而不是设置值
常见的继承属性有哪些呢?(不用记)
CSS属性的层叠
? CSS的翻译是层叠样式表, 什么是层叠呢?
- 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置;
- 那么属性会被一层层覆盖上去;
- 但是最终只有一个会生效;
? 那么多个样式属性覆盖上去, 哪一个会生效呢?
判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级;
判断二: 先后顺序, 权重相同时, 后面设置的生效;
选择器的权重
? 按照经验，为了方便比较****CSS****属性的优先级，可以给CSS属性所处的环境定义一个权值(权重)
- !important:10000
- 内联样式:1000
- id选择器:100
- 类选择器、属性选择器、伪类:10
- 元素选择器、伪元素:1
- 通配符:0
HTML元素的类型
? 我们会经常提到div是****块级元素****会独占一行, span是****行内级元素****会在同一行显示.
- 到底什么是块级元素, 什么是行内级元素呢?
? HTML定义元素类型的思路:
HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;
-
当我们把这个元素放到页面上时, 这个元素到底占据页面中一行多大的空间呢?
? 为什么我们这里只说一行呢? 因为垂直方向的高度通常是内容决定的;
比如一个h1元素的标题, 我们必然是希望它独占一行的, 其他的内容不应该和我的标题放在一起;
比如一个p元素的段落, 必然也应该独占一行, 其他的内容不应该和我的段落放在一起;
而类似于img/span/a元素, 通常是对内容的某一个细节的特殊描述, 没有必要独占一行;
? 所以, 为了区分哪些元素需要独占一行, 哪些元素不需要独占一行, HTML将元素区分(本质是通过****CSS****的)成了两类
块级元素(block-level elements): 独占父元素的一行
行内级元素(inline-level elements):多个行内级元素可以在父元素的同一行中显示
通过CSS修改元素类型
? 前面我们说过, 事实上元素没有本质的区别:
div是块级元素, span是行内级元素;
div之所以是块级元素仅仅是因为浏览器默认设置了display属性而已;
? 那么我们是否可以通过display来改变元素的特性呢?
? 当然可以!
CSS属性 - display
? CSS中有个display属性，能修改元素的显示类型，有4个常用值
- block:让元素显示为块级元素
- inline:让元素显示为行内级元素
- inline-block:让元素同时具备行内级、块级元素的特征
- none:隐藏元素
? 事实上display还有其他的值, 比如flex, 后续会专门学习;
display值的特性(非常重要)
? block元素:
独占父元素的一行
可以随意设置宽高
高度默认由内容决定
? inline-block元素:
跟其他行内级元素在同一行显示
可以随意设置宽高
可以这样理解
? 对外来说，它是一个行内级元素
? 对内来说，它是一个块级元素
? inline:
跟其他行内级元素在同一行显示; ? 不可以随意设置宽高;
宽高都由内容决定;
编写HTML时的注意事项
? 块级元素、inline-block元素
一般情况下，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)
特殊情况，p元素不能包含其他块级元素
? 行内级元素(比如a、span、strong等)
- 一般情况下，只能包含行内级元素
元素隐藏方法
? 方法一: display设置为none
- 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样);
? 方法二: visibility设置为hidden
设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间;
默认为visible, 元素是可见的;
? 方法三: rgba设置颜色, 将a的值设置为0
- rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素;
? 方法四: opacity设置透明度, 设置为0
- 设置整个元素的透明度, 会影响所有的子元素;
CSS****属性 - overflow
? overflow****用于控制内容溢出时的行为
visible:溢出的内容照样可见
hidden:溢出的内容直接裁剪
scroll:溢出的内容被裁剪，但可以通过滚动机制查看
会一直显示滚动条区域，滚动条区域占用的空间属于width、height
auto:自动根据内容是否溢出来决定是否提供滚动机制
CSS样式不生效技巧
? 为何有时候编写的CSS属性不好使，有可能是因为
选择器的优先级太低
选择器没选中对应的元素
CSS属性的使用形式不对
? 元素不支持此CSS属性，比如span默认是不支持width和height的
? 浏览器不支持此CSS属性，比如旧版本的浏览器不支持一些css module3的某些属性
? 被同类型的CSS属性覆盖，比如font覆盖font-size
? 建议 充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错
CSS盒子模型
认识盒子
? 生活中, 我们经?；峥吹礁髦指餮暮凶?
HTML每个元素都是盒子
? 事实上, 我们可以把HTML每一个元素看出一个个的盒子:
盒子模型(Box Model)
? HTML中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这4个属性
-
内容(content)
- 元素的内容width/height
-
内边距(padding)
- 元素和内容之间的间距
-
边框(border)
- 元素自己的边框
-
外边距(margin)
- 元素和其他元素之间的间距
盒子模型的四边
? 因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边:
在浏览器的开发工具中
内容 – 宽度和高度
? 设置内容是通过宽度和高度设置的:
宽度设置: width
高度设置: height
? 注意: 对于行内级非替换元素来说, 设置宽高是无效的!
? 另外我们还可以设置如下属性:
min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
max-width:最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时, 可以设置最大宽度和最小宽度;
? 下面两个属性不常用:
min-height:最小高度，无论内容多少，高度都大于或等于min-height
max-height:最大高度，无论内容多少，高度都小于或等于max-height
内边距 - padding
? padding属性****用于设置盒子的内边距, 通常用于设置****边框和内容之间的间距****;
? padding包括四个方向, 所以有如下的取值:
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
? padding单独编写是一个缩写属性:
padding-top、padding-right、padding-bottom、padding-left的简写属性
padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
? padding并非必须是四个值, 也可以有其他值;
padding的其他值
边框 - border
? border用于设置盒子的边框:
? 边框相对于content/padding/margin来说特殊一些:
边框具备宽度width;
边框具备样式style;
边框具备颜色color;
设置边框的方式
? 边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
? 边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性
? 边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
边框的样式设置值
? 边框的样式有很多, 我们可以了解如下的几个:
groove:凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
ridge:山脊, 和grove相反，边框看上去好象是从画布中凸出来
同时设置的方式
? 如果我们相对某一边同时设置 宽度 样式 颜色, 可以进行如下设置:
Border-top
Border-right
border-bottom
Border-left
border:统一设置4个方向的边框
? 边框颜色、宽度、样式的编写顺序任意
圆角 – border-radius
? border-radius用于设置盒子的圆角
? border-radius常见的值:
数值: 通常用来设置小的圆角, 比如6px;
百分比: 通常用来设置一定的弧度或者圆形;
border-radius补充
? border-radius事实上是一个缩写属性:
将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom- left-radius 简写为一个属性。
开发中比较少见一个个圆角设置;
? 如果一个元素是正方形, 设置border-radius大于或等于50%时，就会变成一个圆.
外边距 - margin
? margin属性****用于设置盒子的****外边距****, 通常用于****元素和元素之间的间距****;
? margin包括四个方向, 所以有如下的取值:
margin-top:上内边距
margin-right:右内边距
margin-bottom:下内边距
margin-left:左内边距
? margin单独编写是一个缩写属性:
margin-top、margin-right、margin-bottom、margin-left的简写属性
margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左;
? margin也并非必须是四个值, 也可以有其他值;
margin的其他值
上下margin的传递
? margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
?margin-bottom传递
- 如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
? 如何防止出现传递问题?
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC: 设置overflow为auto
?建议
margin一般是用来设置兄弟元素之间的间距
padding一般是用来设置父子元素之间的间距
上下margin的折叠
? 垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse(折叠)
? 水平方向上的margin(margin-left、margin-right)永远不会collapse
? 折叠后最终值的计算规则
- 两个值进行比较，取较大的值
? 如何防止margin collapse ?
- 只设置其中一个元素的margin
上下margin折叠的情况
? 两个兄弟块级元素****之间****上下margin的折叠
? 父子块级元素****之间****margin的折叠
外轮廓 - outline
? outline表示元素的外轮廓
不占用空间
默认显示在border的外面
? outline相关属性有
outline-width: 外轮廓的宽度
outline-style:取值跟border的样式一样，比如solid、dotted等
outline-color: 外轮廓的颜色
outline:outline-width、outline-style、outline-color的简写属性，跟border用法类似
? 应用实例
- 去除a元素、input元素的focus轮廓效果
盒子阴影 – box-shadow
? box-shadow属性可以设置一个或者多个阴影
每个阴影用<shadow>表示
多个阴影之间用逗号,隔开，从前到后叠加
? <shadow>的常见格式如下
第1个<length>:offset-x, 水平方向的偏移，正数往右偏移
第2个<length>:offset-y, 垂直方向的偏移，正数往下偏移
第3个<length>:blur-radius, 模糊半径
第4个<length>:spread-radius, 延伸半径
<color>:阴影的颜色，如果没有设置，就跟随color属性的颜色
inset:外框阴影变成内框阴影
盒子阴影 – 在线查看
? 我们可以通过一个网站测试盒子的阴影:
文字阴影 - text-shadow
? text-shadow用法类似于box-shadow，用于给文字添加阴影效果
? <shadow>的常见格式如下
- 相当于box-shadow, 它没有spread-radius的值;
? 我们可以通过一个网站测试文字的阴影:
行内非替换元素的注意事项
? 以下属性对行内级非替换元素不起作用
- width、height、margin-top、margin-bottom
? 以下属性对行内级非替换元素的效果比较特殊
- padding-top、padding-bottom、上下方向的border
CSS属性 - box-sizing
? box-sizing用来设置盒子模型中宽高的行为
? content-box
- padding、border都布置在width、height外边
? border-box
- padding、border都布置在width、height里边
box-sizing: content-box
? 元素的实际占用宽度 = border + padding + width
? 元素的实际占用高度 = border + padding + height
box-sizing: border-box
? 元素的实际占用宽度 = width
? 元素的实际占用高度 = height
IE盒子模型
元素的水平居中方案
? 在一些需求中，需要元素在父元素中水平居中显示(父元素一般都是块级元素、inline-block)
? 行内级元素(包括inline-block元素)
- 水平居中:在父元素中设置text-align: center
? 块级元素
- 水平居中:margin: 0 auto
CSS设置背景
认识网页的背景
? 在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景:
- 我们前面已经学习了如何设置背景颜色, 这里我们要学习设置背景的更多知识;
background-image
? background-image用于设置元素的背景图片
- 会盖在(不是覆盖)background-color的上面
? 如果设置了多张图片
- 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面
? 注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的
background-repeat
? background-repeat用于设置背景图片是否要平铺
? 常见的设值有
repeat:平铺
no-repeat:不平铺
repeat-x:只在水平方向平铺
repeat-y:只在垂直平方向平铺
background-size
? background-size用于设置背景图片的大小
auto:默认值, 以背景图本身大小显示
cover:缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见
contain:缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比
<percentage>:百分比，相对于背景区(background positioning area)
length:具体的大小，比如100px
background-position
? background-position用于设置背景图片在水平、垂直方向上的具体位置
可以设置具体的数值 比如 20px 30px;
水平方向还可以设值:left、center、right
垂直方向还可以设值:top、center、bottom
如果只设置了1个方向，另一个方向默认是center
background-attachment
? background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
? 可以设置以下3个值
scroll:此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动
local:此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动.
fixed:此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
background
? background是一系列背景相关属性的简写属性
? 常用格式是
? background-size可以省略，如果不省略，/background-size必须紧跟在background-position的后面
? 其他属性也都可以省略，而且顺序任意
background-image和img对比
? 利用background-image和img都能够实现显示图片的需求，在开发中该如何选择?
?总结
img，作为网页内容的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片
background-image，可有可无。有，能让网页更加美观。无，也不影响用户获取完整的网页内容信息
