CSS笔记

 

CSS 背景属性（Background）

属性	描述	CSS
background	在一个声明中设置所有的背景属性。	1
background-attachment	设置背景图像是否固定或者随着页面的其余部分滚动。	1
background-color	设置元素的背景颜色。	1
background-image	设置元素的背景图像。	1
background-position	设置背景图像的开始位置。	1
background-repeat	设置是否及如何重复背景图像。	1

CSS 边框属性（Border 和 Outline）

属性	描述	CSS
border	在一个声明中设置所有的边框属性。	1
border-bottom	在一个声明中设置所有的下边框属性。	1
border-bottom-color	设置下边框的颜色。	2
border-bottom-style	设置下边框的样式。	2
border-bottom-width	设置下边框的宽度。	1
border-color	设置四条边框的颜色。	1
border-left	在一个声明中设置所有的左边框属性。	1
border-left-color	设置左边框的颜色。	2
border-left-style	设置左边框的样式。	2
border-left-width	设置左边框的宽度。	1
border-right	在一个声明中设置所有的右边框属性。	1
border-right-color	设置右边框的颜色。	2
border-right-style	设置右边框的样式。	2
border-right-width	设置右边框的宽度。	1
border-style	设置四条边框的样式。	1
border-top	在一个声明中设置所有的上边框属性。	1
border-top-color	设置上边框的颜色。	2
border-top-style	设置上边框的样式。	2
border-top-width	设置上边框的宽度。	1
border-width	设置四条边框的宽度。	1
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。	2

CSS 文本属性（Text）

属性	描述	CSS
color	设置文本的颜色。	1
direction	规定文本的方向 / 书写方向。	2
letter-spacing	设置字符间距。	1
line-height	设置行高。	1
text-align	规定文本的水平对齐方式。	1
text-decoration	规定添加到文本的装饰效果。	1
text-indent	规定文本块首行的缩进。	1
text-shadow	规定添加到文本的阴影效果。	2
text-transform	控制文本的大小写。	1
unicode-bidi	设置文本方向。	2
white-space	规定如何处理元素中的空白。	1
word-spacing	设置单词间距。	1

CSS 字体属性（Font）

属性	描述	CSS
font	在一个声明中设置所有字体属性。	1
font-family	规定文本的字体系列。	1
font-size	规定文本的字体尺寸。	1
font-size-adjust	为元素规定 aspect 值。	2
font-stretch	收缩或拉伸当前的字体系列。	2
font-style	规定文本的字体样式。	1
font-variant	规定是否以小型大写字母的字体显示文本。	1
font-weight	规定字体的粗细。	1

CSS 外边距属性（Margin）

属性	描述	CSS
margin	在一个声明中设置所有外边距属性。	1
margin-bottom	设置元素的下外边距。	1
margin-left	设置元素的左外边距。	1
margin-right	设置元素的右外边距。	1
margin-top	设置元素的上外边距。	1

CSS 内边距属性（Padding）

属性	描述	CSS
padding	在一个声明中设置所有内边距属性。	1
padding-bottom	设置元素的下内边距。	1
padding-left	设置元素的左内边距。	1
padding-right	设置元素的右内边距。	1
padding-top	设置元素的上内边距。	1

CSS 列表属性（List）

属性	描述	CSS
list-style	在一个声明中设置所有的列表属性。	1
list-style-image	将图象设置为列表项标记。	1
list-style-position	设置列表项标记的放置位置。	1
list-style-type	设置列表项标记的类型。	1
marker-offset		2

内容生成（Generated Content）

属性	描述	CSS
content	与 :before 以及 :after 伪元素配合使用，来插入生成内容。	2
counter-increment	递增或递减一个或多个计数器。	2
counter-reset	创建或重置一个或多个计数器。	2
quotes	设置嵌套引用的引号类型。	2

CSS 尺寸属性（Dimension）

属性	描述	CSS
height	设置元素高度。	1
max-height	设置元素的最大高度。	2
max-width	设置元素的最大宽度。	2
min-height	设置元素的最小高度。	2
min-width	设置元素的最小宽度。	2
width	设置元素的宽度。	1

CSS 定位属性（Positioning）

属性	描述	CSS
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移。	2
clear	规定元素的哪一侧不允许其他浮动元素。	1
clip	剪裁绝对定位元素。	2
cursor	规定要显示的光标的类型（形状）。	2
display	规定元素应该生成的框的类型。	1
float	规定框是否应该浮动。	1
left	设置定位元素左外边距边界与其包含块左边界之间的偏移。	2
overflow	规定当内容溢出元素框时发生的事情。	2
position	规定元素的定位类型。	2
right	设置定位元素右外边距边界与其包含块右边界之间的偏移。	2
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移。	2
vertical-align	设置元素的垂直对齐方式。	1
visibility	规定元素是否可见。	2
z-index	设置元素的堆叠顺序。	2

CSS 打印属性（Print）

属性	描述	CSS
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数。	2
page-break-after	设置元素后的分页行为。	2
page-break-before	设置元素前的分页行为。	2
page-break-inside	设置元素内部的分页行为。	2
widows	设置当元素内部发生分页时必须在页面顶部保留的最少行数。	2

CSS 表格属性（Table）

属性	描述	CSS
border-collapse	规定是否合并表格边框。	2
border-spacing	规定相邻单元格边框之间的距离。	2
caption-side	规定表格标题的位置。	2
empty-cells	规定是否显示表格中的空单元格上的边框和背景。	2
table-layout	设置用于表格的布局算法。	2

CSS 伪类（Pseudo-classes）

属性	描述	CSS
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

CSS 伪元素（Pseudo elements）

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

 

 

 

 

CSS3

在 CSS3 中，border-radius 属性用于创建圆角border-radius:25px;（控制圆角大小）

div

{

border:2px solid;

border-radius:25px;

}

 

box-shadow 用于向方框添加阴影

div

{

box-shadow: 10px 10px 5px #888888;（左间距，上间距，边界模糊程度，阴影颜色）

}

 

CSS3 background-size 属性

您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

例子 1

调整背景图片的大小：

div

{

background:url(bg_flower.gif);

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-size:63px 100px;

background-repeat:no-repeat;

}

例子 2

对背景图片进行拉伸，使其完成填充内容区域：

div

{

background:url(bg_flower.gif);

-moz-background-size:40% 100%; /* 老版本的 Firefox */

background-size:40% 100%;

background-repeat:no-repeat;

}

CSS3 background-origin 属性

background-origin 属性规定背景图片的定位区域。

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

为 body 元素设置两幅背景图片：

body

{ 

background-image:url(bg_flower.gif),url(bg_flower_2.gif);

}

CSS3文本阴影

在 CSS3 中，text-shadow 可向文本应用阴影。

您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

实例

向标题添加阴影：

h1

{

text-shadow: 5px 5px 5px #FF0000;(左间距，上间距，模糊程度，颜色)

}

2D 转换

transform: rotate(30deg); 旋转角度

transform: translate(50px,100px);元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数

transform: scale(2,4);元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

transform: skew(30deg,20deg);元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

3D 转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

transform: rotateX(120deg);（绕X轴旋转）

transform: rotateY(130deg);（绕Y轴旋转）

 实例：（点击进行3D转换）

<script type="text/javascript">

        var x,y,n=0,ny=0,rotINT,rotYINT;

        function rotateDIV()

        {

            x=document.getElementById("rotate1");

            clearInterval(rotINT);

            rotINT=setInterval("startRotate()",10);

        }

        function rotateYDIV()

        {

            y=document.getElementById("rotatey1");

            clearInterval(rotYINT);

            rotYINT=setInterval("startYRotate()",10);

        }

        function startRotate()

        {

        n=n+1;

        x.style.transform="rotate(" + n + "deg)";

        x.style.webkitTransform="rotate(" + n + "deg)";

        x.style.OTransform="rotate(" + n + "deg)";

        x.style.MozTransform="rotate(" + n + "deg)";

        if (n==180 || n==360)

            {

            clearInterval(rotINT);

            if (n==360){n=0;}

            }

        }

        function startYRotate()

        {

        ny=ny+1;

        y.style.transform="rotateY(" + ny + "deg)";

        y.style.webkitTransform="rotateY(" + ny + "deg)";

        y.style.OTransform="rotateY(" + ny + "deg)";

        y.style.MozTransform="rotateY(" + ny + "deg)";

        if (ny==180 || ny>=360)

            {

            clearInterval(rotYINT);

            if (ny>=360){ny=0;}

            }

        }

    </script>

 

 

<p οnclick="rotateYDIV()"id="rotatey1" class="animated_div" style="transform:rotateY(360deg); -webkit-transform: rotateY(360deg);">3D 旋转</p>

 

CSS3 过渡

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

·        规定您希望把效果添加到哪个 CSS 属性上

·        规定效果的时长

div

{

width:100px;

height:100px;

background:yellow;

transition:width 2s,height:2s,translate:2s;

-moz-transition:width2s; /* Firefox 4 */

-webkit-transition:width2s,height:2s,translate:2s/* */

-o-transition:width2s; /* Opera */

}

 

div:hover

{

width:300px;

height:200px;

translate:rotate(90deg);

}

注：一般div:hover内写最终变化结果即可，变化过程的一些指令可以在前面的div{}中写  (红字标注)

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

 

 

实例：

div.wst

      {    

      width:100px;

      height:100px;

      background-color:red;

      /* Safari and Chrome: */

      -webkit-animation-name:myfirst;

      -webkit-animation-duration:5s;

      -webkit-animation-timing-function:linear;

      -webkit-animation-delay:1s;

      -webkit-animation-iteration-count:infinite;

      -webkit-animation-direction:alternate;

      -webkit-animation-play-state:running;  

      }

定义myfirst:         

      @-webkit-keyframes myfirst/* Safari and Chrome */

      {    

      0%  {background:red; width:100px; height:100px;}

      25% {background:yellow; width:200px; height:100px;}

      50% {background:blue; width:200px; height:200px;}

      75% {background:green; width:100px; height:200px;}

      100% {background:red; width:100px; height:100px;}

      }

 

 

 

CSS3创建多列

column-count属性规定元素应该被分隔的列数：

实例

把 div 元素中的文本分隔为三列：

div

{

-moz-column-count:3;   /* Firefox */

-webkit-column-count:3; /* Safari 和 Chrome */

column-count:3;

//规定栏间距

-moz-column-gap:40px;          /* Firefox */

-webkit-column-gap:40px;       /* Safari 和 Chrome */

column-gap:40px;

}