CSS复习

CSS

选择器

p.into  表示带有into类的p元素

伪类：

a)      first-line

b)      last-line

伪元素：

:before  能在指定的元素前添加内容（创造内容）

如：p.tip:before{content: ‘hot top’;}

:after 用法和:before相同

::sekection  针对访问者选中的东西进行样式设置。（只能对颜色和背景颜色进行改变）

如：::selection{

color:#fff;

background-color:red;

}

属性选择器

如：img[title]

子选择器：nth-child()

如:   tr:nth-child(odd){color:red;}

tr:nth-child(odd){color:blue;}

子类型选择器：

如：

:first-of-type   同 :first-child

:last-of-type   同 :last-child

:nth-of-type   同 :nth-child

not选择器

用样式继承节省时间

继承：用用在某个css标签上的样式内嵌到其子标签上

一般影响网页元素位置的属性，或者边距，背景色和元素的边框都不会被继承。

用层叠管理多样式

有限性：直接应用的->最近的祖先

用权值决定哪种样式胜出：（权重由上往下增大）

a)       标签选择器

b)      类选择器

c)       ID选择器

d)      内嵌样式

权重相同的后面的会覆盖前面的。

文本格式化

大小写： text-transform: uppercase; / lowercase; / none;

小型大小写字母：  font-variant : small-caps;

文本修饰：  text-decoration: overline; / underline; …

使用上下边框可以代替上下下划线

字间距，字耦距   word-spacing    letter-spacing

给文本添加阴影：text-shadow : 4px 4px 3px #ddd;

水平偏移量，垂直偏移量，阴影模糊度，颜色

给网页添加图片

background-image: url();

background-position: top; / center; /bottom;

例如：

background-position: top top;

background-position: 20px 30px;

background-position: 50% 50%;

background-attachment: scroll; / fixed;

background-origin  和 background-clip

background-origin:  图片的起始位置：可接收的值如下

border-box  图片放置与border区域左上角

padding-box  图片放置与padding区域左上角

center-box  图片放置与center区域右上角

background-clip ： 限制背景图片的显示区域

border-box  图片放置与内容区域后面

padding-box  图片放置与padding区域左上角

center-box  图片放置与center区域右上角

background-size: 缩放背景图片

value ： background-size：100px 200px;

key :    background-size: contain; / cover

contain:保持长宽比 ； cover： 不保持长宽比

使用渐变色背景：

background-image : linear-gradient(left , black, red);

装饰网站导航

css的transform  transition  animation

1,transform (变形)

a)  transform: roate(10deg);     顺时针旋转10度

b)  transform: scale(2);               放大2倍

c)  transform: translate(1px 2px);              向右移动1px 向下移动2px

d)  transform: skew(0, 45deg);  沿Y轴倾斜45度

可以多个函数共用：

transform: roate(10deg) scale(2) translate(1px 2px);

2，transition  在一定时间内是一组样式换到领一组样式

.navbutton{

color: red;

transition-property: background-color;

transition-duration: 1s;

}

.navbutton:hover{

color: blue;

}

transition-property: background-color, color, border-color;

transition-duration: 1s, 2s, 3s;

transition-timing-function

a)       linear

b)      ease

c)       ease-in

d)      ease-out

e)       ease-in-out

f)       cubic-bezier(0.1, 0.2, 0.8, 0.6);

transition-delay: 5s;

animation

animation-duration: 1s;

animation-name: fideIn, blink;

animation-interation-count:10;

animation-play-state: running; / paused;

表格和表单的格式化

1，  给表格定义样式

a)       添加padding          td{padding: 1px 2px 3px 4px;}

b)      调整垂直对齐和水平对齐

1,text-align  (left , right, center)

2,vertical-align  (top, baseline, middle, bottom)

c) 创建边框

1，cellspacing    borderspacing: 0;

2,border-callapse  (collapse)   消除双边框

2，  给行和列定义样式

tr:nth-of-type(odd){color:red;}

tr:nth-of-type(even){color:red;}

3,给表单定义样式

 CSS布局

<blockquot> 标签（一个块）

<article>  <header>  <footer>  <nav>

基于浮动的布局

float: left; /  right; /  none;

克服浮动： clear: left; / right;

浮动下落：

box-sizing: center-box; / padding-box; border-box;