css基础
虽说菜鸟教程写的更全
css选择器
选择器结合使用作用更大,中间用空格分开
- 派生选择器
/*最简单的，选择label然后设置属性,可以嵌套*/
div strong i {
attribute: ;
}
/*也可以div i{}直接选取后代元素*/
/*但是子选择器只能一层一层选择*/
div>strong>i{}
<div ><strong > <i>!!!</i> <i>???</i> </strong><\div>
- Id选择器
/*因为id是唯一的所以id选择的时候可以不需要派生选择器，但是不能结合其他的使用*/
#idname
{
attribute: ;
}
- Class选择器
.classname
{
attribute:;
}
- 属性选择器
/* 指定属性的类型不是标签的名字 比如title ，herf！！！...*/
[title]{
attribute1:1;
}
/* 属性选择器也可以指定特定属性的名字*/
[title='asdf']
{
attribute:..;
}
[title~='as'] /*关键字匹配，包含关键字即匹配*/
<div title='asdf'>qrew</div>
<div title='asfd'></div>
<div title>qwerwr</div>
- **通配符 *** 如果存在通配符，那么如果你没有给一个标签自定义，则自动拥有通配符的属性
/*通常定义外内边界*/
* {
padding:0px;
margin:0px;
}
css 属性
单位讲解
背景
-
background-attachment:背景图像是否滚动;
-
background-color:背景颜色;
-
background-img:背景设置为图片;
-
background-position:背景图片起始位置;
-
background-repeat:背景是否重复及如何重复;
-
background-size 以父亲元素的size作为参考进行缩放
如果background以手机屏幕大小为例 父亲大小为屏幕大小
background-size:100% 100%;效果是长和宽同时拉伸
background-size:cover 同比例放大或缩小长或宽，然后截取父亲的size部分（所以会有些部分不会显示在背景区域）和background-size:100%的效果相同
background-size:contain 放大长或宽填满size就行了？（不太懂反正用100% 100%就完事了）
文字
/*
{
color: 字的颜色;
padding:字与边框的间距;
direction:文本方向;
text-align:对齐文本;
text-decorate:修饰文本; 比如超链接有下划线，可以把这个属性变为none就没了
word-spacing:字间距;
letter-spacing:字符间距;
text-indent:首行缩进em;
text-shadow:阴影离字前方的距离 px阴影离字上方的距离 px 阴影后方距离px阴影颜色color;字阴影
font-size:字体大小px;
font-family:字体样式; （如果第一个字体样式不适用该文字自动向后查找，如果找不到会用默认样式。可以用此特性设置中英文不同字体）
如果没有可以
@font-face{
font-family:yourfontname;
src:url();
}
之后使用yourfontname可以自动从src下载
}
*/
链接
- a:link 普通的,未被访问过的链接
- a:vistied 访问过的链接
- a:hover 鼠标位于链接上方
- a:active 链接被点击时刻时
浮动 float
与left，right相似但是浮动不占不浮动的'位置'，但是浮动之间还是在同一层，也可以设置position来控制不同的层级
浮动优先横向排满，再纵向增加
- left,right 向左向右浮动
- none 元素不浮动
- inherit 继承父亲的浮动属性
- clear：xxx 去掉xxx的浮动效果
clear:left; /*去掉向左浮动效果*/
列表标签 ul
感觉好多，随便写写了
通常形式如下
<ul>
<li>...</li>
<li>..</li>
</ul>
通常设置display margin padding float属性
比如display: inline 可以横向排放
盒子模型 container
盒子模型包括外边距（padding），内边距（margin），内容（content），边框（broder）
#paddingattribute{
padding:;
padding-left:;
padding-right:
padding-bottom:;
}
#marginattribute{
margin:;
margin-left:;
margin-right:;
margin-bottom:;
}
#broderattribute{
border:;
border-top|left|right|bottom-width:;
border-top|left|right|bottom-color:;
border-radius:px;/*边框圆滑度*/
box-shadow:apx bpx cpx color; /*边框阴影*/
border-img:；
}
2D，3D旋转 transform
动画效果 animation
有六种属性（必须规定前两种属性）
-
animation-name
-
animation-duration
-
animation-timing-function
-
animation-delay
-
animation-iteration-count
n或infinite（无限次）
-
**animation-direction **
normal：正常播放
alternate：轮流反向播放
定义了animation一定要（定义keyframes）
{
animation: animation_name 5s infinite alternate
/*
指定浏览器上的animation
webkit-animation:animation_name time
*/
}
@keyframes animation_name{
0%{...}
23%{..}
...
}
/*指定浏览器上的关键帧*/
@-webkit-keyframes animation_name{
0%{...}
...
}
过渡 transition
包括四种属性：
-
transition-property(过渡的名称,旋转之类的)
-
transition-duration(过度花费的时间)
-
trainsition-timing-function(过渡曲线)
-
trainsition-delay(延迟多久开始)
{
transition:1 2 3 4;
/*也可以直接指定属性赋值*/
transition-property:...;
}
