码迷,mamicode.com
首页 > Web开发 > 详细

css基础

时间:2016-01-29 16:33:30      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:css、backgroud、text、padding、margin、border、position、选择器

css指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素,样式通常存储在样式表中
css常用属性
    背景:
        background-color:background:transparent; /*透视背景*/
        background-image : url(/image/bg.gif); /*背景图片*/
        background-repeat : repeat; /*重复排列-网页默认*/
        background-repeat : no-repeat; /*不重复排列*/
        background-repeat : repeat-x; /*在x轴重复排列*/
        background-repeat : repeat-y; /*在y轴重复排列*/
            背景位置
            background-position : % %; /*背景图片x与y轴的位置*/
            background-position : top; /*向上对齐*/
            background-position : buttom; /*向下对齐*/
            background-position : left; /*向左对齐*/
            background-position : right; /*向右对齐*/
            background-position : center; /*居中对齐*/


    文本:    text、word、direction(文本操作:通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。)
       text-indent(缩进文本)  text-indent: em;
       text-align(水平对齐)    text-align:center
       word-spacing(字间隔)  word-spacing: px;
       text-decoration(文本装饰)text-decoration: none
       direction(文本方向)     direction:rtl;

    框模型:背景应用于由内容和内边距、边框组成的区域。
        padding(内边距)
        padding-top:px; /*上边框留空白*/
        padding-right:px; /*右边框留空白*/
        padding-bottom:px; /*下边框留空白*/
        padding-left:px; /*左边框留空白

       margin(外边距)
       margin-top:px; /*上边界*/
       margin-right:px; /*右边界值*/
       margin-bottom:px; /*下边界值*/
       margin-left:px; /*左边界值*/


        border(边框)可设置值:宽度,样式,颜色
            框线位置
            border-top : px solid border-bottom : px solid border-left : px solid border-right : px solid 框线样式
            solid /*实线框*/
            dotted /*虚线框*/
            double /*双线框*/

    CSS文字属性:
        color : font-family : 宋体,sans-serif; /*文字字体*/
        font-size : pt; /*文字大小*/

        文字对齐
            text-align:right; /*文字右对齐*/
            text-align:left; /*文字左对齐*/
            text-align:center; /*文字居中对齐*/
            text-align:justify; /*文字分散对齐*/
        vertical-align属性
            vertical-align:top; /*垂直向上对齐*/
            vertical-align:bottom; /*垂直向下对齐*/
            vertical-align:middle; /*垂直居中对齐*/
            vertical-align:text-top; /*文字垂直向上对齐*/
            vertical-align:text-bottom; /*文字垂直向下对齐*/

    定位:
        position   把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
        top          定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
        right     定义了定位元素右外边距边界与其包含块右边界之间的偏移。
        bottom    定义了定位元素下外边距边界与其包含块下边界之间的偏移。
        left      定义了定位元素左外边距边界与其包含块左边界之间的偏移。
        overflow   设置当元素的内容溢出其区域时发生的事情。
        clip      设置元素的形状。元素被剪入这个形状之中,然后显示出来。
        vertical-align 设置元素的垂直对齐方式。
        z-index       设置元素的堆叠顺序。

        相对定位:注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
            position: relative;
              left: px;
              top: px;
            }

        绝对定位:绝对定位使元素的位置与文档流无关,因此不占据空间。
            position: absolute;
              left: px;
              top: px;
            }

    选择器
        元素选择器
            为某个 HTML 元素,比如 p、h1、em、a设置样式
            html {color:black;}
            h1 {color:blue;}
            h2 {color:silver;}

        选择器分组
            h2 元素和段落都有灰色。
            h2, p {color:gray;}

        类选择器
            类选择器允许以一种独立于文档元素的方式来指定样式。
            该选择器可以单独使用,也可以与其他元素结合使用。
            .important {color:red;}
            只有段落显示为红色文本:
            p.important {color:red;}
            假设 为 important 的所有元素都是粗体,而 为 warning 的所有元素为斜体,中同时包含 important 和
             warning 的所有元素还有一个银色的背景 。就可以写作:
            .important {font-weight:bold;}
            .warning {font-style:italic;}
            .important.warning {background:silver;}

        ID选择器
        属性选择器
        a[href] {color:red;}


css基础

标签:css、backgroud、text、padding、margin、border、position、选择器

原文地址:http://lxb994.blog.51cto.com/9805112/1739818

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!