这篇主要讲解什么是CSS及JavaScript对CSS的操作。
1.什么是CSS？
1.CSS是一门表现HTML样式的语言。(是什么） 2.CSS可以改变任意HTML元素的样式。（干什么） 3.HTML可以在浏览器里执行。（在哪用）
2.网页
我们在浏览器看到的网页由HTML、CSS、JavaScript构成。 HTML代表结构，如人的骨骼； CSS代表样式，如人的皮肤； JavaScript代表行为，如人的行动。
网站所对应的网页就像生活中的人有高矮胖瘦之分。 网页所展示的颜色、布局就像生活中的人的皮肤和身体部位的差异。 网页所看到的各种效果就像生活中的人在做不同的动作一样。
3.CSS选择器
元素选择器
#id /*id选择器*/
.class /*类选择器*/
element /*元素选择器*/
* /*所有元素*/关系选择器
element1,element2 /*所有element1和element2元素*/
element1 element2 /*所有element1元素下的所有element2元素 后代选择器*/
element1>element2 /*获得父元素为element1的element2元素*/
element1+element2 /*获得element1后面相邻的element2元素*/
element1~element2 /*获得element1后面的element2元素*/属性选择器
[attribute] /*获得含有attribute属性的元素*/
[attribute=value] /*获得attribute=value的元素*/
[attribute*=value] /*获得attribute包含value的元素*/
[attribute^=value] /*获得attribute开头是value的元素*/
[attribute$=value] /*获得attribute结尾是value的元素*/伪类选择器
a:link /*未被访问的链接*/
a:visited /*已被访问的链接*/
a:active /*激活的链接*/
a:hover /*鼠标移上去的链接*/
input:focus /*获得焦点的input元素*/
input:checked /*获得被选中的input元素*/
input:enabled /*获得启用的input元素*/
input:disabled /*获得禁用的input元素*/
p:first-clild /*获得父元素第一个子元素且该元素为p的元素*/
p:last-child /*获得父元素最后一个元素且该元素为p的元素*/
p:only-chlild /*获得父元素中只有一个元素且该元素为p的元素*/
p:nth-chlid(n) /*获得父元素中第n个元素且该元素为p的元素*/
p:nth-last-child(n) /*获得父元素中倒数第n个元素且该元素为p的元素*/
p:first-of-type /*获得父元素的首个p元素*/
p:last-of-type /*获得父元素的最后一个p元素*/
p:only-of-type /*获得父元素只有p元素的元素*/
p:nth-of-type(n) /*获得父元素中第n个p元素*/
p:nth-last-of-type(n) /*获得父元素中倒数第n个p元素*/
p:empty /*没有任何子元素的p元素*/
div:target /*匹配相关URL指向的div元素*/
div:not(p) /*获得没有p元素的div元素*/伪对象选择器
p:first-letter /*获得p元素的首字母*/
p:first-line /*获得p元素的首行*/
p:before /*p元素之前插入内容*/
p:after /*p元素之后插入内容*/
p::selection /*p元素被选择时的样式*/
input::placeholder /*input元素文字占位符的样式*/4.Style属性
在JavaScript中，可以用element.style属性设置该元素的样式。 尺寸属性
width /*宽度*/
min-width /*最小宽度*/
max-width /*最大宽度*/
height /*高度*/
min-height /*最小高度*/
min-width /*最大高度*/边框属性
border /*复合属性*/
border-color /*边框颜色*/
border-style /*边框样式*/
border-width /*边框宽度*/
border-radius /*圆角边框*/
border-image /*用图像来填充*/
box-shadow /*边框阴影*/边界属性
margin /*复合属性*/
margin-top /*上边距*/
margin-right /*右边距*/
margin-bottom /*下边距*/
margin-left /*左边距*/
padding /*复合属性*/
padding-top /*内上边距*/
padding-right /*内右边距*/
padding-bottom /*内下边距*/
padding-left /*内左边距*/背景属性
background /*复合属性*/
background-attachment /*背景图像是否固定或者随着页面的其余部分滚动*/
background-color /*背景颜色*/
background-image /*背景图片*/
background-position /*背景图片位置*/
background-repeat /*背景图片如何铺排填充*/
background-clip /*背景绘制区域*/
background-origin /*背景图片参考原点*/
background-size /*背景图片的尺寸大小*/颜色及界面属性
color /*颜色*/
opacity /*元素透明度*/
cursor /*光标样式*/
zoom /*缩放比例*/
resize /*是否允许调节元素尺寸大小*/
pointer-events /*光标事件*/字体属性
@charset /*字符编码*/
@font-face /*自定义字体*/
font /*复合属性*/
font-style /*字体样式*/
font-variant /*是否为小型的大写字母*/
font-weight /*字体粗细*/
font-size /*字体大小*/
font-family /*字体名称*/文本属性
white-space /*空格的处理方式*/
word-break /*文本的字内换行行为*/
word-wrap /*内容超过指定容器的边界时是否断行*/
word-spacing /*单词之间的间隔大小*/
letter-spacing /*字符之间的间隔大小*/
text-transform /*文本的大小写*/
text-align /*内容的水平对齐方式*/
text-indent /*文本缩进*/
text-decoration /*文本装饰*/
text-overflow /*容溢出其块容器是否截断或者添加...*/
vertical-align /*内联元素在行框内的垂直对其方式*/
line-hieght /*对象的行高*/
content /*在:before或:after显示内容*/书写模式属性
direction /*文本流的方向*/
unicode-bidi /*同一个页面里存在从不同方向读进的文本显示*/
writing-mode /*内容块固有的书写方向*/列表属性
list-style /*复合属性*/
list-style-type /*列表标记*/
list-style-position /*列表标记如何根据文本排列*/
list-style-image /*列表标记的图像*/表格属性
table-layout /*表格的布局算法*/
border-collapse /*表格的边独立还是合并*/
border-spacing /*表格边框在横向和纵向上的间距*/
caption-side /*表格标题在表格的上边还是下边*/
empty-cells /*是否显示表格的边框*/转换属性
transform /*对象的矩阵变化、平移、旋转、缩放、扭曲*/
transform-origin /*转换原点*/过渡属性
transition /*复合属性*/
transition-property /*过渡的css属性*/
transition-duration /*过渡的持续时间*/
transition-timing-function /*过渡类型*/
transition-delay /*过渡延迟时间*/动画属性
@keyframes /*定义一个动画*/
animation /*复合属性*/
animation-name /*@keyframes定义的动画名*/
animation-duration /*动画持续时间*/
animation-timing-function /*动画类型*/
animation-delay /*动画延迟时间*/
animation-iteration-count /*动画播放次数*/
animation-direction /*动画是否反向播放*/
animation-play-state /*运行或暂停*/
animation-fill-mode /*动画时间之外的状态*/定位属性
position /*定位方式*/
z-index /*层级*/
top /*向下偏移*/
left /*向右偏移*/
bottom /*向上偏移*/
right /*向左偏移*/布局属性
display /*是否及如何显示*/
visibility /*是否显示对象 会占空间*/
float /*浮动*/
clear /*不允许有浮动对象*/
overflow /*复合属性*/
overflow-x /*x轴内容溢出元素框时*/
overflow-y /*y轴内容溢出元素框时*/媒体查询属性
@import /*导入外部样式表及目标媒体*/
@media /*媒体类型和查询条件*/
width /*宽度*/
height /*高度*/
device-width /*屏幕可见宽度*/
device-height /*屏幕可见高度*/
orientation /*页面可见高度是否大于或等于宽度*/
aspect-ratio /*页面可见宽度与高度的比率*/
devive-aspect-ratio /*屏幕分辨率，及屏幕可见宽度与高度的比率*/
color /*颜色*/
monochrome /*单色*/
grid /*是否使用栅格或点阵*/提升优先权属性
!important /*提升样式优先权*/5.属性单位类型及值类型
长度单位
相对长度单位
em:相对于当前对象内文本的字体尺寸
ex:相对于字符“x”的高度。通常为字体高度的一半
rem:相对于html元素font-size计算值的倍数
vw:相对于视口viewport宽度大小。视口被均分为100单位的vw
vh:相对于视口viewport高度大小。视口被均分为100单位的vh
vmax:如果宽度比高度要大，则相对于视口viewport宽度大小
vmin:如果宽度比高度要小，则相对于视口viewport宽度大小
绝对长度单位
q:1/4毫米
mm:毫米
cm:厘米
in:英寸
pt:点
pc:派卡
px:像素
换算单位
1in = 2.54cm = 25.4mm = 101.6q = 72pt = 6pc = 96px角度单位
deg:度 360
grad:梯度 400
rad:弧度 2π
turn:圈 1
换算单位
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad时间单位
ms:毫秒
s:秒
换算单位
1s = 1000ms分辨率单位
dppx:每像素包含点的数量
dpi:每英寸包含点的数量
dpcm:每厘米包含点的数量
换算单位
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi数字值
number:1|1.5
percentage:1%文本值
initial:初始值
inherit:继承祖先的值
""|''颜色值
ColorName:black
HEX:#000|#000000
RGB:rgb(0,0,0)|rgb(0%,0%,0%)
RGBA:rgb(0,0,0,1)|rgb(0%,0%,0%,1)
HSL:hsl(360,50%,50%)
HSLA:hsl(360,50%,50%,1)
transparent:透明
currentColor:当前颜色图片和渐变值
image():
div{background:image(black.png, black)}
image-set():
div{background-image:image-set( url(test.png) 1x, url(test-2x.png) 2x )}
linear-gradient():颜色线性渐变
repeating-linear-gradient():重复颜色线性渐变
radial-gradient():颜色径向渐变
repeating-radial-gradient():重复颜色径向渐变6.常见Hack
条件Hack
<!--[if <keywords> IE <version>]>
HTML代码块
<![endif]-->
<keywords>:空、gt、gte、lt、lte、!
<version>:6、7、8、9属性Hack
_:选择IE6及以下
*:选择IE7及以下
\9:选择IE6+
\0:选择IE8+
在IE6、7、8显示不同颜色：
color: black\9; /* For IE8+ */
*color: white; /* For IE7 and earlier */
_color: green; /* For IE6 and earlier */