css链接方式
内嵌式：顾名思义，内嵌在.html文件中。
在<head></head>标签对中用<style></style>标签对，里面书写css样式。
外链式：编写独立的css文件，用<link>标签引入。
行内式：使用style直接写在标签上（行内样式牺牲了样式表批量设置样式的能力）。
导入式：通过@import来导入样式表。
不推荐，因为它不会等css渲染完毕，而是会直接渲染html。
使用场景：
当页面需要复杂的样式时使用外链式。
当使用少量代码就可以实现需求时，可以考虑行内式和内嵌式。
导入式不推荐，因为可能会导致网页“素面朝天”好几秒。
选择器：
标签选择器：又叫元素选择器，直接使用元素标签当作选择器，将选择页面所有该标签。
一般被用来初始化标签，因为覆盖面非长全。
id选择器：使用#id来选中html标签中的id。（原则来说，一个页面中id不能重名）
class选择器：使用.class来选中文档中的class。（可以同名，允许定义多个class名，使用空格隔开）
class和id命名规则：命名可以由数字，字母，下划线，短横构成，区分大小写，不能以数字开头。
后代选择器：使用空格表示后代，后代并不一定是儿子，而是选择后面的目标。
交集选择器：同时满足前者和后者的要求，之间没有空格。
并集选择器：使用逗号隔开，同时选择。
复合选择器：由于选择器可以任意搭配，从而形成复合选择器，我们必须一目了然。
伪类：指定要选择元素的特殊状态。
超级链接的4个特殊状态：
:link：未访问时的样式。
:visited：已访问时样式。
:hover：鼠标悬停时样式。
:active：正在激活时样式。
注意：当a标签的href值相同时，点击一个会让所有都变为已访问状态。
当同时书写多个伪类，要遵守以下规则：
link--visited--hover--active
序号选择器：
:first-child：选择第一个元素。
:last-child：选择最后一个元素。
:nth-of-type（）：选择第n个某类型子元素。
nth-last-of-type（）：选择倒数第n个某类型子元素。
nth-last-child()：倒数第n个子元素。
nth-child（）第n个子元素。
注意：nth-child（）可以写成an+b的形式（a指叠加值，b指起始值），表示从b开始每a个选择一个。
括号内也可以写成odd选择奇数，even选择偶数。
当nth-child()选择的元素不符合需求元素，选择器会失效。
属性选择器：
以img的alt属性为例。
[alt]：选择有这个属性的
[alt = "值"]：精准匹配。
[alt ^= "值"]：开头匹配。
[alt $= "值]：结尾匹配。
[alt *= "值"]：任意位置匹配。
[alt |= "值"]：值-开头。
[alt ~= "值"]：值为用空格分开的独立部分。
css3新增伪类：
:empty：选择空标签；
:focus：选择获得焦点的表单元素。
:enabled：选择有效的表单元素。
:disabled：选择无效的表单元素。
:checked：选择已经勾选的单选按钮或者复选框。
:root：选择当前根元素，即<html>标签。
伪元素：
::before：之前，成为匹配选中元素的第一个子元素，必须设置content属性。
::after：之后，成为匹配选中元素的最后一个子元素，必须设置content属性。
::selection：文档中被用户高亮的部分。（使用鼠标圈选的部分）。
::first-letter：会选中某元素中（必须是块级元素）第一行的第一个字母。
::first-line：会选中某元素中（必须是块级元素）第一行全部文字。
层叠性
css全名叫做“层叠样式表”，层叠性是它的很重要的性质。
层叠性：多个选择器可以同时作用于同一个标签，效果叠加。
层叠性冲突处理：id权重>class权重>标签权重
复杂选择器权重计算：复杂选择器可以通过数id个数，class个数，标签个数的形式，计算权重。
注意：1：在继承的模式下，数个数方式失效，会直接选中离目标最近的选择器，当选择器位置相同时，
才会重新用数个数计算权重。
2：!important：如果我们需要将某个选择器的某条属性权重提升，可以在属性后面加!important.
3:行内样式优先级>内部样式优先级.!important权重提升大于行内优先级。
文本字体属性
color:设置文本内容前景色，
font-size：设置文本字号。
font-weight：设置文本粗细程度。（normal：正常,bold：加粗,lighter：更细,bolder：更粗）
font-style：设置字体是否倾斜。（normal：不倾斜,italic：倾斜,oblique：斜体）
text-decoration：设置文本的修饰线。（none：不设置,underline：下划线,line-through：删除线）
font-family：设置字体。（可以是列表形式，英文字体放在前面，后面的字体作为前面字体的“后备”）
定义字体：：可以用@font-face定义字体（需要同时拥有eot,woff2,woff,ttf,svg），
自定义字体可以引用阿里巴巴普惠体。
font属性合写顺序：font-style font-weight/font-size line-height font-family
注意：倾斜和加粗必须在最前面，加粗和字号之间必须由斜线。
必须设置文字大小和字体，否则会失效。
合写font即使不写也会有默认行高。
字体定义方式
text-indent：属性定义文本首行文本内容之前缩进量。（单位em表示字符宽度）
line-height：设置文本行高，单位是px，不设置单位时，表示字号的倍数（推荐）
注意：当line-height数值设置为盒子高度时，实现单行文本垂直居中。
text-align：设置文本水平位置。
继承性
文本相关的属性普遍具有继承性，只要给祖先标签设置属性，即可在所有后代标签生效。
(color, font-开头, list-开头, text-开头, line-开头)
因为文本属性都具有继承性，所以通常给body标签设置字号，行高等，就可以作为网页的默认样式了。
a标签自身有color和text-decoration属性，所以继承样式不会在a标签生效，想要改变必须选择a标签。
权重计算：在继承的情况下，选择器计算失效，而是遵守“就近原则”。（在继承时，可以把权重当作0，谁近听谁的，位置相同，就按照权重计算来决定）
盒子模型
width，height不是盒子的总宽度高度，而是内容区域的宽度高度。
盒子总宽度等于:左border+左padding+width+右padding+右border
盒子总高度等于:上border+上padding+height+下padding+下border
padding:盒子的内边距，即内容到边框的距离。
四位数写法：上，右，下，左。
三位数写法：上 左右 下。
二位数写法：上下 左右。
当内边距三位数相同时，可以使用小属性层叠大属性方法快速设置。
margin:盒子的外边距。
塌陷现象：竖直方向的margin有塌陷现象，小的margin会塌陷到大的margin中，从而不叠加margin，以大值为准。
一些元素本身自带margin，要在一开始清除。
盒子水平居中：当把margin的左右值设置为auto，就可以实现水平居中。
margin传递现象：当父元素未设置margin-top属性时，子元素的会传递到父元素上。
解决方式：
（1）可以将子元素的margin-top改为给父元素添加padding-top（padding-top会增加高度，所以得配合减少盒子总宽度）
（2）给父元素设置overflow：hidden；（超出隐藏）
行内元素：无法设置宽高，可以设置padding，无法设置margin并列一排显示，宽度由内容撑起。
块级元素：可以设置宽高，可以设置padding，margin，独占一行。
行内块：同时拥有块级和行内两边特性，可设置宽高，可以并排显示。
display属性：
使用display：block转换为块级元素。
使用display：inline转换为行内元素。
使用display：inline-block转换为行内块。
使用：display：none可以隐藏元素，元素将彻底放弃位置，如同没写这个标签一样。
visibility:hidden，将元素隐藏，但是元素不放弃自己的位置。
box-sizing：
将盒子添加box-sizing：border-box属性后，盒子的width，height就代表盒子的总宽度和高度了，即padding和border为“内缩”而不再“外扩”。
但行好事，莫问前程！
网友评论