欢迎您, 来到 宁时修博客.^_^

前端----CSS系列_02

2017/10/19 林木立 CSS 870
CSS系列--属性操作与示例

一、CSS属性操作

    (1) 文本属性

        ① 文本颜色:color

        颜色属性:用来设置文字的颜色。

        颜色通过CSS以下方式指定:

    十六进制值 --- 如: color: #FF0000    
    一个RGB值 --- 如: color: RGB(255,0,0)
    颜色的名称 --- 如: color: red

        操作示例:

    p {
      color: red;
    }


        ② 文本对齐方式

        text-align 属性设置元素中的文本的对齐方式。

    left      把文本排列到左边。默认值:由浏览器决定。    
    right     把文本排列到右边。
    center    把文本排列到中间。
    justify   实现两端对齐文本效果。

         操作示例:

    p {
      text-align: center;
    }
    
    #d1 {
      text-align: left;
    }


        ③文本其它属性

    font-size: 10px;            设置文本字体大小。    
    line-height: 200px;         文本行高。通俗的讲,文字高度加上文字上下的空白区域的高度;50%: 基于字体大小的百分比。
    vertical-align:-4px         设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效。
    text-decoration: none       text-decoration 属性用来设置或删除文本的装饰。主要是用来删除超链接的下划线。
    font-family: 'Lucida Bright'
    font-weight: lighter/bold/border/
    font-style: oblique
    text-indent: 150px;         首行缩进150px。
    letter-spacing: 10px;       字母间距。
    word-spacing: 20px;         单词间距。
    text-transform: capitalize/uppercase/lowercase;  文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写。


    (2) 背景属性

    background-color: red;            背景颜色    
    background-image: url('1.jpg');   背景图片
    background-repeat: no-repeat;     设置如何平铺对象的 background-image 属性。默认情况下,重复background-image的垂直和水平方向。
    background-position: right top (20px 20px);  background-position属性设置背景图像的起始位置。

        可以简写:

    background: #ffffff url('1.png') no-repeat right top;

    

    (3) 边框属性

    border-width: 20px;  设置边框宽度    
    border-style: solid; 边框样式
    border-color: red;   边框颜色

        可以简写:

    border: 2px solid red;

        也可设置单独各边:

    border-top-style:dotted;    
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:none;


    (4) 列表属性

    list-style-type       设置列表项标志的类型。    
    list-style-image      将图象设置为列表项标志。
    list-style-position   设置列表中列表项标志的位置。
    list-style            简写属性。用于把所有用于列表的属性设置于一个声明中。

        ist-style-type属性指定列表项标记的类型:

  ul { list-style-type: square; }

        使用图像来替换列表项的标记:

  ul {
    list-style-image: url('');
  }


    (5) display属性

    none         隐藏某标签    
    block        内联标签设置为块级标签
    inline       块级标签设置为内联标签
    inline-block 做列表布局

        

        ①none

    p {
        display: none;
    }

        注意与visibility:hidden的区别:

            visibility:hidden 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

            display:none 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。


        ②block

    span {
        display: block;
    }

        注意:一个内联元素设置为display:block 是不允许有它内部的嵌套块元素。


        ③inline

    li {
        display:inline;
    }


        ④inline-block

        display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:

    #outer{
            border: 3px dashed;
            word-spacing: -5px;
    }


     (6) 外边距与内边距   

       

        

        margin:            用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。

        padding:           用于控制内容与边框之间的距离;   

        Border(边框):      围绕在内边距和内容外的边框。

        Content(内容):     盒子的内容,显示文本和图像。


        ①外边距(margin)

        单边外边距属性:

    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;

        简写:

    margin:10px 20px 20px 10px;    
    
            上边距为10px
            右边距为20px
            下边距为20px
            左边距为10px
    
    margin:10px 20px 10px;
    
            上边距为10px
            左右边距为20px
            下边距为10px
    
    margin:10px 20px;
    
            上下边距为10px
            左右边距为20px
    
    margin:25px;
    
            所有的4个边距都是25px


        居中:

    margin: 0 auto;


        ②内边距(padding)

        padding和margin的属性一样:

    padding-top:25px;
    padding-bottom:25px;
    padding-right:50px;
    padding-left:50px;

    

    padding:25px 50px 75px 100px;   上 右 下 左   
    padding:25px 50px 75px;         上 左右 下
    padding:25px 50px;              上下 左右
    padding:25px;                   上下左右都一样


点赞
说说你的看法

所有评论: (0)