用户名:  密码:   
您当前的位置:首页 > 网页设计 >  Html+CSS > 

12_13

上次修改时间: 2017-07-03 11:40:57      来源:网络总结      作者:钢铁长陈
上一页      路径:DSD\Learn\Html与CSS\html5+CSS3\      下一页

12.1.1 认识属性选择器
css2有4个属性选择器
E[属性名] E可要可不要,E表元素
[attr=value]
[arrt~=value]
[attr!=value]
C3加的属性
att*="val" 
att^="val"
att$="val"

12.1.2 案例实战
超链接不同类型文件的扩展名不同
通过属性选择器,根据不同扩展名添加不同的图标

12.2.1 认识结构伪类选择器
C3新设计的选择器,
E:root 匹配E所以文档的根元素,同html类选择器
E:nth-last-child(n): 
tr:nth-child(3) 所有表格第三行的元素tr
tr:nth-child(2n+1)所有奇数行
tr:nth-child(odd)
E:nth-last-child(n)从后往前
p:nth-of-type(2) 第个个<P>元素
last-child 最后一个子元素
first-of-type 最后个子元素
E:empth 匹配没有任何子元素

12.2.2 案例实战
好看的表格设计,隔行换色
tr:nth-child(odd)
tr:nth-child(2n+1)
li:nth-child(3n+1) 每3个加粗
li:noth-child(55) 第55个子元素
圆角效果
-webkit-border-radius

12.3.1 认识常用UI伪类选择器
C3新设计的选择器,用户界面
E:checked
E:enabled
E:disabled
E:selection 高亮状态的部分

12.3.2 案例实战
#login input:disabled#name 设置使不同用
#login input:disabled#password 

12.4 其它选择器
E:not(s)否定选择器
E:traget 匹配相关URL指向的E元素#blue,通过猫链接指向后匹配
td:only-of-type
tbody th:not(.end)
td:only-of-type

13.1.1 定义text-shadow属性
text-shadow:0.1em 0.1em 0.3em #333 阴影向左下偏移0.1,分x和y轴,模糊度,颜色 负值向左上
 水平偏移,垂直偏移,模糊半径,背景颜色

13.1.2 应用阴影效果
灵活应用阴影效果
增加前景色背景色对比度,给阴影增加一点,使前景色背景色好区别
text-shadow  增加3个效果
阴影可跑到元素外面,不影响元素大小,不影响页面布局,
火焰文字,多个阴影叠加,
浮雕效果,左上角偏移白勾,右下角偏移黑色
凹陷效果,描边效果,四个方向的偏移
发光效果,增加模糊度,不偏移
因为text-shadow可接收多个效果值

13.1.3 综合实战:设计黑客网站首页
position:relative相对定位,后可以约定定位
overflow:hidden 超出
text-shadow
挡风板样式,
探照灯效果,通过一个背景图,通过绝对定位找一个点
文字阴影右上偏移,加上模糊
再放一个层满页显示

13.2.2 溢出文本
text-verflow超长文本,换行还是隐藏,以前用js处理
clip 超出裁切,ellipsis超出省略,但省略号显示有要求
white-space:nowrap 不换行
-o-text-overflow:ellipsis; 

13.2.3 文本换行
word-wrap: normal连续文本换行,break-word边界内换行 对长串英文换行不知合
word-break: 也能换行 针对亚洲语言的
line-break 专门控制日文换行的
white-space 结合C2看
table-layout:fixed: 逐步实现的
禁止把词断开,keep-all允许顶开边界,break-word强制在一行显示
th定义了宽度有些属性就不再起作用

13.3.1 使用RGBA颜色值
是RGB模式的扩展,添加一个不透明度,红绿蓝,不透明度0-1  0-255 0%-100%
box-shadow 盒子阴影

13.3.2 使用HSL颜色值
C3新增加的模式,模仿工业标准,能模拟出人类能感知的所有颜色,超过RGB
色调0-360,饱和度0%-100%,亮度0%-100%,
有些浏览器不支持
饱和度和亮度都是100%时或0%时

13.3.3 使用HSLA颜色值
HSLA是HSL的扩展,增加了透明度,0-1之间
li:nth-child(1) {background: hsla(120,50%,50%,0.1);}

13.3.4 定义opacity属性值
可设置任何元素为半透明效果
opacity=0.7
filter:alpha(opacity=70); #IE不支持,通过滤镜形式,为兼容
仅背景透明还是前景背景都透明

13.3.5 定义transparent颜色值
设计前景背景时设为transparent时全透明
c3所有设计颜色值的都可以设为transparent