zoukankan      html  css  js  c++  java
  • CSS学习(二)

    列表

    在HTML中,有两种类型的列表:

    • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
    • 有序列表 - 列表项的标记有数字或字母

    使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

    所有的CSS列表属性

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

    CSS 表格

    直接上一个实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <title>WENG教程</title>
    <style>
    table,td,th
    {
        border:2px solid gray;
    }
    table
    {
        width:100%;
        border-collapse:collapse;
    }
    th
    {
        background-color:blue;
        color:yellow;
        height:60px;
        padding:10px; // margin td、th is 6px
        
    }
    td
    {
        text-align:center;
        height:35px;
        vertical-align:bottom;
        padding:8px; //如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:
    }
        
        
        
    </style>
    </head>
    
    <body>
    <table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td>$100</td>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    <td>$150</td>
    </tr>
    <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td>$300</td>
    </tr>
    <tr>
    <td>Cleveland</td>
    <td>Brown</td>
    <td>$250</td>
    </tr>
    </table>
    </body>
    </html>
    View Code

    盒子模型(Box Model)

    CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。

    盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

    下面的图片说明了盒子模型(Box Model):


    CSS box-model

    不同部分的说明:

      • Margin(外边距) - 清除边框外的区域,外边距是透明的。
      • Border(边框) - 围绕在内边距和内容外的边框。
      • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
      • Content(内容) - 盒子的内容,显示文本和图像。

    边框

    边框-单独设置各边

    p
    {
        border-top-style:dotted;
        border-right-style:solid;
        border-bottom-style:dotted;
        border-left-style:solid;
    }

    CSS 边框属性

    属性描述
    border 简写属性,用于把针对四个边的属性设置在一个声明。
    border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
    border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
    border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
    border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
    border-bottom-color 设置元素的下边框的颜色。
    border-bottom-style 设置元素的下边框的样式。
    border-bottom-width 设置元素的下边框的宽度。
    border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
    border-left-color 设置元素的左边框的颜色。
    border-left-style 设置元素的左边框的样式。
    border-left-width 设置元素的左边框的宽度。
    border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
    border-right-color 设置元素的右边框的颜色。
    border-right-style 设置元素的右边框的样式。
    border-right-width 设置元素的右边框的宽度。
    border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
    border-top-color 设置元素的上边框的颜色。
    border-top-style 设置元素的上边框的样式。
    border-top-width 设置元素的上边框的宽度。

    CSS 轮廓(outline)

    轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    CSS outline 属性规定元素轮廓的样式、颜色和宽度。

    Outline

     
    CSS" 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。

    属性说明CSS
    outline 在一个声明中设置所有的轮廓属性 outline-color
    outline-style
    outline-width
    inherit
    2
    outline-color 设置轮廓的颜色 color-name
    hex-number
    rgb-number
    invert
    inherit
    2
    outline-style 设置轮廓的样式 none
    dotted
    dashed
    solid
    double
    groove
    ridge
    inset
    outset
    inherit
    2
    outline-width 设置轮廓的宽度 thin
    medium
    thick
    length
    inherit
  • 相关阅读:
    Java Image Processing
    贝塞尔曲线开发的艺术
    Ubuntu中Hadoop环境搭建
    FIRST集合、FOLLOW集合、SELECT集合以及预测分析表地构造
    Linux环境下使用VSCode编译makefile文件的注意事项
    神经记忆模型
    深度学习推荐阅读的论文
    博客园无法发布文章解决办法
    计算机各个方向名校公开课
    软件过程基础
  • 原文地址:https://www.cnblogs.com/arxive/p/7203301.html
Copyright © 2011-2022 走看看