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-;
    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

包括四种属性：

1. transition-property(过渡的名称,旋转之类的)

2. transition-duration(过度花费的时间)

3. trainsition-timing-function(过渡曲线)

4. trainsition-delay(延迟多久开始)

{
	transition:1 2 3 4;
    /*也可以直接指定属性赋值*/
    transition-property:...;
}