1.基础语法:定义属性大于1的时候用分号隔开,如果有的值大于一个单词用引号包裹。
2.css背景:
background-attachment:背景图像是否随着页面滚动 。fixed设置不滚动。
background-color:设置背景颜色
background-image:把图片设置为背景 background-image:url(“bg.jpg”)背景图片使用要调用url
background-position:设置背景图片的起始位置。例right:代表right和center就是单独的right实际隐藏了center,其他元素也是这样,可以通过自己设置来改变,还可以通过px和所占百分比改变。
background-repeat:设置背景图片是否以及如何重复
background-size:规定背景图片尺寸
background-origin:规定背景图片定位区域
background-clip:规定背景图片的绘制区域
3.文本:
color:文本颜色 lineheight:行高
text-align:对齐元素中的文本。
text-indent:缩进元素中的首行
text-decoration:向文本添加修饰,可以去掉下划线
text-transform:设置元素中的字母
text-shadow:向文本添加阴影。text-shadow: 5px 5px 5px #ff00ff。一共有4个值,分别是阴影据左5px,阴影距上5px,阴影清晰度5px(0最清晰),颜色。
word-wrap:规定文本的换行规则。normal为自动换行,要设置其宽度。
4.字体:
font-family;设置字体的样式系列
font-size:字体大小
font-style:字体风格 。italic,oblique:斜体
font-weight:字体粗细
引入自己电脑的字体:@font-face{
font-family: myfont;
src:url();}
div{
font-family: myfont;}
5.链接:
a:link:未被访问的链接
a:visited:已访问的链接
a:hover:鼠标指针位于链接上方
a:active:链接被点击时刻
text-decoration:多用于去掉链接的下划线
6.列表:
list-style:简写列表项。
list-style-image:列表项图像。图片引用要用到url
list-style-position:列表标志位置。inside: 在里面,占用li。outside:在外面,不占用li。无太大差别
list-style-type:列表类型。
7.表格:
border:外边框。border: 1px solid #ff00ff。必须加solid,才会有边框。
border-collapse:collapse。折叠边框,使其为一个边框。
8.轮廓:
outline:设置轮廓属性
outline-color:设置轮廓颜色
outline-style:设置轮廓样式,就是包裹块的线或点之类。groove:实线。double:双实线。dotted:虚线
outline-width:设置轮廓宽度
9.css定位:
position:把元素放在一个静态的static(无偏移量,会滚动走)、相对的relative、绝对的absolute(不会占位置,可能与其他元素重合)、或固定的fixed位置中(图片不会滚动走)。
top/left/right/bottom:元素向上/左/右/下的偏移量
z-index:设置元素的堆叠顺序。
10.css浮动:
float:浮动,设置同一行位置。left/right:元素向左/右浮动。none:不浮动。inherit:从父级继承浮动属性
clear:清除浮动。值同上
11.css内边距:在content外,边框内
padding:设置所有边距。padding:100px,上下左右全为100px。
padding:bottom;padding-left;padding-right;padding-top。
12.css边框:
border:外边框。border: 1px solid #ff00ff。必须加solid,才会有边框。
border-collapse:collapse。折叠边框,使其为一个边框。
border-style:边框的样式
border-left-style:左边框样式
border-top-style:上边框样式
border-right-style:右边框样式
border-bottom-style:下边框样式
border-width:边框的宽度
单边框宽度:border-top/right/left/bottom-width
border-color:边框颜色。
单边框颜色:border-top/right/left/bottom-color
border-radius:圆角边框。border-radius:10px。
box-shadow:边框阴影。box-shadow:10px 10px 5px red。
border-image:边框图片
13.css外边距
margin:设置所有边距。同padding也可分别设置边距。margin:0px auto。上下和左右
14.外边框合并:意思就是当有两个模块是他们之间的距离不会按照margin设置的来叠加,而是取其中的最大值。
15.对齐操作
margin属性进行水平对齐。margin:0px auto。设置左右为auto自适应,就会居中
position属性左右对齐,设置距左/右的距离
float进行左右对齐。
16.尺寸操作
height元素高度;width:元素高度
max-height:最大元素高度min-height;max-width;min-width
line-height:设置行高
17.分类操作
clear:清除浮点
cursor:规定指向某元素上时显示的指针类型
display:设置是否以及如何显示元素。可以把列变成行
float:定义元素朝什么方向浮动
position:把元素放在一个静态的static(无偏移量,会滚动走)、相对的relative、绝对的absolute(不会占位置,可能与其他元素重合)、或固定的fixed位置中(图片不会滚动走)。
visibility:设置元素是否可见
18图片:
一些操作前面有的。
opacity:设置透明度。1完全不透明,0完全透明。
19选择器:
元素选择器:直接调用某一个元素
选择器分组:调用多个选择器,并用逗号将它们隔开
类选择器:div调用class设置类名。三种方式1 .class。2 a.class调用a中的class。3 .class.class。让class等于之前有过的元素选择器,让其拥有他们的样式。如class=“p1 p2”
id选择器:div调用id设置id名.1、同一个id在文档中只能使用一次,类选择器可以多次使用
2、id选择器不能结合使用。3、当使用js时,需要用到id。
属性选择器:直接调用某一个元素的属性进行设值。调用时要加上[]符号。在匹配时属性和属性值必须完全对应。可以通过~来设置含有这个单词的属性值,例title=“title t”、title=“title tit“,通过调用[title~]设置。
后代选择器:页面有重名的选择器,看他们所处在那个选择器中,通过那个选择器可以一层层调用或者直接调用该选择器用空格隔开
相邻兄弟选择器:选择紧接在另一个元素后,二者有相同父级,所接的元素不会变化
子元素选择器:只能通过>选择子代的选择器。
20、动画-2D,3D转换:现在的浏览器已经支持动画转换,所以不用自己调用设置。都是通过transform直接设置
2D:translate():移动x轴,y轴。transform:translate(100px,100px);
rolate():旋转,参数是角度。transform:rolate(100deg)
scale():缩放,分别是宽度和高度。transform:scale(2,1)
skew():倾斜,参数分别是围绕x轴旋转和围绕y轴旋转。transform:skew(20deg,20deg)
matrix():矩阵,不清楚目前
3D:
rotateX():围绕x轴偏转。transform:rotateX(100deg)
rotateY():同上
21动画-过渡效果:通过设置调用div之类的该模块:hover,使鼠标在其上方后开始进行设置变化
transition:设置四个过渡属性。例:transition:width 2s,height 2s,transform 2s;分别是宽度改变时间2秒,高度改变时间2秒,变化时间2秒
transition-delay:过渡效果开始时间,指的是等待的时间
transition-property:过渡名称
transition-duration:过渡花费时间
transition-timing-function:过渡效果时间曲线
22动画-动画:一般将块设置为相对位置,好进行移动。
animation:动画。例animation:anim 5s (infinite alternate)。
分别是动画名与动画时间以及反方向返回,在进行循环。通过调用@keyframes anim
@keyframes anim{
0%{background: red;left:0;top:0px}
25%{background: darkmagenta;left:150px;top:0px}
50%{background: burlywood;left:150px;top:150px}
75%{background: aliceblue;left:0px;top:150px}
100%{background: red;left:0px;top:0px}
}分别设置每个阶段的变化
23动画-多列
column-count:分列数量
column-gap:分列之间的距离
column-rule:分列之间的线。例:column-rule:5px outset red;线的宽度,及颜色,outset要加不知原因