display属性,浮动,定位这三个挺重要的.不过我在看复习材料的时候我觉得他写的不怎么好.只记住理论是没有用的,主要还是要会应用... 所以理论我就不赘述了,如果有合适的案例我后面再说吧. 然后接下来我们开始正题了.
1.伪类选择器
在 CSS3 中有以下几种 UI 伪类选择器。
| 选择器 | 描述 |
|---|---|
| :focus | 给获取焦点的元素设置样式。 |
| ::selection | 给页面中被选中的文本内容设置样式。 |
| :checked | 给被选中的单选框或者复选框设置样式。 |
| :enabled | 给可用的表单设置样式。 |
| :disabled | 给不可用的表单设置样式。 |
| :read-only | 给只读表单设置样式。 |
| :read-write | 给可读写的表单元素设置样式。 |
| :valid | 验证有效。 |
| :invalid | 验证无效。 |
这个,他给了一个验证邮箱的demo,不过问题挺大的.他默认的时候居然是验证有效....这边我建议还是自己写js弄一下,别用他给的伪类选择器. 这里我直接把图放出来让大家看看他有多抽象..
2.文字阴影
在 CSS3 中,我们使用 text-shadow 属性来给文本内容添加阴影的效果。
文本阴影的语法格式如下:
text-shadow: x-offset y-offset blur color;
x-offset是沿 x 轴方向的偏移距离,允许负值,必须参数。y-offset是沿 y 轴方向的偏移距离,允许负值,必须参数。blur是阴影的模糊程度,可选参数。color是阴影的颜色,可选参数。
写了一个demo.
div {
font-size: 100px;
color: rgb(0,153,153);
text-shadow: 4px 4px 3px rgb(0,153,153); }
他这个不知道为什么一开始会放不出来....可能我不太会用这个编辑器
- 圆角边框
border-radius 属性的值表示圆角的直径,可以设置四个值,其值的顺序为:左上角,右上角,右下角,左下角。 懒得放图了,这个就是把正方形变成圆形的属性.
建议连写,因为他单独写你不太好记的...
border-top-left-radius: 取值; border-top-right-radius: 取值; border-bottom-right-radius: 取值; border-bottom-left-radius: 取值;
4.关于文本溢出
text-overflow 属性可以设置超长文本省略显示,其语法如下所示:
text-overflow: clip|ellipsis;
其属性值的含义如下所示:
| 属性值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
这个我是不太理解第一个属性的..他的效果图实在是一言难尽..看看第二个就行吧. 另外,他如果要使用的话,也要配合一下这两个属性:overflow: hidden; /隐藏超出文本/ white-space: nowrap; /强制单行显示/
好了,今天大概就先说那么多.希望明天还能学习?封校不易,学习真是百年难得一见的事情.