css3 基础内容

2012-05-08 14:19 臭小子1983 阅读(244) 评论(0) 编辑收藏举报

一、选择器

http://css.doyoe.com/

一、基本选择器

1、(*) 通配符:用于html的所有结点

* { width:200px; }

2、(element)元素选择器：页面的元素

li { border:1px #fff solid; }

3、（.）类选择器：所有指定的类别

.cla { width:200px; height:30px; }

4、（id）选择器

#k0 {background-color:#000; }

5、(element element)后代选择器

.nav li { width:200px; } // .nav下的所有li元素

6、子选择器：ie6不支持

.nav > li { width:200px; } // 只匹配.nav下的子li元素，孙li不匹配

7、（E + E）相邻选择器：ie6不支持

.nav + div { background-color:#ccc; } // 匹配.nav相邻的div元素

8、（E ~ E ）兄弟选择器：ie6不支持

.nav ~ li { background-color:#ccc; } // 与.nav所有的同辈元素

9、（E ， E，E）群组选择器

.nav1, .nav2, .nav3 { width: 2000px; } // 群组选择器将每个选择器用"，"号分开

二、属性选择器：IE6不支持所有属性选择器

1、E[attr]：只使用属性名，但没有确定任何属性值；　　　　// a["id"] 匹配a 中有id属性的元素

2、[att="val"]：指定属性等于匹配　　　　　　　　　　　 // a[id="first"] 匹配a中有id值等于first的元素

3、[att*="val"]：匹配属性具有att并且包含val指定值　　　 //

4、[att^="val"]：匹配指定属性的值，以val开头

5、[att$="val"]：匹配指定属性的值，以val结尾

6、[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；

7、[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

三、结构性伪类选择器：

1、:first-line：为某个元素第一行文字的使用样式

2、:first-letter：用于首字母

3、:before：用于在某个元素之前插入一些内容，如：元素：before { content: "插入的文字" };

4、:after:用于在某个元素之后插入一些内容，如：元素：after{ content: "插入的文字" };

5、:root：选择器将样式绑定到页面的根元素中，根元素是指位于文档树中最顶层结构的元素.

6、:not：对某个结构元素使用样式，但排除这个结构元素下面子结构元素，让它不使用这个样式可以使用not。

7、:empty：指定元素为空白时使用的样式

8、:target：

9、:first-child：指定元素中第一个子元素

10、:last-child：指定元素中的最后一个子元素

11、:nth-child(3)：指定元素中的第3个元素. li:nth-child(3) { background: yello; } 可以指定even奇数、odd偶数

12、:nth-last-child(3)：指定元素中从后数第3个元素

13、:nth-of-type：

14、:nth-last-of-type：

15、:only-child：父元素中只有一个子元素.

三、UI元素伪类选择器

1、E:hover：当鼠标指针移动到元素上所使用样式

2、E:active：用来指定元素被激活（鼠标在元素上按下还没有松开）时使用样式

3、E:focus：元素获得光标时使用

4、E:enabled：元素可用时状态使用

5、E:disabled：元素不可用状态时样式

6、E:read-only：元素只处于只读状态下时使用

7、E:read-write：元素处于非只读状态时使用

8、E:checked：指定单选或多选

9、E:default：用来指定当页面打开时默认处于选取状态的单选或多选框

10、E:indeterminate：用来指定页面打开时，一组单选中任何一个单选框都没有设定为选取状态.

11、E::selection：用来指定当元素处于选中状态时的样式

四、使用选择器在页面中插入内容

1、使用选择器插入内容：

<style type="text/css">
    h2:before { content:"哈哈"}         <!-- :after 插入到后面 -->
</style>

<h2>标题</h2>

2、只定个别元素不进行插入

<style type="text/css">
     h2 .sample:befor{ content:none }
</style>

<h2>标题</h2>
<h2 class="sample">swer</h2>
<li>惠普2012新品中国首发直击(图)</li>
<img src="images/ico1.jpg" alt="CSS的发展历程" />

3、插入图像文件

<style type="text/css">
    li:befor{ content:url(images/ico1.jpg) }
</style>

<h2>标题</h2>
<h2 class="sample">swer</h2>
<li>惠普2012新品中国首发直击(图)</li>

4、将atl属性作为图像的标题通过attr这种形式来指定属性

<style type="text/css">
      img:after { content:attr(alt)}
</style>

<h2>标题</h2>
<h2 class="sample">swer</h2>
<li>惠普2012新品中国首发直击(图)</li>
<img src="images/ico1.jpg" alt="配送范围及时间" />

二、字体样式

一、给文字加阴影：text-shadow属性：[左右，上下，虚实，颜色] 只用于safari、FF、Chrome和Opera

<style type="text/css">
     li { text-shadow:5px 5px 5px #827D26 }        <!-- text-shadow:-5px 5px 5px #827D26 变换角度 -->
     h2 { text-shadow:5px 5px 5px #827D26;         
          text-shadow:5px 5px 5px #234234;
          text-shadow:5px 5px 5px #xdf322;
        } <!-- 多个阴影 -->
</style>

<h2>标题</h2>
<h2 class="sample">swer</h2>
<li>惠普2012新品中国首发直击(图)</li>
<img src="images/ico1.jpg" alt="CSS的发展历程" />

二、让文字自动换行 word-break属性：

值有三种：1、normal：使用浏览器默认换行 2、keep-all：只能在半角空格或连字符处换行 3、break-all：允许在单词内换行

三、@font-face属性

包括1、font-style： 2、font-family 3、font-variant 4、font-weight 5、font-stretch

@font-face:{ font-family:Arial; font-weigth:blod;}

四、修改字体保持字体尺寸不变 font-size-adjust属性

三、盒相关样式

一、盒类型

在css中使用display属性来定义盒的类型，分为block和inline类型，div与p属于block类型，span与a属于inline类型.

1、inline-block类型：属于block类型的一种，但显示时具有inline类型盒的特点：

<style type="text/css">
div.inlineblock{ display:inline-block; background:#00aaff; width:300px; }          <!-- 加宽度可以显示 -->
div.inline{ display:inline; background:#aaff00; width:300px; }                     <!-- 加宽度不能显示 -->
</style>

<div>
    <div class="inlineblock">账户基础信息维护</div>
    <div class="inlineblock">账户基础信息维护</div>
</div>
<div>
    <div class="inline">修改您的密码</div>
    <div class="inline">修改您的密码</div>
</div>

2、对齐方式 vertical-align:top

div{

vertical-align:top

}

3、inline-table类型：表格之前之后都有一些文字将这个表格围绕

4、list-item类型：将多个元素作为列表来显示.

5、对于盒中容纳不下的内容的显示：overflow

如果指定了盒的宽和高，就有可能出现某些内容在盒中容纳不下的情况.可以使用overflow属性来指定如何显示盒中容纳不下的内容.

1、hidden：隐藏多出的内容

2、scroll：超出范围时出现滚动条

3、auto：当字超出时根据需要出现水平或垂直滚动条

4、visible：与不使用overflow一样

5、overflow-x和overflow-y：指定显示垂直或水平滚动条

6、white-space:nowrap：使盒右端的内容不能换行，解决了内容在水平方面的溢出.

7、对盒使用阴影 box-shadow属性

　　支持safari：-webkit-box-shadow FF：-moz-box-shadow

8、first-letter：第一个文字选择器

first-line：第一行文字选择器

.box:first-letter{ -webkit-box-shadow:5px 5px 5px gray; -moz-box-shadow:10px 10px 10px gray;}

9、box-sizing属性：针对元素的宽度和高度的计算方法

四、背景和边框

背景：

一、background-clip：指定背景显示范围

属性值：
　　1、border-box：从border区域向外裁剪背景。
　　2、padding-box：从padding区域向外裁剪背景。
　　3、content-box：从content区域向外裁剪背景。
　　4、no-clip：从border区域向外裁剪背景。

二、background-origin：指定绘制背景图像时的起点

属性值：

　　1、border：从border区域开始显示背景。
　　2、padding：从padding区域开始显示背景。
　　3、content：从content区域开始显示背景。

三、background-size：指定背景中图像的尺寸

　　background-size:100% 80px; 背景图片宽为100%，高为80px

四、background-break：指定内联元素的背景图进行平铺时的循环方式

五、一个元素显示多个背景

边框

一、border-radius属性圆角边的绘制：

　　border-radius：上右下左

　　div { border:1px #39ae2d solid; border-radius:3px; -moz-border-radius:0 0 3px 3px; -o-border-radius:3px; -webkit-border-radius:3px; background:#39ae2d; width:42px; height:16px; }

二、不显示边框 border:none：

　　div { border:none; border-radius:3px; -moz-border-radius:0 0 3px 3px; -o-border-radius:3px; -webkit-border-radius:3px; background:#39ae2d; width:42px; height:16px; }

三、使用图像做边框 border-image属性：

属性值：

1、none：默认值。无背景图。
2、<image>：使用绝对或相对 url 地址指定背景图像。
3、<number>：边框宽度用固定像素值表示。
4、<percentage>：边框宽度用百分比表示。

五、CSS3变型处理

一、transform功能来实现文字或图像的旋转、缩放、倾斜、移动处理

二、rotate角度：transform:rotate(45deg); 单为deg

div{ width:300px; height:20px; margin:150px auto; background:yellow; text-align:center; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); }

<div>文字</div>

三、scale缩放：

transform:scale(0.5)：整体缩小50%

transform:scale(x,y)：

h2 {width:600px; height:250px; margin:150px auto; background:yellow; text-align:center; -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -o-transform:scale(0.5); }
</style>

<h2>文字</h2>

四、skew倾斜：

p {width:600px; height:250px; margin:150px auto; background:yellow; text-align:center; -webkit-transform:skew(30deg,30deg); -o-transform:skew(30deg,30deg); -moz-transform:skew(30deg,30deg); }

<p>ssssss</p>

五、translate(水平，垂直)移动：

.ss {width:600px; height:250px; margin:150px auto; background:yellow; text-align:center;-webkit-transform:translate(350px); -o-transform:translate(350px); -moz-transform:translate(350px); }

<div class="ss">adfadsfasdfasdf</div>

六、对于一个元素使用多重变型（先移动、然后旋转、最后缩放）

div { transform:translate(50px) scale(0.5) skew(30deg); }

七、指定变型的基准点：transform-origin:left bottom or right left

六、css3中的动画功能Transitions和 Animations

一、transitions通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能

二、transitions属性使用的方法：

transition:property duration timing-function

1、property：进行平滑过渡

2、duration：在多长时间内完成属性值的平滑过渡

3、timing-function：通过什么方法来进行平滑过渡

div{ background:#ffff00; -webkit-transition:background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition:background-color 1s linear; }
div:hover { background:#00ffff; }

<div>adsfasdf</div>

过渡多个属性值：

div{ width:400px; background:#ffff00; -webkit-transition:background-color 1s linear, width 1s linear; -moz-transition: background-color 1s linear, width 1s linear; -o-transition:background-color 1s linear, width 1s linear; }
div:hover { background:#00ffff; width:300px; }

<div>adsfasdf</div>

三、Animations功能

与transitions功能相同，都是改变属性来实现动画

div{ background:red; }
@-webkit-keyframes mycolor {
	0%{ background:red; }
	40%{ background:darkblue; }
	70% { background:yellow; }
	100% { background:red; }	
}
div:hover { -webkit-animation-name: mycolor; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; }

<div>adsfasdf</div>

四、实现动画的方法：

1、linear：开始到结束以同样的速度进行

2、ease-in：开始慢，然后速度沿曲线值进行加快

3、ease-out：开始快，然后速度沿曲线值进行放慢

4、ease：开始慢，然后速度沿曲线值进行加快，然后在沿曲线值放慢

5、ease-in-out：开始慢，然后速度沿曲线值进行加快，然后在沿曲线值放慢

刷新页面返回顶部

臭小子1983