常见的CSS属性（一）——字体、文本、边框、内边距、外边距、背景、行高、圆角、透明度、颜色值

一、字体

二、文本

三、边框

四、外边距

五、内边距

六、背景

七、行高

八、圆角

九、透明度

九、颜色值

---

        元素的继承性是指给父元素设置了某些属性，子元素或后代元素也会有作用。

一、字体

        “font-*”是字体相关的属性，具有继承性。代码如下：

.box-1 {
    /* 设置字体大小 */
    font-size: 20px;
    /* 设置字体样式(normal/italic/...) */
    font-style: italic;
    /* 设置字体粗细(lighter/bold/100/200/...) */
    font-weight: bold;
    /* 设置字体(宋体/微软雅黑/...) */
    font-family: 宋体;
}

二、文本

        text-* 是文本相关的属性，具有继承性，代码如下：

.box-2 {
    /* 修饰文本线:line-through 、underline 、 overline*/
    text-decoration: line-through;
    /* 设置文本水平对齐方式 left、 center 、right  */
    text-align: center;
    /* 字体颜色 (具有继承性)*/
    color: deeppink;
}

三、边框

        border-*属性是与边框相关的属性，边框可以撑开盒子大小。 一个标签有四个边，每个边可以有大小、样式、颜色组成。这些属性分别是border-width、border-style: solid (实线 、虚线、点线)、border-color等。还可以设置每一个边框的样式，如border-top/border-bottom等。

.box-3 {
    /* border-width: 10px; */
    /* border-style: solid; */
    /* border-color: green; */
    /* border: 10px solid green; */

    /* 上边框 */
    border-top: 30px solid purple;
    /* 右边框 */
    border-right: 30px solid orange;
    /* 下边框 */
    border-bottom: 30px solid blue;
    /* 左边框 */
    border-left: 30px solid green;
}

        也可以直接写为一行，设置边框粗细、线条和颜色，一般情况下常用的就是这些属性。

border: 1px solid #ccc;

四、外边距

        margin-*是外边距属性，外边距是指元素作用于浏览器或其他元素之间的间距，不会撑开盒子大小。 

        margin:值1,值2,值3,值4;对应的四个值分别为上、右、下、左方向，也可以直接设置“margin-right”、“margin-top”、“margin-bottom”、“margin-left”的值，其中——

        margin-left 正数往右边移动，负数往左边移动，margin-right反之

        margin-top 正数往下边移动，负数往上边移动，margin-bottom反之

.box-1 {
    /* margin-top: 50px; */
    /* margin-right: 100px; */
    /* margin-bottom: 100px; */
    /* margin-left: 50px; */

    /*上  右    下    左 */
    margin: 50px 100px 100px 50px;
}

五、内边距

        padding-*是内边距属性，内边距是指边框与内容之间的间距，可以撑开盒子大小，与外边距类似，有上右下左四个方向，分别写作padding-top、padding-right、padding-bottom和padding-left，也可以直接写为一行，padding:值1,值2,值3,值4，分别表示上右下左四个方向。

        padding-left 正数往右边移动，负数往左边移动，padding-right反之

        padding-top 正数往下边移动，负数往上边移动，padding-bottom反之

.box-5 {
    border: 5px solid #000;
    /* padding-left: 50px;
    padding-top: 80px;
    padding-right: 40px;
    padding-bottom: 30px; */
            /* 上  右   下   左 */
    padding: 80px 40px 30px 50px;
}

        遇到多行文本垂直居中，可以通过内边距居中。代码如下：

<style>
    .demo {
        background-color: blue;
        font-size: 40px;
        /* 遇到多行文本垂直居中，可以通过内边距居中 */
        padding-top: 80px;
        padding-bottom: 80px;
    }
</style>
<div class="demo">
    xfgj  hello world <br>
    xfgj  hello world <br>
    xfgj  hello world <br>
    xfgj  hello world 
</div>

六、背景

        background-*是背景系列属性，这一系列的属性不具有继承性，代码如下：

.box-3 {
    width: 400px;
    height: 400px;

    /* 背景颜色 */
    background-color: skyblue;
    /* 背景图片 */
    background-image: url(./images/sanguo.jpeg);

    /* 背景图片是否平铺 no-repeat 不平铺*/
    background-repeat: no-repeat;

    /* 背景图片的位置 
    background-position: x  y ;
     x为负数，背景图片水平向左移动，为正数，水平向右移动
     y为负数，背景图片垂直向上移动，为正数，垂直向下移动

     top  right left bottom center
    */
    /* background-position: 100px 50px; */
    background-position: center center;

    /* 背景图片的尺寸 
    (cover 把图片自动填充满整合标签)*/
    /* background-size: 100% 100%; */
    /* contain 这个属性由原图片的尺寸（宽度 * 高度）来决定。
     如果宽度大于高度，就是以横向填充标签(水平方向)
     如果高度大于宽度，就是以纵向填充标签（垂直方向）
    */
    background-size: contain;
}

七、行高

        line-height属性是行高，是文本行与行之间的间距，具体来说，是指每行文本基线与基线之间的间距，如下图：

        

        给line-height属性可以设置px（像素）或者倍数，代码如下：

<style>
    .text {
        background-color: red;
        font-size: 40px;
        /* 属性值： 倍数 / px */
        line-height: 1.75;
    }
</style>

<div class="text">
    xfgj  hello world
</div>

         遇到一行文本(单行文本)垂直居中，可以设置行高等于标签的高度，代码如下： 

<style>
 .box {
    font-size: 40px;
    background-color: green;
    height: 200px;
    /* 遇到一行文本(单行文本)垂直居中，可以设置行高等于标签的高度 */
    line-height: 200px;
 }
</style>
<div class="box">
  xfgj  hello world
</div>

八、圆角

        border-radius属性是圆角，对应的是边框四个角的属性，通过设置圆角可以让边框的四个角变圆，设置100%可以将盒子变成圆形。

        可以给圆角设置像素或者百分比，可以直接给border-radius设置，或者给四个边设置。代码如下：

属性名称	含义
border-top-left-radius	左上方圆角
border-top-right-radius	右上方圆角
border-bottom-left-radius	左下方圆角
border-bottom-right-radius	右下方圆角

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: blue;
        /* 圆角属性 */
        border-radius: 100px;
    }
 </style>
<div class="box"></div>

<style>
    .demo {
        width: 200px;
        height: 300px;
        background-color: green;
        /* 分别设置不同的圆角 */
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
</style>
<div class="demo"></div>

        将盒子设置为圆形：

<body>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 100%;
        }
    </style>
    <div class="box"></div>
</body>

        效果如下：

九、透明度

        opacity可以设置元素透明，范围是[0.0--1.0]，这个值越小，透明度越高，如果值为0，则元素透明，看不见元素，但此时元素仍然占位置。写法如下：

<style>
    .box-2 {
        width: 300px;
        height: 100px;
        font-size: 40px;
        background-color: rgb(0,0,255);
        /* 设置标签透明，标签和文本都变透明了 */
        /* 完全透明，但标签不是消失，还是占位置的。 */
        opacity: 0;

        opacity: .5;
    }
</style>
<div class="box-2">
    hello abc
</div>

九、颜色值

        设置文本的颜色使用color属性，背景颜色使用background-color属性，CSS中的颜色值有四种写法，如下：

<style>
    .box {
        width: 100px;
        height: 100px;
        /* 1） 英文词汇 white black  red green blue pink purple lightgreen .... */
        /* 2)  十六进制 #ffffff  #000000  (0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f) */
        /* 3)  rgb(0,255,255) 或者 rgba(255,255,255,.5)  */
        /* 4)  hsl(色调,饱和度，亮度) */
        background-color: #d70a0a;
    }
</style>
<div class="box"></div>