CSS总结

选择器

选择器分组 元素1,元素2,元素3{属性;}
- 派生（后代）选择器 元素1 分级n{属性;}（选择可以跨级）
- 子元素选择器 元素1>分级1{属性;}（只能选择到下一级）
- 相邻兄弟选择器 (了解) 元素1+元素2{属性;}
  
  （被选择的元素必须具有前者元素）
id选择器 #id{属性;}
类选择器 .class{属性;}

属性（和值）选择器（在head中加入）

1
2
3

[元素属性]{属性1;}/*含有目标属性*/
[元素属性=特定值]{属性2;}/*目标属性为特定值*/
[元素属性~=特定值]{属性3;}/*目标属性的值中包含有特定值*/

通用配置符 *{属性;}

多类选择器

/*css文件*/
.p1{属性1;}
.p2{属性2;}
.p2.p3{属性3;}

/*html文件*/
<p class="p1"></p>
<p class="p2"></p>
<p class="p1 p2"></p>
/*第三个段落属性为"属性1+属性2+属性3"*/

附:

元素选择器可与类选择器结合使用a.class{属性}即a元素中class类的属性
ID选择器与类选择器区别：

ID选择器只能在文档中使用一次，而类可以使用多次

ID选择器不能结合使用

当使用JS时需要用到ID

CSS样式

背景

属性	描述
background-attachment	背景图片是否随页面滚动
background-color	背景颜色
background-image	设置图片背景（`url`引入）
background-position	起始位置（两项属性）
background-repeat	是否及如何重复
background-size	图片尺寸
background-origin	图片定位区域
background-clip	图片绘制区域

文本

属性	描述
color	文本颜色
direction	文本方向
line-height	行高
letter-spacing	字符间距
text-align	对齐文本
text-decoration	文本修饰
text-indent	缩进文本首行
text-transform	元素字母（大小写）
unicode-bidi	文本方向
white-space	空白处理方式
word-spacing	字间距
text-shadow	添加阴影
word-wrap	换行规则

text-shadow:四个属性（向右偏移向下偏移模糊程度阴影颜色）

word-wrap:另外设置行宽度

字体

属性	描述
font-family	字体系列
font-size	字体尺寸
font-style	字体风格
font-variant	大小写或正常字体显示文本
font-weight	字体粗细

网络字体引入

@font-face{
    font-family: myfont;
    src: url();
}

链接

链接四种状态：

元素	描述
a:link	普通未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标位于链接上方
a:active	鼠标被点击的时刻

链接样式：text-decoration

背景颜色：background-color

列表

属性	描述
list-style	简写列表项
list-style-image	列表项图像（引入）
list-style-position	列表项标志位置
list-style-type	列表类型（普通图图表）

表格

使用实例

#tb{
    border-collapse: collapse;/*合并边框*/
    width: 500px;
}
#tb td,#tb th{
    border:1px solid aqua;/*边框宽度 实线 颜色*/
    padding: 5px;
}
tb th{
    text-align: right;
    background-color:aqua;
    color:#FFFFFF;
}
tb tr.alt td{
    color: black;
    background-color: aquamarine;
}

轮廓

属性	描述
outline	轮廓属性
outline-color	轮廓颜色
outline-style	轮廓样式
outline-width	轮廓宽度

盒子模型

padding-(): 设置边距
border-()-style: 可设置具体方向边框
- border-()-width: 设置(单边)宽度
- border-()-color: 设置(单边)颜色
- border-radius: 圆角边框大小
- box-shadow: 阴影效果(属性格式同文字阴影)
- border-image: 边框图片
margin-():设置边距

两个盒子模型的外边框会合并

盒子模型实际应用

*/*通用配置符*/{
    margin: 0px;
    padding: 0px;
}
.top{
    width:100%;
    height:50px;
    background-color: black;
}
.top_content{
    width: 75%;
    height; 50px;
    margin: Opx auto;/*左右自适应*/
    background-color: blue;
}
.body{
    margin: 20px auto;
    width:75%;
    height:1500px;
    background-color: blanchedalmond;
}
.body_img{
    width: 100%;/*占body75%中的100%*/
    height: 400px;
    background-coior: darkorange;
}

定位&浮动

定位

属性	描述
position	元素位置形式
top	向上偏移量
left	向左偏移量
right	向右偏移量
bottom	向下偏移量
overflow	元素溢出区
clip	显示形状
vertical-align	对齐方式
z-index	堆叠顺序

浮动

float属性可用值：left right none inherit（从父级继承）

clear属性（清除浮动属性）：left right both inherit

附: 通过浮动可作瀑布流效果

CSS常用操作

应用margin position float操作对齐边框
行高 line-height

最大最小高宽度 max-width

分类

属性	描述
clear	设置侧面是否允许其他浮动元素
cursor	指向某元素上是的鼠标指针类型
display	设置是否及如何显示元素
float	定义元素在哪个方向浮动
position	设置元素位置
visibility	设置元素是否可见

导航栏展示

ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
a:link, a:visited/*a链接的状态*/{
    text-decoration: none;
    display: block;
    background-color: burlywood;
    color: aliceblue;
    width: 50px;
    text-align: center;
}
a:active, a: hover{
    background-color: crimson;
}

图片展示

body{
    margin: 10px auto;
    width:70%;
    height: auto;
    background-color: burlywood;
}
.image{
    border; 1px solid darkgray;
    width: auto;
    height:_auto;
    float: left;
    text-align: center;
    margin: 5px;
}
img{
    margin: 5px;
    opacity: 1; /*透明度：0为完全透明，1为完全不透明*/
}
.text{
    font-size: 12px
    margin-bottom: 5px;
}

CSS动画

2D、3D转换

转换格式：

transform:转换方法;
-webkit-transform:转换方法;/*safari chrome*/
-ms-transform:转换方法;/*IE 360*/
-o-transform:转换方法;/*opera*/
-moz-transform:转换方法;/*firefox*/

2D转换方法：

方法	描述
translate()	移动
rotate()	旋转
scale()	缩放
skew()	倾斜
matrix()	矩阵

3D转换方法：

方法	描述
rotateX()	X轴旋转
rotateY()	Y轴旋转

过渡

属性	描述
transition	设置四个过渡属性
transition-property	过渡名称
transition-duration	过渡花费时间
transition-timing-function	过渡时间曲线
transition-delay	过渡开始时间

代码展示

div{
    width: 108px;
    height: 100px;
    background-color: blue;
    -webkit-transition: width 2s,height_2s,-webkit-transform 2s;
    transition : width 2s,height 2s,transform 2s;
    -webkit-transition-delay:2s;
    transition-delay: 2s;
}
div: hover{
    width: 208px;
    height: 200px;
    transform: rotate(360deg);
    webkit-transform: rotate( 360deg);
}

动画

代码展示

div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation:anim 5s /*infinite alternate添加回溯及重复动画*/;
    -webkit-animation:anim 5s/*同加*/;
}
@keyframes anim{
    0%{background: red;left: 0px; top: 0px}
    25%{background: blue;left: 200;top:0px}
    50%{background:#ccffcc;left: 200px; top: 200px}
    75%{background: #B0ffff;left: 0px;top: 200px}
    100%{background:red;left: 0px;top: 0px}
}
-webkit-@keyframes anim{
    0%{background: red;left: 0px; top: 0px}
    25%{background: blue;left: 200;top:0px}
    50%{background:#ccffcc;left: 200px; top: 200px}
    75%{background: #B0ffff;left: 0px;top: 200px}
    100%{background:red;left: 0px;top: 0px}
)

多列

.div1{
    column-count: 4;/*四列*/
    column-gap: 30px;/*内边距*/
    column-rule: 5px outset red;/*边界线*/
    -webkit-column-count: 4;
    -webkit-column-gap: 30px;
    -webkit-column-rule: 5px outset red;
}

多列实现瀑布流(图片宽度一致)

.container{
    column-width: 250px;
    column-gap: 5px;
    -webkit-column-width: 250px;
    -webkit-column-gap: 5px;
}
.container div{
    width: 250px;
    margin: 5px 0;
}

JS调整元素样式

1 2	document.getElementById("noResourceImg").style.height = imgHeight + "px"; document.getElementsByClassName("noResourceImgs")[0]style.height = imgHeight + "px";