CS和CS3知识点

【1：CS】

-o-：代表opera浏览器私有属性（Opera挪威浏览器因为它的快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认）
-ms-：代表IE浏览器私有属性
-moz-：代表FireFox【简称FF】浏览器私有属性 （moz代表的是Firefox的开发商Mozilla。）
-webkit-：代表safari、chrome浏览器私有属性 （Safari是苹果计算机的操作系统Mac OS X中的浏览器）（搜狗，360浏览器）

1:行间样式<p style="color:red"></p>
2:内部样式<style type="text/css></style>
3:外部样式<link href="new.css" rel="stylesheet" type="text/css">

优先级
行间样式最优先》内部样式，外部样式同时存在时，谁在后边谁优先，因为，后边样式会覆盖前边样式的

!importan》行间》后代（权重）》id》交集选择器》class和并集选择器谁在后边谁做主》元素>
权值
id:100;
class:10;
tag元素:1;利用td加border，tr有时会出错。

表格加border时

基本选择器:
1:id选择器
2:class类选择器
3:元素标签选择器h1-h6,p,span,a,img,div,dl,ol,ul,input

复合选择器:
4:交集选择器 p.a1
5:并集选择器 #a,#b
6:后代选择器 p .a1

关系选择器
7:子代选择器 p>.a1
7:a1后边第一个兄弟 .a1+.a2
8:a1后边所有兄弟 .a1~.a2

 

属性选择器
[attribute] 用于选取带有指定属性的元素。 a[href] {color:red;} a[href][title] {color:red;}
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

伪类
a:link 选择所有未访问链接
a:visited 选择所有访问过的链接
a:active 选择活动链接
a:hover 选择鼠标在链接上面时
:focus 获取焦点时添加元素样式。
:first-child 向元素的第一个子元素添加样式。

p:nth-child(2) 选择每个p元素是其父级的第二个子元素[即是P元素下边的第一个孩子]
p:first-child 选择属于其父元素的首个子元素的每个 <p> 元素
p:last-child 选择每个p元素是其父级的最后一个子级。

不用nth-child() 尽量用nth-of-type();

* 通用选择器
:not(selector) :not(p) 选择每个并非p元素的元素
p:first-of-type 选择每个p元素是其父级的第一个p元素
p:last-of-type 选择每个p元素是其父级的最后一个p元素
p:nth-of-type(2)选择每个p元素是其父级的第二个p元素

 

伪元素
::first-letter 向文本的第一个字母添加特殊样式 【注释："first-line" 伪元素只能用于块级元素。】
::first-line 向文本的首行添加特殊样式。 【注释："first-line" 伪元素只能用于块级元素。】
::before 在元素之前添加内容。
::after 在元素之后添加内容。

 

 

字体
font-1px;
font-style:italic;
font-family:"微软雅黑";
简化：font:1px italic "微软雅黑";

文本
min/max-100px/10%;
min/max-height:100px/10%;
line-height:50px/50%;
text-align:left/center/right;
text-indent:10px/-10px;
text-decoration:overline/line-through/underline/none;
vertical-altin:top/middle/bottom;
text-shdow:x y 2px(模糊度) color;

颜色
color:red/#ff0000/#f00/rgb(255,0,0);

列表
list-style-type:circle/square/upper-roman/lower-roman/none;
list-style-image:url("");
list-style-position:inside/outside;

链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */

当设置为若干链路状态的样式，也有一些顺序规则：
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

鼠标形状
cursor:pointer/wait/help/text

 

盒子模型
margin/padding:上 右 下 左
margin/padding:上 左右 下
margin/padding:上下 左右
margin/padding:上下左右
边框/轮廓(位于边框的外围)
border/outline-1px;
border/outline-style:solid/dotted(点线）/dashed（虚线）;
border/outline-color:red/#f00/rgb(255,0,0);
简化 border/outline:1px dotted red;

背景
background-color:red(color)/#省略f00/rgb(255,0,0);
background-image:url('');可以
background-repeat:no-repeat/repeat-x/repeat-y;
background-position:left top/center center(可以写一个center但不能用middle)/10% 10%/10px 10px;
简化background:red url('') no-repeat 10px 10px;
background-attchment(固定，附加):fixed/scroll;
background-size:200px auto;

块级，行级元素
display:none(隐藏时不占用空间)/inline(排成一行)/block（可设宽高）/inline-block（排成一行，可设宽高）
visibility:hidden(隐藏时占用空间）/visible;
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

 

浮动
float:left/right
clear:left/right/both;

定位属性
position:relative/absolute/fixed;

fixed:相对于浏览器窗口的定位

relative:相对于自身的定位

absolute:相对于上级元素(祖父元素)的定位，如果祖父元素没有定位，则相对于浏览器窗口

left/right/top/botttom:10px;
z-index:-10/10;
overflow/overlfow-x/overflow-y:hidden（隐藏溢出文字）/visible(默认状态)/scroll定有滚动条）/auto（）
如果文字溢出会出现滚动条

 

@media screen and|not|only (media feature) {
CSS-Code;
}
如果文档宽度小于 300 像素则修改背景演示(background-color):
@media screen and (max- 300px) {
body {
background-color:lightblue;
}
}

响应式设计
img{如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：
100%;
height:auto
};
img{如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小：
max-100%;
height:auto;
}
背景图片可以响应调整大小或缩放。
以下是三个不同的方法：
1. 如果 background-size 属性设置为 "contain", 背景图片将按比例自适应内容区域。图片保持其比例不变：
2. 如果 background-size 属性设置为 "100% 100%" ，背景图片将延展覆盖整个区域：
3. 如果 background-size 属性设置为 "cover"，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。

【2：CS3】

边框
border-radius:10px/50%（宽高相同时为圆形）
box-shadow:x y 10px(模糊度) color;

背景
backgroun-size:10px 10px/10% 20%/cover/contain;

渐变
background:linear-gradient(red,green);从上到下的线性渐变
background:linear-gradient(left,red,green)从左到右的线性渐变
background: linear-gradient(to bottom right, red , blue);从左上角开始（到右下角）的线性渐变
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 起点是完全透明，慢慢过渡到完全不透明的红色：background: repeating-linear-gradient(red, yellow 10%, green 20%);
background: repeating-linear-gradient(red, yellow 10%, green 20%);repeating-linear-gradient() 函数用于重复线性渐变：

径向渐变
radial-gradient(red, green, blue)颜色结点均匀分布的径向渐变：
background: radial-gradient(red 5%, green 15%, blue 60%);径向渐变 - 颜色结点不均匀分布
background: radial-gradient(circle, red, yellow, green); 形状为圆形的径向渐变：

文本

text/box-shadow:10px 10px 10px red;
水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

字体

转换(平移，旋转，缩放，倾斜)
skew（x,y轴倾斜角度）倾斜90deg时元素消失
transform:translate(10px/-10px,20px/-20px)/rotate(10deg/-10deg)/scale(2/0.5,2/0.5)/skew()
transform:translateX()/translateY()/scaleX(3D旋转)/scaleY(3D旋转)/skewX()/skewY()/

过渡
transition:属性，时间，曲线，延时
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。

要添加多个样式的变换效果，添加的属性由逗号分隔：
添加了宽度，高度和转换效果：
div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

 

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

多媒体查询（and和右边的括号之间必须有空格，否则无效）
@media screen and (min-500px) and (max-1000px){
body{ 第二个and可以和左边括号没有空格
background-color:green;
}
}

动画
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

animation:myfirst 5s;

animation: myfirst 5s linear 2s n次/infinite(无限次) alternate running/paused;

@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。

animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。

弹性盒子
display:flex/-webkit-flex;

flex 属性用于指定弹性子元素如何分配空间。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ]

flex-direction:row/column/row-reverse/column-reverse指定弹性子元素在父容器中的位置。

justify-content:flex-start/center/flex-end/space-between（两边无空隙）/space-around(两边有空隙）水平对齐方式

algin-items:stretch(默认值)/baseline/flex-start/center/flex-end 垂直对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。

flex-wrap:nowrap/wrap/wrap-reverse/ 指定弹性盒子的子元素换行方式。

order:用整数值来定义排列顺序，数值小的排在前面。可以为负值。

align-self: auto | flex-start | flex-end | center | baseline | stretch
align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中: