STAY HUNGRY , STAY FOOLISH.

求知若饥，虚心若愚。

| CSS        浏览:

JavaScript基础之操作CSS

这篇主要讲解什么是CSS及JavaScript对CSS的操作。

1.什么是CSS？

1.CSS是一门表现HTML样式的语言。(是什么）
2.CSS可以改变任意HTML元素的样式。（干什么）
3.HTML可以在浏览器里执行。（在哪用）

2.网页

我们在浏览器看到的网页由HTML、CSS、JavaScript构成。
HTML代表结构，如人的骨骼；
CSS代表样式，如人的皮肤；
JavaScript代表行为，如人的行动。

网站所对应的网页就像生活中的人有高矮胖瘦之分。
网页所展示的颜色、布局就像生活中的人的皮肤和身体部位的差异。
网页所看到的各种效果就像生活中的人在做不同的动作一样。

3.CSS选择器

元素选择器

1
2
3
4
#id /*id选择器*/
.class /*类选择器*/
element /*元素选择器*/
* /*所有元素*/

关系选择器

1
2
3
4
5
element1,element2 /*所有element1和element2元素*/
element1 element2 /*所有element1元素下的所有element2元素 后代选择器*/
element1>element2 /*获得父元素为element1的element2元素*/
element1+element2 /*获得element1后面相邻的element2元素*/
element1~element2 /*获得element1后面的element2元素*/

属性选择器

1
2
3
4
5
[attribute] /*获得含有attribute属性的元素*/
[attribute=value] /*获得attribute=value的元素*/
[attribute*=value] /*获得attribute包含value的元素*/
[attribute^=value] /*获得attribute开头是value的元素*/
[attribute$=value] /*获得attribute结尾是value的元素*/

伪类选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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元素*/

伪对象选择器

1
2
3
4
5
6
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属性设置该元素的样式。
尺寸属性

1
2
3
4
5
6
7
width /*宽度*/
min-width /*最小宽度*/
max-width /*最大宽度*/

height /*高度*/
min-height /*最小高度*/
min-width /*最大高度*/

边框属性

1
2
3
4
5
6
7
border /*复合属性*/
border-color /*边框颜色*/
border-style /*边框样式*/
border-width /*边框宽度*/
border-radius /*圆角边框*/
border-image /*用图像来填充*/
box-shadow /*边框阴影*/

边界属性

1
2
3
4
5
6
7
8
9
10
11
margin /*复合属性*/
margin-top /*上边距*/
margin-right /*右边距*/
margin-bottom /*下边距*/
margin-left /*左边距*/

padding /*复合属性*/
padding-top /*内上边距*/
padding-right /*内右边距*/
padding-bottom /*内下边距*/
padding-left /*内左边距*/

背景属性

1
2
3
4
5
6
7
8
9
background /*复合属性*/
background-attachment /*背景图像是否固定或者随着页面的其余部分滚动*/
background-color /*背景颜色*/
background-image /*背景图片*/
background-position /*背景图片位置*/
background-repeat /*背景图片如何铺排填充*/
background-clip /*背景绘制区域*/
background-origin /*背景图片参考原点*/
background-size /*背景图片的尺寸大小*/

颜色及界面属性

1
2
3
4
5
6
color /*颜色*/
opacity /*元素透明度*/
cursor /*光标样式*/
zoom /*缩放比例*/
resize /*是否允许调节元素尺寸大小*/
pointer-events /*光标事件*/

字体属性

1
2
3
4
5
6
7
8
9
@charset /*字符编码*/
@font-face /*自定义字体*/

font /*复合属性*/
font-style /*字体样式*/
font-variant /*是否为小型的大写字母*/
font-weight /*字体粗细*/
font-size /*字体大小*/
font-family /*字体名称*/

文本属性

1
2
3
4
5
6
7
8
9
10
11
12
13
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显示内容*/

书写模式属性

1
2
3
direction /*文本流的方向*/
unicode-bidi /*同一个页面里存在从不同方向读进的文本显示*/
writing-mode /*内容块固有的书写方向*/

列表属性

1
2
3
4
list-style /*复合属性*/
list-style-type /*列表标记*/
list-style-position /*列表标记如何根据文本排列*/
list-style-image /*列表标记的图像*/

表格属性

1
2
3
4
5
table-layout /*表格的布局算法*/
border-collapse /*表格的边独立还是合并*/
border-spacing /*表格边框在横向和纵向上的间距*/
caption-side /*表格标题在表格的上边还是下边*/
empty-cells /*是否显示表格的边框*/

转换属性

1
2
transform /*对象的矩阵变化、平移、旋转、缩放、扭曲*/
transform-origin /*转换原点*/

过渡属性

1
2
3
4
5
transition /*复合属性*/
transition-property /*过渡的css属性*/
transition-duration /*过渡的持续时间*/
transition-timing-function /*过渡类型*/
transition-delay /*过渡延迟时间*/

动画属性

1
2
3
4
5
6
7
8
9
10
11
@keyframes /*定义一个动画*/

animation /*复合属性*/
animation-name /*@keyframes定义的动画名*/
animation-duration /*动画持续时间*/
animation-timing-function /*动画类型*/
animation-delay /*动画延迟时间*/
animation-iteration-count /*动画播放次数*/
animation-direction /*动画是否反向播放*/
animation-play-state /*运行或暂停*/
animation-fill-mode /*动画时间之外的状态*/

定位属性

1
2
3
4
5
6
position /*定位方式*/
z-index /*层级*/
top /*向下偏移*/
left /*向右偏移*/
bottom /*向上偏移*/
right /*向左偏移*/

布局属性

1
2
3
4
5
6
7
8
display /*是否及如何显示*/
visibility /*是否显示对象 会占空间*/
float /*浮动*/
clear /*不允许有浮动对象*/

overflow /*复合属性*/
overflow-x /*x轴内容溢出元素框时*/
overflow-y /*y轴内容溢出元素框时*/

媒体查询属性

1
2
3
4
5
6
7
8
9
10
11
12
13
@import /*导入外部样式表及目标媒体*/
@media /*媒体类型和查询条件*/

width /*宽度*/
height /*高度*/
device-width /*屏幕可见宽度*/
device-height /*屏幕可见高度*/
orientation /*页面可见高度是否大于或等于宽度*/
aspect-ratio /*页面可见宽度与高度的比率*/
devive-aspect-ratio /*屏幕分辨率，及屏幕可见宽度与高度的比率*/
color /*颜色*/
monochrome /*单色*/
grid /*是否使用栅格或点阵*/

提升优先权属性

1
!important /*提升样式优先权*/

5.属性单位类型及值类型

长度单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
相对长度单位
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

角度单位

1
2
3
4
5
6
7
deg:度 360
grad:梯度 400
rad:弧度 2π
turn:圈 1

换算单位
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

时间单位

1
2
3
4
5
ms:毫秒
s:秒

换算单位
1s = 1000ms

分辨率单位

1
2
3
4
5
6
7
8
dppx:每像素包含点的数量
dpi:每英寸包含点的数量
dpcm:每厘米包含点的数量

换算单位
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

数字值

1
2
number:1|1.5
percentage:1%

文本值

1
2
3
initial:初始值
inherit:继承祖先的值
""|''

颜色值

1
2
3
4
5
6
7
8
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:当前颜色

图片和渐变值

1
2
3
4
5
6
7
8
9
10
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

1
2
3
4
5
6
<!--[if <keywords> IE <version>]>
HTML代码块
<![endif]-->

<keywords>:空、gt、gte、lt、lte、!
<version>:6、7、8、9

属性Hack

1
2
3
4
5
6
7
8
9
_:选择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 */