网站建设学习（八）——CSS属性及值

本文链接：https://blog.csdn.net/QJM1995/article/details/86564755

上一篇介绍了css语言应用过程中的选择器应用，css除了选择器外，另一部分即主体部分的属性及值介绍，通过对属性的合理应用可以对网站页面进行美化，本篇同样需要在html文件同文件夹下建立一个css属性值.css文件。css属性众多，本篇给出了其中比较重要或者常用的标签用法，文章末会给出css全属性索引链接，以供查找学习。

html：

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->

        <link href="css属性值.css" rel="stylesheet"/>
        <!--引入css文件-->

    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->
    <div class="background"><h1>背景属性测试</h1></div>

    <div class="border"><h1>边框属性测试边框属性测试边框属性测试边框属性测试边框属性测试边框属性测试边框属性测试边框属性测试</h1></div>

    <div class="box"><h1>盒子属性测试盒子属性测试盒子属性测试盒子属性测试盒子属性测试盒子属性测试盒子属性测试盒子属性测试</h1></div>

    <div class="color"><h1>颜色透明度属性测试</h1></div>

    <div class="dimension"><h1>尺寸属性测试尺寸属性测试尺寸属性测试尺寸属性测试尺寸属性测试尺寸属性测试尺寸属性测试尺寸属性测试</h1></div></br>

    <div class="flexible"><h4>可伸缩盒子测试</h4></div>

    <div class="font"><h1>字体属性测试</h1></div>

    <p>边距测试上边距</p>
    <div class="margin"><p>外边距测试</p></div>
    <p>边距测试下边距</p>

    <table border="2px">
        <tr>
            <td class="padding">内边距测试</td>
        </tr>
    </table>

    <div class="column">
        多列属性测试一多列属性测试一多列属性测试一多列属性测试一多列属性测试一多列属性测试一多列属性测试一
        多列属性测试二多列属性测试二多列属性测试二多列属性测试二多列属性测试二多列属性测试二多列属性测试二
        多列属性测试三多列属性测试三多列属性测试三多列属性测试三多列属性测试三多列属性测试三多列属性测试三
    </div>

    <table border="2px" class="table">
        <caption>题目</caption>
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
        <tr>
            <td>第三行第一列</td>
        </tr>
    </table>

    <div class="transition"></div>

    <div class="text"><h2>文本属性测试</h2></div>

    </body>
</html>

css属性值.css：

/*css属性十分多，文章末会给出css属性参考链接，这里介绍常用的css属性分类及演示*/

/*css背景属性*/

.background{
    background-color: chartreuse; 
    /*
        background-attachment:设置背景图像固定或者跟随移动
        background-image:设置背景图片
        background-position:设计背景图像开始位置；
        background-repeat:设置图像重复样式；
        background-clip:规定背景绘制区域；
        background-origin:规定背景图片的定位区域；
        background-size:规定背景图片的尺寸；
    */
}

/*css边框属性*/

.border{
    border-style: double;
    border-color: crimson;
    border-bottom-left-radius: 10px;
    outline-style: dotted;
    outline-color: aqua;
    box-shadow: 10px 10px;/*定义阴影*/
    /*
    border-#
    border-#-style
    border-#-color
    border-#-width
    （#：bottom left right top)设置（下 左 右 顶）边框的形状，颜色，宽度

    border-bottom/top-left/right-radius
    设置边框四角的形状

    border-image
    border-image-outset
    border-image-repeat
    border-image-slice
    border-image-source
    border-image-width
    设置边框图片属性，超出边框的量，平铺或拉伸，向内偏移，边框图片，边框宽度

    outline-style
    outline-color
    outline-width
    设置轮廓的形状，颜色，宽度
    */
}

/*CSS盒子属性，与边框不同的是盒子规定了一个固定的区域，边框而是随文字变化而变化*/

.box{
    width: 220px;
    height: 120px;
    overflow-x: hidden;
    overflow-y: hidden;
    /*
    设置边框的溢出元素内容的区域的上下边缘的裁剪形式。
    overflow-style：设置溢出元素的首选滚动方法
    */
}

/*CSS颜色属性*/

.color{
    opacity: 0.5;
    /*规定元素的不透明级别*/
}

/*css尺寸属性，设置属性的尺寸大小*/

.dimension{
    height: 250px;
    width: 250px;
    /*
    max-height
    min-height
    max-width
    min-width
    设置元素的最大/最小高度/宽度
    */
}

/*css可伸缩框属性*/

.flexible{
    width: 200px;
    height: 200px;
    border: 2px solid black;
    display: -webkit-box;
    -webkit-box-align: center;/*子元素如何对齐框*/
    -webkit-box-pack: center;/*规定水平框中的水平位置或者垂直框的垂直位置*/
    -webkit-box-direction: normal;/*规定子元素的显示方向*/
    /*
    box-flex：规定框的子元素是否可以伸缩
    box-lines：规定当内容超出父元素框时是否进行换行处理
    box-orient：规定框的子元素是否应该水平或者垂直排列

    display：规定不同的浏览器，为兼容大部分浏览器，应该将不同的标签全部写上
    火狐：-moz-box
    谷歌，Safari，Opera：-webkit-box
    */
}

/*css字体属性，对字体的一些操作*/

.font{
    font-family: Georgia, 'Times New Roman', Times, serif;/*设置字体*/
    font-size: 100px;/*设置字体大小*/
    font-stretch: extra-expanded;/*设置字体拉伸程度*/
    font-style: oblique;/*设置字体样式，斜体，粗体等*/
    font-variant: inherit;/*规定是否以小型大写字母字体显示文本*/
    font-weight: 200;/*设定字体的粗细*/

}

/*css列表属性，指定链表的形式*/

.list{
    /*
    list-style: 设置列表的属性
    list-style-image：设置列表前标，之前介绍的默认列表前为圆形或者方块等，这里可以替换成其他图片等，不做演示
    list-style-position：设置前标的放置位置
    list-style-type：设置前标类型
    */
}

/*css外边距属性，设置外边距的大小*/

.margin{
    margin-bottom: 5cm;
    margin-top: 5cm;
    margin-left: 5cm;
    margin-right: 5cm;
    /*设置下，上，左，右的边距*/
}

/*css内边距属性，设置内边距的大小*/

.padding{
    padding-bottom: 5cm;
    padding-top: 5cm;
    padding-left: 5cm;
    padding-right: 5cm;
    /*设置下，上，左，右的边距*/
}

/*css多列属性，在多个段落存在时的排版*/

.column{
    column-count: 3;/*设定被分割的列数*/
    column-fill: inherit;/*设置如何填充每列*/
    column-gap: 1cm;/*设置列之间的间隔*/
    column-rule-color: aqua;/*设置列间隔的颜色*/
    column-rule-style: groove;/*设置列间隔的样式*/
    column-rule-width: 1cm;/*设置列间隔的间隔*/
    column-span: 3;/*设置横跨列的列数*/
}

/*css定位属性，定位属性直观，这里只进行解释不做演示*/

.positioning{
    /*
    bottom：设定下边边距的大小
    top：设定上边边距的大小
    left：设定左边边距的大小
    right：设定右边边距的大小
    float：设定框是否可以浮动
    overflow：设定内容溢出时的处理
    cursor：设置光标的形式
    vertical：设置元素垂直对齐方式
    z-index：设置元素的堆叠顺序
    */
}

/*css表格属性，对表格进行的一系列操作*/

.table{
    border-collapse: collapse;/*规定是否合并表格边框*/
    border-spacing: 2cm;/*规定相邻单元格之间的距离*/
    caption-side: top;/*设置题目位置*/
    empty-cells: hide;/*设置空单元格是否显示背景及边框*/
}

/*css过渡属性，展示了css过渡从一项到另一项元素*/

.transition{
    width: 100px;
    height:100px;
    background:blue;
    -webkit-transition-property: width;/*过渡的属性名称*/
    -webkit-transition-duration: 2s;/*过渡的时间*/
    /*
    transition-timing-function：过渡的效果曲线
    transition-delay：过渡效果的延迟时间
    */
}

.transition:hover{
    width: 300px;
    /*这里使用的是伪类选择器，当鼠标放置到位置上时，则由上一个效果至下一个效果过渡*/
}

/*css文本属性，对文本的一系列操作*/

.text{
    color: chartreuse;/*设置文本颜色*/
    direction: rtl;/*设置文字方向*/
    letter-spacing: 1cm;/*设置字符间距*/
    line-height: 2cm;/*设置行高*/
    text-align: center;/*规定文本水平对齐方式*/
    text-decoration: brown;/*设置文本装饰效果*/
    text-indent: 2cm;/*设置文本块首行缩进*/
    text-shadow: 5px 5px 5px #3f0707;/*设置文本阴影*/
    text-transform: capitalize;/*控制文本大小写*/
    /*
    white-space：规定如何处理元素中的空白
    word-spacing：设置单词间距
    hanging-punctuation：规定标点字符是否位于线框之外
    text-emphasis：设置重点标记
    text-outline：设置文本轮廓
    text-overflow：设置文本溢出时的操作
    text-wrap：规定文本换行规则
    word-wrap：允许对不可分割的单词进行分割并换行
    */
}

CSS属性参考手册：CSS参考手册

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。