CSS学习笔记（详细，不定期更新）

CSS 学习笔记

---

CSS书写规范

顺序

1. 布局位置属性(position, top, right, z-index, display, float等)

2. 自身大小盒子模型(width, height, padding, margin)

3. 文字系列(font, line-height, letter-spacing, color- text-align等)

4. 背景(background, border等)

5. 其他 CSS3(animation, transition等)

https://www.zhihu.com/question/19586885

相关属性

大小

功能	属性名	单位
宽度	width	px
高度	height	px
行高	line-height	px
最大高度	max-height
最大宽度	max-width
最小宽度	min-width
最小高度	min-height

分类

功能	属性名	特殊值	说明
它侧面其他可浮	clear
指向它显示指针类	cursor	auto;alias;	鼠标的样子放上去变了
是否如何显示	display	inline;	可以把li标签设置成一行，经常用于导航栏
哪个方向浮动	float
是否可见	visibility

边框

功能	属性名	特殊值	说明
内边距	padding	10px
内边距	padding-left	2em	悬挂缩进两字符
边框	border-style
边框	border-left-style
边框宽度	border-width
边框颜色	border-color	transparent(透明的)
单边框颜色	border-top-color
边框圆角[3]	border-radius	10px	四个值: ↖1 ↗2 ↘3 ↙4 两个值: ↖↘1 ↗↙2
边框阴影[3]	box-shadow	10px 10px 5px #00CCFF	12位置3模糊4扩散。最后加inset关键字表示内阴影
边框图片[3]	border-image

浏览器前缀

注意使用CSS3的时候最好加上浏览器前缀：

1. Firefox: -moz-

2. Chrome, Safari:-webkit-

3. Opera:-o-

4. IE:-ms-

前缀并非都是需要的，但通常你加上这些前缀不会有副作用—只记住一条，把不带前缀的版本放到最后一行

-moz-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
-o-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;

盒子模型

功能	属性名	特殊值	说明
外边距	margin -bottom left top	2px	多个外边距会有重叠效果
内边距	padding-bottom left top	2px
盒子大小[3]	box-sizing	border-box	解决盒子大小计算问题，使得黑编剧和边框都算作宽高中
内容	content	2px

四个值的顺序

1. 四个值：上右下左
2. 三个值：上右下
3. 两个值：上右
4. 一个值：全部

内边距不撑开盒子

box-sizing: border-box;

居中对齐

1. 水平居中：

   position: fixed;
   margin-left: 50%;
   left: -盒子宽度/2;
   
   position: fixed;
   left:50%;
   margin-left: -盒子宽度/2;
   
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   /*对于绝对定位的元素*/
   margin: 0 auto;
   left: 0;
   right: 0;
   
   /*
   	2：将abllute元素放入relative中，设置relative元素margin:0 auto;
    */
   /*
   	3：left:50%
    */
   

2. 垂直居中

   position: fixed;
   top: 50%;
   margin-top: -盒子高度/2;
   

嵌套块元素垂直外边距塌陷问题

回 给子盒子上边距，父盒子外边距会塌陷

解决办法：

1. 可以为父元素定义透明外边框
2. 可以为父元素定义上内边距
3. 可以为父元素添加overflow:hidden (最常用)

注意：行内元素尽量不要设置上下的外边距，没啥效果

文字

功能	属性名	特殊值	说明
字体颜色	color:	blue
大小	font-size:	50px | medium	默认一般是16px
字体	font-family	fantasy	字体名称
文本方向	direction
行高	line-height
字符间距	letter-spacing
对齐文本	text-aling
文本修饰	text-decoration		下划线，上划线，删除线
缩进首行	text-indent	2em	缩进两字符，em相对字体大小，也可以写百分数
字体加粗	font-weight	bold; bolder;	默认为400，粗体是700.（100~900）
字体倾斜	font-style	normal（取消em标签的倾斜）
字母	text-transform	capitalize; lowercase; uppercase;
设置文本方向	unicode-bidi
设置垂直排列	writing-mode	tb-rl
空白处理方式	white-space	nowrap（强制一行），normal自动换行
文字溢出	text-overflow	ellipsis	单行溢出的文字用省略号显示
词间距	word-spacing	设置单词之间的距离（空白字符长）
阴影[3]	text-shadow	5px 5px 5px #FF00FF	x偏移 y偏移 清晰度 背景颜色
描边[3]	text-stroke	2px #FF0000;
换行方式1	word-wrap	break-word	打破字幕强制换行
换行方式2	word-break	break-all	打破词的换行
字不可选	user-select	none |text| all | element
大小写转换	font-variant	small-caps	全部大写
字体统一写法	font	倾斜 大小写 粗度 大小/行高 字体	按照顺序写
大小写转换	text-transform	up…均大写 low…均小写 cap…首大 none正常
空白处理	white-space		换不换行，和并合并空白字符

单位

em：相对父元素的字体大小的单位，（em标签表示强调），16px / 16 = em

rem：相对于html根元素的字体大小，可以做到统一修改的状态

图片

功能	属性名	特殊值	说明
透明度	opacity	0.5	[0~1]之间，0完全透明
背景图片定位	background-position	-20px -20px，还可以写center	左边表示x，右边表示y
背景图片固定	background-attachment	fixed表示固定背景
线性背景渐变	linear-gradient(方向，颜色1, 颜色2);	to right默认方向to bottom ，可以写10deg，0deg在12点方向然后顺时针增加	在background-image: 里面写
重复线性背景渐变	repeating-linear-gradient(red, yellow 10%, green 20%);	0%红色开始到10%处黄色到20%绿色结束，依次循环。
不渐变线性重复背景	repeating-linear-gradient( 45deg, yellow 0px, yellow 40px, black 40px, black 80px );	黄色从0px开始到40px，黑色40px到80px

背景属性压缩格式：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

图片背景有空白缝隙的问题：

vertical-align:middle

径向渐变

一般格式

background-image: radial-gradient(shape size at position, start-color, ..., last-color) 

at position为圆心位置

size属性

1. closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
2. closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
3. farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
4. farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

普通代码：

background-image: radial-gradient(circle, red, yellow, green);

重复的径向渐变

举例

background-image: repeating-radial-gradient(circle at 0 0,red, yellow 20%);

链接

功能	属性名	特殊值	说明
未被点击	a:link{……}
已被点击	a:visited{……}
鼠标划过	a:hover{……}
正在被点	a:active{……}
下划线去掉	text-decoration:	none;

列表

功能	属性名	特殊值	说明
标签	list-style-type:	none disc circle square
项图片	list-style-image:
标志位置	list-style-position:	inside; outside	包含图标还是不包含
类型	list-style-type:
底线对齐	vertical-align:	middle	设置图标 垂直方向的中间

表格

功能	属性名	特殊值	说明
边框tb,tr,th,td	border:	1px solid blue;
双变单边框tb	border-collapse:	collapse;
单元格宽tb	width:	400px;
单元格高tb	height:	400px;
内容居中tbrhd	text-align:	center;
背景颜色tbrhd	background-color:	aqua;
内边距	padding:	5px;

分栏

功能	属性名	特殊值	说明
栏数	column-count:	3;
间距	column-gap:	50px;
线条	column-rule:	5px outset #FF0000;
跨栏	column-span	1或者all	元素要跨越多少列，默认1
栏宽	column-width	100px
浏览器兼容	-webkit-以上

轮廓

功能	属性名	特殊值	说明
边框线条	outline-style:	groove;
颜色	outline-color:	dotted;
粗细	outline-width:	20px;

注意：相比border不占空间

定位

功能	属性名	特殊值	说明
位置	position:	static;relative;absolute;fixed;	静态（偏移量不起作用）、相对、绝对、固定浮动
上偏移量	top:
左偏移量	left:
右偏移量	right:
下偏移量	bottom:
溢出发生的事	overflow:
元素显示形状	clip:
垂直对齐方式	vertical-align:
元素堆叠顺序	z-index:		默认是auto，相当于是0

relative 相对定位

相对于自己原来的位置进行偏移，但是位置还是占有原来的位置

通常给绝对定位当爹的

absolute 绝对定位

如果没有父元素或者父元素没有定位，则以浏览器为准定位

父元素可以添加 position: relative 属性

（子绝父相）

fixed 固定定位

相对于浏览器窗口位置定位，不随界面滚动而移动

小技巧：定位在版心右侧的地方：

1. 先让固定定位的盒子 left:50% 走到浏览器可视区域版心一半的位置
2. 让固定定位的盒子 margin-left: 版心宽度一半的位置，多走版心宽度一半位置

flex 布局

原理

• 父元素添加flex属性之后，子元素的float、clear、和vertical-aline属性都会失效
• 伸缩布局弹性布局伸缩盒布局弹性盒布局flex布局
• display:flex 的父元素叫 Flex容器，他的子元素 成为 Flex项目

父元素属性

flex-direction：（主轴方向）

决定主轴方向，即项目（子元素）的排列方向。

1. row（默认值）：从左到右
2. row-reverse：从右向左
3. column：主轴为垂直方向，起点在上端。
4. column-reverse：主轴为垂直方向，起点在下端。

justify-content：（主轴 对齐方式）

1. flex-start（默认值）：左对齐
2. flex-end：右对齐
3. center： 居中
4. space-between：两端对齐，项目之间的间隔都相等。
5. space-around：每个项目两侧以相等的间隔环绕。

flex-wrap：（换行方式）

默认情况下，项目（子元素）排在一条线（又称”轴线”）上。如果一条轴线排不下，定义如何换行。

1. nowrap（默认）：不换行。缩小元素大小
2. wrap：换行，第一行在上方。
3. wrap-reverse：换行，第一行在下方。

lign-items：（侧轴 对齐方式）

定义项目在交叉轴上如何对齐。

1. flex-start （默认值） ：交叉轴的起点对齐。

2. flex-end：交叉轴的终点对齐。

3. center：交叉轴的中点对齐。

4. baseline: 项目的第一行文字的基线对齐。

5. stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content：（侧轴 对齐方式 多行）

定义有多根主轴（有多行）的对齐方式。如果项目只有一根主轴线，该属性不起作用。

1. flex-start ：与交叉轴的起点对齐。

2. flex-end：与交叉轴的终点对齐。

3. center：与交叉轴的中点对齐。

4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

5. space-around：每根轴线两侧的间隔都相等，相等间隔环绕。

6. stretch（默认值）：占满整个交叉轴。

flex-flow：（设置主轴 + 换行方式）

flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

默认值为row nowrap

子元素属性

order：

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow：

定义项目以扩大方式分配父盒子剩余空间所占比例份额，默认为0，即如果存在剩余空间，也不放大。

flex-shrink：

定义项目以缩小方式分配超出父盒子的空间所占比例份额，默认为1，即如果空间不足，该项目将缩小。将子元素宽度之和与父元素宽度的差值按照子元素 flex-basis的值分配给各个子元素，每个子元素原本宽度减去按比例分配的值，其剩余值为实际宽度。

flex-basis：

定义在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如200px）。

flex：

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。flex：none(伸缩特性失效)

align-self

align-self属性允许单个项目与其它项目不一样的对齐方式（交叉轴），可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。除了auto，其它取值都与align-items属性完全一致。

sticky 粘性定位

相对定位和固定定位的混合

该定位基于用户滚动的位置，可以在 position:relative 与 position:fixed 定位之间切换。先创建可以滚动的sticky元素，再设置滚动停止的目标位置。

特点：

1. 定位点参照浏览器可视窗口
2. 粘性定位占有原先的位置（相对定位的特点）
3. 必须添加top、left、right、bottom 其中一个才能生效

一开始是相对定位，等到滚动脱离的时候变成固定定位附着在浏览器边缘

static 静态定位

正常文档流

浮动

功能	属性名	特殊值	说明
脱离文档流	float:	left;right;	有位置就往里塞的感觉
取消浮动	clear:	left;right;	取消某方向的浮动

清除浮动：

1. 额外标签法

   <style>
       .clear {
           clear: both;
       }
   </style>
   <div class="father">
       <div></div>
       <div></div>
       <div class="clear">添加一个盒子并设置css</div>
   </div>
   

   给子元素里添加

2. overflow: hidden ：直接给父盒子添加的属性

3. after伪类元素（额外标签法的升级版本）

   .clearfix:after {
       content: "";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }
   .clearfix {
       /* IE6,7 专有 */
       *zoom: 1;
   }
   

   同时把 clearfix类名添加给给父盒子

4. 双伪元素清除浮动

   .clearfix:before, .clearfix:after {
       content: "";
       display: table;
   }
   .clearfix:after {
       clear: both;
   }
   .clearfix {
       *zoom: 1;
   }
   

   优点：左右完全闭合的清除浮动

5. 配合less的mixin清除浮动

   .clearfix() {
       // 加了小括号就不会当成一个类选择器了，这是正儿八经的混合
       &::after {
           content: "";
           display: block;
           clear: both;
       }
   }
   

   调用的时候：

   .container {
       .clearfix();
   }
   

2D3D变换：transform:+以下语句

变换中心点默认在矩形的中心点。

transform-origin: right bottom; /* 第一个参数是x，第二个是y */

功能	属性名	特殊值	说明
2D平移	translate();	100px,100px	第一个是x，第二个是Y，下方向是Y的正方向
2D平移X	translateX();	100px
2D旋转	rotate();	180deg
2D缩放	scale()	1,2	第一个是宽度倍数 第二个高度缩放倍数
2D缩放X	scaleX()
2D倾斜	skew()	20deg,20deg
2D倾斜X	skewX()	20deg
2D倾斜Y	skewY()	20deg	把y轴按顺时针旋转一定角度，
2D矩阵	matrix()
3Dx旋转	rotateX()	20deg
3Dy旋转	rotateY()	20deg
变形基点	transform-origin	0 0
3D矢量旋转	rotate3d(x,y,z,a)	x y z数量 a角度	x y z确定一个旋转轴矢量，然后根据左手定则绕轴旋转
透视强度设置	perspective	1000px	一般应用于父元素，越小透视越强
safari chrome		webkit-transform:以上
IE		-ms-transform:	360是IE的内核
opera		-o-transform:
firefox		-moz-transform:

动画过渡

功能	属性名	特殊值	说明
过渡名称	transition-property:
过渡时长	transition-duration:
过渡时间曲线	transition-timing-function:		默认是 “ease”。
过渡开始时间	transition-delay:	2s

div{
	width:100px;
	height:100px;
	-webkit-transition:width 2s,height 2s,-webkit-transform 2s;
	transition:width 2s,height 2s,transform 2s;
}
div:hover{
    width:100px;
    height:100px;
    transform:rotate(360deg);
    webkit-transform:rotate(360deg);
}

动画设置

.a {
    width: 200px;
    height: 200px;
    background-color: red;
    animation: myan 3s;
    animation-iteration-count: infinite; /*永远循环播放*/
}

@keyframes myan {
    0% {
        background-color: red;
    }

    10% {
        background-color: orange;
    }

    30% {
        background-color: green;
    }

    50% {
        background-color: blue;
    }

    100% {
        background-color: purple;
    }
}

滤镜

实例：

img {
    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px); /*高斯模糊*/
}

属性	说明
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如：filter: url(svg-url#element-id)

CSS全局变量

:root{
    --myColor: #00ccff;
    --h1Size: 100px;
    --h2Size: calc(var(--h1Size) * 0.85);
    --h3Size: calc(var(--h1Size) * 0.70);  /*calc来对变量做运算*/
    --h4Size: calc(var(--h1Size) * 0.65);
    --h5Size: calc(var(--h1Size) * 0.45);
    --h6Size: calc(var(--h1Size) * 0.35);
}
.main{
    width: 1000px;
    height: 1000px;
    margin: 0 auto;
    background-color: var(--myColor, #ff0000);  /*var来引用变量*/
}
h1{
    font-size: var(--h1Size);
}

---

选择器

选择器分组

h1,h2,h3,h4,h5{

}
//给多个元素加上同一个样式

派生选择器

li strong{
            
}

两个标签嵌套的，直接用空格写进去，空格是从属关系

精髓：谁更具体，就优先表现谁

id选择器

#id名称{
    
}
#id名称 a{
    
}	只给id里面的a标签添加颜色

类选择器

.类名称{

}
.类名称 a{

}
只给类里面的a标签添加颜色

属性选择器

css:
/* 选择有title属性的所有元素 */
[title]{
    color:blue;
}
/* 选择有title属性 且值未te的元素 */
[title=te]{
    color:red;
}
/* 选择有title属性 且值包含te的元素 */
[title~=te]{
    color:yellow;
}
/* 选择有title属性 且包含te且左右有“-”的元素 */
[title|=te]{
    color:yellow;
}
/* 选择有title属性 且包含te且首字符相同的元素 */
[title^=te]{
    color:yellow;
}
/* 选择有title属性 且包含te且末尾符相同的元素 */
[title$=te]{
    color:yellow;
}
/* 选择有title属性 且包含te且包含它的所有元素 */
[title*=te]{
    color:yellow;
}
body:
<p title="te">属性选择器<p>

注意：在IE6以及更早版本中不支持

总结

元素选择器

​ 最常见的选择器

选择器分组

	h1,h2{
        
	}

​ 逗号使用多个元素并列

类选择器

​ 独立于文档元素的方式指定样式

	.class{
        
	}
	a .class{
        
	}
	.class .class{
        
	}	多类选择器【并列的】

ID选择器

	#IdName{
        
	}

​ 与类的区别：

1. ID只能在文档中使用一次类可以使用很多次

2. ID选择器不能结合使用

3. 使用js的时候，需要用到id

属性选择器

	<p title=""></p>	
	[title]{}
	<a herf="http:...">   </a>
	[herf="http:..."]{}
	[title~="title"]{}		//只要名称中包含这个词的就算

后代选择器

	p strong{}		//递进 用空格表示 可以跨层

子元素选择器

	p>strong{}		//逐层递进 尖角号 不能跨层

相邻兄弟选择器（串连选末尾择器）

<style>
    p+h5+span {
        background-color: red;
    }
</style>

<p>p</p>
<h5>h5</h5>
<span>span</span>  <!--只有这个变红了，说明可以限制串：只选择p紧挨后面是h5紧挨后面是span的span元素-->
<h5>h5</h5>
<span>span</span>

	li+li{}			//第一个不用 剩下的用

后面选择器

为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景

	p~ul{}

相比 +来说限制更小，不用紧挨着就能选

---

使用字体

@font-face {
	font-family: "han";
	src        : url("../font/方正粗黑宋简体.ttf");
}

div{
    font-family: "han";
}

---

通配符

	*{
		margin:0px;
		padding:0px;
	}
//对所有的属性都起到效果

---

伪类

功能	名称	特殊值	说明
未被访问的链接	:link	{}
被点过的链接	:visited	{}
鼠标悬停	:hover	{}
鼠标按下的时候	:active	{}
鼠标按下点过一次后	:focus
当前活动的目标元素	:target		一些跳转id链接会显示到
表单方面
被选中的radio checkbox	:checked
默认状态的 单选多选项	:default
元素被禁用的状态	:disabled		disabled="disabled"
和上面相反	:enabled
元素的属性在区间内时候显示的样式	:in-range		<input type="number" min="5" max="10" value="7" />
该元素值在指定区间之外时显示的样式	:out-of-range
状态不确定的表单元素，用户还没操作过	:indeterminate
表单元素值非法的时候的样式	:invalid		<input type="email" value="supportEmail" />
表单元素值合法的时候的样式	:valid
该表单元素是可选项的时候	:optional		<input required> 没加required是可选
该表单元素是必填项的时候	:required
选取设置了 “readonly” 属性的元素	:read-only		火狐要加 -moz- 前缀
选取设置非 “readonly” 属性的元素	:read-write		适用于 input 和 textarea 元素
元素方面
选择器匹配文档根元素	:root
该元素没有子元素的状态	:empty
该元素的父元素下第一个子元素	:first-child
该元素的父元素下最后一个元素	:last-child
选择器匹配父元素下相同类型的子元素中的第一个	:first-of-type
	:last-of-type
找到第n个子元素	:nth-child(n)	(2n)或者(even)偶数行；（2n+1）(odd)奇数行	不写n就是所有
选择器匹配属于其元素的第 n 个子元素的每个元素	:nth-last-child(n)
	:nth-last-of-type(n)
	:nth-of-type(n)
当该元素的父元素只有该元素的时候	:only-child
所有不是targ标签的元素	:not(targ)	p、h1、div	冒号前面不用写东西

链接顺序：

记忆小方法：love&hate；link，visited，hover，active

伪元素列表

功能	名称	特殊值	说明
文字方面
元素的第一个字符	:first-letter		可以用于文字元素
添加内容到元素前面	::before	{content:“xxx”}	可以用于文字元素
添加内容到元素后面	::after	{content:“xxx”}	可以用于文字元素
更改选择的时候的背景颜色	::selection	{background:red}默认是蓝色	可以用于文字元素
更改元素内容的第一行属性	:frist-line
选取带有以指定值开头的 lang 属性的元素	:lang(…)

/* 鼠标 */a:link {    color: red;}/* 鼠标访问过的时候 */a:visited {    color: gray;}/* 鼠标放上去的时候 */a:hover{}/* 鼠标按下的时候 */a:active

---

CSS选择器优先级

优先值

padding: 10px !important; 后面加感叹号

优先级比较

1. !important 重要的 正无穷
2. 行内样式 style="" 1 0 0 0
3. ID选择器 0 1 0 0
4. 类选择器，伪类选择器 0 0 1 0
5. 元素选择器 0 0 0 1
6. 继承父元素的样式 或者 * 0 0 0 0

原理

• 选择器相同，执行层叠性
• 选择器不同，根据选择器权重执行

复合选择器权重叠加

li {} // 0 0 0 1ul li {} // 0 0 0 2.nav li {} // 0 0 1 1a:hover {} // 0 0 1 1

注意问题

• 内部style标签里的样式和外联link的css文件的样式其实是同等优先级的，关键就是看谁在下，优先级就高。下面的样式会覆盖上面样式里出现过的样式。

• 如果css里又引用了一个另外的css，也就是css的头顶上写了一个 @import "xxx.css"，则先加载这个css里面的内容，再加载本css里面的内容，所以如果有重复的话，后加载的会覆盖以前的。

• 如果有多个css引用了很多个二级css，很多二级css都引用了三级css，构成了一个树结构，那么加载（覆盖）顺序就是（文件行）从上到下，深度优先遍历的顺序。

• 用js赋予某个元素样式是赋予该元素的内联样式，优先级比较高

• 如果多个script代码，会按照从html文件里从上往下的顺序算，但是不能先于元素标签出现。

• 如果要先于元素标签出现的位置写js代码，给该元素赋样式，外面要用 onload包起来

  window.onload = function () {    let a1 = document.querySelector(".a1");    a1.style.setProperty("color", "yellow", "important");    console.log("end");}
  

• 还可以用延迟设置来覆盖加载完毕的js赋予的样式

  setTimeout(() => {    let a1 = document.querySelector(".a1");    a1.style.setProperty("color", "red", "important");    console.log("end red");}, 1); // 延迟0.001s后 覆盖以前的样式
  

  这从时间角度来看，也算是一种覆盖吧。

引用

@import url("外部样式表文件");@import "mystyle.css";

---

响应式布局

视口

移动端视口标记： <meta name="viewport">

视口设置

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小
• initial-scale：初始缩放比例
• maximum-scale：允许用户缩放到的最大比例
• minimum-scale：允许用户缩放到的最小比例
• user-scalable：用户是否可以手动缩放。user-scalable = no，禁用缩放功能。

媒体查询

在css标签中写：

@media mediatype and|not|only (media feature) {    css-Code;}

• @media 开头声明
• mediatype 媒体类型
  • all 用于所有设备
  • print 打印机和打印预览
  • scree 用于电脑屏幕，平板电脑，智能手机
• 关键字 and not only
  • and：可以将多个媒体特性连接到一起，相当于“且”
  • not：排除某个媒体类型
  • only：指定某个特定的媒体类型
• media feature 媒体特性 必须有小括号包全
  • 最大宽度800px

示例：屏幕宽度小于800的时候变成粉色

@media screen and (max-width: 800px) {    body {        background-color: pink;    }}

引入资源

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

建议：最好的方法是从小往大做

引例：

<link rel="stylesheet" media="screen and (min-width: 320px)" href="mystylesheet320.css"><link rel="stylesheet" media="screen and (min-width: 640px)" href="mystylesheet640.css">

响应式图片标记

目前兼容性还不是很好

<picture>  <source media="only screen and (min-width: 650px)" srcset="img/pic1.png">  <source media="only screen and (min-width: 465px)" srcset="img/pic21.png">  <img src="img/default.png"  style="width:auto;"></picture>

---

Less语法

@border: 5px + 5;   .nav {    .logo {        width: 100px;    }}

嵌套

伪类

a {    &link {        color: blue;    }}

运算

1. 运算符号必须要隔开
2. 如果两个数参与运算，单位不一样，运算单位以前面的单位为准
3. 如果两个只有一个有单位，那么就是那个的单位