CSS

CSS

引入方式

内联

<标签 style=""></标签>

内部形式

<style type="text/css">
    选择器{
        属性:值;
        属性:值;
        属性:值
    }
</style>

外部形式

<link type="text/css" rel="stylesheet" href="css文件路径">

选择器

js写法	jQuery写法	css写法
get选择器()	$(选择器)	选择器{}

选择器	名称	用法	含义
*	通配选择器	$("*")	所有HTML元素
#id	id选择器	$("#id")
.class	class选择器	$(".class")
标签名	标签选择器	$(“标签”)
,	分组选择器	$(“选择器1，选择器2，选择器3”)	满足其中任意一个
空格	层级选择器	$(“选择器1 选择器2”)	选择器1中的 所有 选择器2元素
>	层级选择器	$(“选择器1 > 选择器2”)	选择器1中的 子辈 选择器2元素
+	层级选择器	$(“选择器1 + 选择器2”)	选择器1中的 所有选择器2的 子一级 元素
~	层级选择器	$(“选择器1 ~ 选择器2”)	选择器1中的 所有选择器2的 同一辈元素
[]	属性选择器		A[属性] 带有属性的所有元素 A[属性=值] 属性=值的所有元素 A[属性~=值] 属性含有值的所有元素 A[属性^=值] 属性以值开头的所有元素 A[属性$=值] 属性以值结尾的所有元素
:nth-Child(i)	子元素选择器		匹配父元素下的第n个子元素或奇偶元素。 i可为数值，表达式(even,odd)
:first-Child(i)	子元素选择器		匹配第一个子元素。 i可为数值，表达式(even,odd)
:last-Child(i)	子元素选择器		匹配最后一个子元素。 i可为数值，表达式(even,odd)
:only-Child(i)	子元素选择器		匹配父元素的只含一个子元素。 i可为数值，表达式(even,odd)
:hidden	可见性		匹配所有不可见元素
:visible	可见性		匹配所有可见元素
:contains()	内容		匹配包含给定文本的元素
:empty	内容		匹配所有不包含子元素或者文本的空元素
A:has(B)	内容		匹配含有B元素的A元素
:parent	内容		匹配含有子元素或文本的元素
:input	表单		匹配所有input，textarea，select和button元素
:text	表单		匹配text元素
:password	表单		匹配password元素
:radio	表单		匹配单选元素
:checkbox	表单		匹配复选元素
:submit	表单		匹配提交按钮元素
:image	表单		匹配图像元素
:reset	表单		匹配重置按钮元素
:button	表单		匹配按钮元素
:file	表单		匹配文件元素
:enabled	表单		匹配所有可用元素
:disabled	表单		匹配所有不可用元素
:checked	表单		匹配所有被选中的元素(单选框，复选框)
option:selected	表单		匹配所有被选中的下拉框元素
:not()			去掉与A匹配的标签
:even			偶数行
:odd			奇数行
:eq(i)			匹配第i个标签
:gt(i)			匹配大于i的标签
:lt(i)			匹配小于i的标签
:header			匹配标题元素(h1~h6)
:animated			匹配正在执行动画效果的元素

盒子模型

定位

参数
left	左
right	右
top	上
bottom	下
z-index	无单位的整数

文档流定位（默认定位）

元素分类	特点	常见元素
block	独占一行，可以设置长度和高度，内外边距都可以设置。	< p > < div > < h1 >~< h6 > < ul > < table >等
inline	不单独占一行，长度和高度都不可以设置，所谓的宽度是它所包含的文字或图片的高度和宽度，这是不可改变的。
inline-block	不单独占一行，可以设置宽度和高度，以及内外边距。例如	< img >

浮动定位float

清除浮动
clear:both	清除左右两边浮动
clear:left	单向清除左浮动
clear:right	单向清除右浮动
clear:none	默认值

层定位

对每个图层进行相应的定位

静态定位static

相对定位absolute

绝对定位relative

固定定位fixed

布局

两列自适应布局

float+overflow:hidden

选择器{
	overflow: hidden;
	float: left;
}

Flex弹性盒子布局

选择器{
	flex:1;
}

grid基于网格的二维布局

选择器{
	grid-template-columns:auto 1fr;
	grid-gap:20px;
    
}

设置

font字体样式

	值	用途
font-family:	名称	字体名称
font-style:	normal默认值,标准字体 italic斜体 oblique斜体(没有斜体变量的特殊字体)	字体风格
font-weight:	normal默认值,标准字体 bold粗体 数值	字体粗细
font-size:	数值	字体大小

color字体颜色

text文本

	值	用途
text-overflow:	ellipsis+overflow:hidden	当文本中字超过范围时自动用…代替
text-overflow:	ellipsis+white-space:nowrop	当文本中字超过范围时自动用…代替
text-indent:	XXpx
text-line-height:	XXpx
text-align:	left居左 right居右 center居中 justify两端对齐	对齐方式
text-decoration:	underline下划线 overline上划线 line-through穿中划线	文本修饰

backgroup背景

	值	用途
backgroup:
backgroup-image:	url(“背景图片地址”)	背景图像
backgroup-repeat:	repeat-x repeat-y	重复
background-color:	red #ffffff rgb(255,0,0)	背景颜色
background-position:	x% y% xpx ypx	背景图像的起始位置
background-attachment:	scrool背景图片与文字一起滚动 fixed背景图片与文字固定	背景图片与文字一起滚动
backgroup-size:		背景图像的尺寸

border边框

	值	用途
border:Apx solid red;
border-style:	none无 soid直线 dotted点线 dashed破折线 groove槽线 ridge脊线 inset内嵌	边框风格
border-width:	thin细 thick粗 数值	边框宽度
border-color:		边框颜色

gradients渐变

background-image:		描述
linear-gradient(#e66465, #9198e5);		从上到下
linear-gradient(red, yellow, green);		多个颜色
linear-gradient(to right, red , yellow);		从左到右
linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);		多个颜色
linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));		从左到右的线性渐变，带有透明度
linear-gradient(to bottom right, red, yellow);		从左上角到右下角
linear-gradient(-90deg, red, yellow);		指定的角度

transition过渡

	描述
transition:	简写属性，用于在一个属性中设置四个过渡属性。
transition-property:	规定应用过渡的 CSS 属性的名称。
transition-duration:	定义过渡效果花费的时间。默认是 0。
transition-timing-function:	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay:	规定过渡效果何时开始。默认是 0。

@keyframes动画

transform转换

2D转换

transform:
translate(Xpx,Ypx)	沿着 X 和 Y 轴移动元素。
rotate(Adeg)	旋转，在参数中规定角度。
scale(Xpx,Ypx)	缩放转换，改变元素的宽度和高度。
skew(Xpx,Ypx)	倾斜转换，沿着 X 和 Y 轴。
matrix(A,B,C,D,E,F)	转换，使用六个值的矩阵。

3D转换

transform:
rotateX(Adeg)	元素围绕其 X 轴以给定的度数进行旋转。
rotateY(Adeg)	元素围绕其 Y轴以给定的度数进行旋转。

a伪类

属性	用途
a:link	尚未点击过
a:visited	点击过的
a:hover	鼠标放在连接上边颜色
a:active	鼠标点击获取焦点

顺序：L，V，H，A

可见性

style=“display:none”

type=“hidden”

display

display值	用途
block	行内–>块状
inline	块状–>行内
none	隐藏该标签,不占空间

visibility

visibility值	用途
none	隐藏该标签,占空间