您好,欢迎来到建站之家源码网建站之家!只做精品网站源码
  • 首 页
  • 网站建设WEB前端开发入门基础第六课:CSS介绍二
    时间:2016-04-23 16:35 来源:未知 作者:admin 浏览:收藏 打印
    本节课继续为大家介绍CSS基础知识,常见样式:单位值种类、颜色值模式、背景图片、平铺、背景定位
     

    DIV+CSS布局常用的属性有哪些?
     
    用过DIV+CSS的人都知道,虽然这种布局没有用传统的table直观,但用习惯了就会感觉出DIV+CSS的优越。对于seo优化,div+css也有了明显的优势,实际应用中我搜索了DIV+CSS的常用定义项,并对其参数作了归纳和说明,与喜欢DIV+CSS的朋友共享。通用类 
    overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围 
    !important 
    指定样式规则的应用优先权:
     
    文字类
    color: #FF0000;文字颜色 
    font-family: "Arial", "Helvetica", "sans-serif";字体
    font-size: 9px;字号 
    text-align:center; 居中(left为居左,right为居右) 
    line-height:28px;行高(可用150%值) 
    font-style: italic;斜体(oblique偏斜体) 
    font-weight: bold;服务粗体(bolder特粗,400粗值)
    font-variant: small-caps;小型大写字母
    text-transform: capitalize;首字母大写 
    text-decoration: underline overline line-through blink;下划线,上划线,删除线,闪烁 
    text-indent: 2em;文字缩进2个字体高(或15px,即15象素) 
     
    背景类
    background-attachment: fixed;固定位置(scroll滚动)
    background: #0066CC;背景色(transparent透明)
    background: url(/image/more2.gif);背景图片 
    background-repeat: repeat;重复(repeat-x横向重复,repeat-y纵向重复)
    background-position: center top;水平居中 垂直顶部(left center水平居左 垂直居中) 
    background:url(/image/dtbg.gif) #FEFEFE no-repeat right bottom(2px 5px); 背景图片、背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px) 
     
    框架位置类 
    clear: both;两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象) 
    float: left;浮动对象位置居左(right, 最新列车时刻表位置居右) 
    position:relative; 相对位置,一般在上级框架中设定 极品时刻表 
    position:absolute; 绝对位置,配合上级框架的设定对本级框架设定,设置top、left值 
    top:5px; 页面绝对或相对于框架顶端绝对位置 
    left:10px; 页面绝对或相对于框架左边绝对位置 
    width: 100px;宽100px 
    height: 200px;高200px(可用auto和100%值) 
    margin 上海火车时刻表:10px 20px 10px 20px; 
    上右下左页边距(值相同可省写margin:10px) 
    单独指定用margin-top:10px; (margin-right、margin-bottom、margin-left) 
      padding:20px 10px 10px 20p; 
    上右下左内容离边框的距离(值相同可省写padding:10px) 
    单独指定用padding-top:10px;(padding-right、padding-bottompadding-left) 
    border:#ccc 1px solid 成都列车时刻表; 
    四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线) 
    单独指定用border-top:#ccc 1px solid;border-right:#ccc 1px solid 
    等等 
    项目列表类 list-style-position: outside;位置为外(inside内) list-style-image: url(/yh/image/more04.gif);项目符号图像 临客时刻表 list-style-type: disc;项目符号为圆点(circle圆圈,square方块) 
    扩展类 cursor: e-resize;鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4);滤镜 filter: FlipH;横向翻转(FlipV gprs流量费纵向翻转) 
    单独设置链接 
    #bottool a:link{color:#fff};未访问的颜色 
    #bottool a:visited{color:#fff};已访问的颜色 流量软件 
    #bottool a:hover{color:#ff0};鼠标在链接上 
    这么多定义项, 其实常用也就下面几类:指定宽高值width,height;指定背景:background;指定位置:float,特殊的用position结合 top、left来定位;设定框架边距:margin;设定容器内框距:padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。
    1、取消overflow:hidden是因为经反复实验,该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容,有时反而需要容器高度能随内容的多少而撑开容器高度。
    2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系,框架或容器的位置还是用float、position、top、left等精确定位。 
    3、!important 
    指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果,我的网站就是想固定显示效果,所以不存在什么优先权。 
    我对DIV+CSS也还在研究之中,有不当之处请大家跟贴指正,有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站,最重要的是布局思路问题,不同的设计方案,设计的繁简大不一样。我着重框架或容器的通用性,设计出几种容器的样式,就象FS4中的标签样式,然后在需要的地方调用这个样式就行了,以达到通用性而不是专用性。、 希望 可以帮到你
    标签:建站之家

    郑重声明:
    本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
    我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。
    如有侵犯您的版权,请及时联系QQ:1395550247,我们尽快处理。

    HTML CSS基础入门视频教程(完整全套免费)HTML CSS基础入门视频教程(完整
    99G高清WEB前端开发视频教程视频打包下载(以下都包含在内)99G高清WEB前端开发视频教程视
    网站建设WEB前端开发视频教程第一课:学习入门网站建设WEB前端开发视频教程
    支持建站之家广告栏目
      客服:我们竭诚为您服务!

      客服:我们竭诚为您服务!