css学习系列-精通css
2014-08-26 16:59
411 查看
常用选择器
(1)类型选择器:比如html标签(a,div,span等等)(2)ID选择器:通过dom上id来选择(#id)
(3)类型选择器:通过dom上class来选择(.class)
后代选择器与子选择器的区别
(1)后代选择器(ul li):元素的所有后代(2)子选择器(ul>li):元素的直接后代
(3)相邻同胞选择器(h2+p):元素相邻的之后元素
a标签的伪类
(1)链接伪类(只能用于锚元素)::link(未访问的链接) :visited(已访问的链接)(2)动态伪类(可以用于所有元素)::hover(鼠标移动到元素上) :active(选定的链接) :focus(得到焦点的元素)
备注::hover必须在:link和:visited之后才能生效;:active需要在:hover之后才能生效
background属性
(1)background-color:元素的背景颜色(2)background-position:背景图像的起始位置,如果图像复制的话也会从此位置开始。
可能的值(以下三种不能交错使用
(1)x方向:left center right ;y方向:top center bottom的组合
(2)x%(水平方向) y%(垂直方向)
(3)x-px(水平方向) y-px(垂直方向)
(3)background-size:背景图像的尺寸
(1)length:使用px来设置背景图像的高度和宽度,如果只设置一个值,第二个值为auto
(2)percentage:用父元素尺寸的百分比来设置背景图像的高度和宽度,如果只设置一个值,第二个值为auto
(3)cover:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
(4)contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
(4)background-repeat:背景图像的平铺模式
(1)repeat:默认值,在水平与垂直方向都重复
(2)repeat-x:只在水平方向重复
(3)repeat-y:只在垂直方向重复
(4)no-repeat:在水平与垂直方向都不重复
(5)background-origin:规定background-position相对于什么位置来定位(若background-attachment 属性为 "fixed",则该属性没有效果)
(1)padding-box:默认值,相对于内边距框进行定位(content,padding,不包含边框的宽度)
(2)border-box:相对于边框盒来定位(content,padding,包含边框的宽度)
(3)content-box:相对于内容框来定位(不包含padding和边框的宽度)
(6)background-clip:规定背景的绘制区域
(1)border-box:默认值,背景被裁剪到边框盒(content,padding,包含边框的宽度)
(2)padding-box:背景被裁剪到内边距框(content,padding,不包含边框的宽度)
(3)content-box:背景被裁剪到内容框(不包含padding和边框的宽度)
备注:(1)当背景图片为渐变色的图片时,但是用户的浏览器高度不固定可以将背景设置为渐变色的最终颜色,可以实现图像与背景色的无缝连接
css3新属性
border-radius:为元素添加圆角边框,四个值为border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius;值可以为像素或百分比
border-image:使用图像作为边框
box-shadow:
不透明度
1.css不透明度.class{background-color:red;opacity:0.8;filter:alpha(opacity=80);/*兼容IE浏览器*/}
此种方法的主要问题是,除了对背景生效外,用于它的元素的内容也会继承它,如果元素里面有文本的话当不透明度不高的话,会导致文本也会看不清楚。
2.rgba
.class{back-ground-color:rgba(255,0,0,0.5)}
同时设置颜色和不透明度的机制,使用此方法会避免css不透明度里面产生的问题
3.css视差效果
使用多个透明的背景图像进行覆盖,背景图像的position-x使用百分比,当缩小或放大浏览器窗口时,就会看到在移动了,具体使用例子见,
http://www.silverbackapp.com/
4.图像替换
在网页中要实现有些效果的字体,但是字体库有限;所以有些标题啥的还是需要使用图像来完成,但是只使用图像的话会影响搜索引擎的搜索,所以可以使用下面的方法
来同时满足2中需求。
比如一个h1的标签,里面是文字title但是需要用一个比较炫的图片来代替。
<h1>title</h1>
h1{
text-indent: 100%;/*规定文本块中首行文本的缩进 100%缩进应该是首行全部缩掉*/
white-space: nowrap; /*文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止*/
overflow: hidden;
background: url("title.gif") no-repeat;
}
css精灵
网站上的很多小图标可以放在一个图像文件上,在使用时通过background-position来决定使用哪个图标。表格边框
border-collapse:设置表格里的边框是合并的还是分开的separate:默认值,边框会被分开,不会忽略border-spacing
collapse:如果可能,边框会合并为一个单一的边框,忽略border-spacing
border-spacing:设置相邻单元格的边框间的距离,只对border-collapse:separate生效
表单标签
增加了表单对于使用辅助设备的用户易用性。<lable for="nameid">Name:</label> <input id="nameid" name="name" type="text" />
去除浮动的方法
(1)多加一个用于去除浮动的div<div class="main"> <span style="white-space:pre"> </span><div style="float:left"></div> <div style="float:left"></div> <div style="clear:both"></div> </div>(2)在主div里面设置overflow:hidden
<div class="main" style="overflow:hidden;"> <div style="float:left"></div> <div style="float:left"></div> </div>(3)设置主div的:after伪类
.main:after { content:""; display:block; clear:both; }
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="css">.main:after { content:"."; clear:both; height:0; line-height:0; font-size:0px; visibility:hidden; display:block; }
<pre name="code" class="html"><div class="main"> <div style="float:left"></div> <div style="float:left"></div> </div>
CSS3列布局
主要使用float属性,通过div嵌套的方式实现<style type="text/css"> .wrapper { width:920px; margin:0 auto; } .content .primary { width:650px; float:right; display:inline; border:1px solid black; } .content .primary .primary { width:400px; float:right; display:inline; border:1px solid black; } .content .primary .secondary { width:230px; float:left; display:inline; border:1px solid black; } .content .secondary { width:230px; float:left; display:inline; border:1px solid black; } .content:after,.content .primary:after { content:""; display:block; clear:both; } .head,.content,.footer { border:1px solid black; margin-top:10px; } </style>
<div class="wrapper"> <div class="head">head </div> <div class="content"> <div class="primary"> <div class="primary"> primary primary </div> <div class="secondary"> primary secondary </div> </div> <div class="secondary">secondary </div> </div> <div class="footer">footer </div> </div>
CSS常见问题
1.特殊性和分类次序的问题发现了展现出来的css效果与自己预期不一样,考虑是否有css覆盖了,可以通过浏览器f12调试查看。
2.外边距叠加
在某些情况下,2个嵌套的dom都只设置外边距的话,会导致想要的效果不是2个外边距相加,而是会覆盖。解决方法dom里面加一点内边距即可。
相关文章推荐
- 系列文章--精通CSS.DIV网页样式与布局学习
- CSS基础应用学习系列(2)——纯CSS工具提示
- CSS基础应用学习系列(4)――用CSS对列表应用样式
- 20个学习CSS的绝佳网站——让你从入门到精通
- 从0开始学习ASP.NET(2.0为例)系列——06HTML、CSS、JavaScript相关知识介绍
- 20个学习CSS的绝佳网站——让你从入门到精通
- CSS学习从入门到精通
- 韩顺平_php从入门到精通_视频教程_第10讲_div-css开山篇_学习笔记_源代码图解_PPT文档整理
- [转载]20个学习CSS的绝佳网站——让你从入门到精通
- 20个学习CSS的绝佳网站——让你从入门到精通
- JQuery学习系列(八)CSS
- 推荐20个让你学习并精通CSS的网站
- CSS学习系列四:解决样式冲突
- CSS学习系列三:伪类和伪元素
- 20个学习CSS的绝佳网站-让你从入门到精通
- CSS基础应用学习系列(3)——图像的CSS阴影效果
- CSS学习系列二:CSS选择符
- CSS学习系列六:文本样式
- 20个学习CSS的绝佳网站-让你从入门到精通
- Sharepoint学习笔记—Site Definition系列--8、如何在Site Definition中引入Master Page (2、Css等资源的引入)