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

CSS边框及常用样式

时间:2018-02-08 13:41:36      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:设置   图片   ack   技术   大小   今天   方法   title   top   

一、CSS设置样式

  1.1 边框border

  作用:设置标签周围的边框,方法  board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的

技术分享图片
<head>
    <meta charset="UTF-8">
    <title>css边框</title>
    <style>
        .c1{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div class="c1">
    今天天气真好
</div>
</body>
border

  此外还有 border-top,border-left,border-right,border-bottom,分别是边框顶部,边框左边,边框右边,边框底部

  1.2 高度height

  作用:设置标签的高度的,使用方法:height: 高度大小 ,可以是具体的数字大小比如说:20px,也可以是百分比:80%,但是高度没有固定的值,这个设定要在一个边框内,否则没有意义。  

技术分享图片
<head>
    <meta charset="UTF-8">
    <title>css边框</title>
    <style>
        .c1{
            border: 1px solid red;
            height: 80px;
        }
    </style>
</head>
<body>
<div class="c1">
    今天天气真好
</div>
</body>
height

 

  1.3 宽度width

  作用:设置标签的宽度,使用方法:width:宽度大小,这个跟上面的height是一样的,可以是具体大小:50px,也可以根据浏览器大小设置为百分比:80%  

技术分享图片
    <style>
        .c1{
            border: 1px solid red;
            height: 80px;
            width: 70%;
        }
    </style>
width

  1.4 字体大小 font-size

  作用:设置标签内的字体大小,使用方法:font-size:字体大小,示例:font-size:20px 

技术分享图片
<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
    }
</style>
font-size

  1.5 字体颜色 color

  作用:设置标签内的字体颜色, 使用方法: color:颜色,示例:color:red

技术分享图片
<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
    }
</style>
color

  1.6 字体加粗 font-weight

  作用:给你标签内的字体加粗。使用方式:font-weight:bold

技术分享图片
<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
    }
</style>
font-weight

  1.7 水平居中

  作用:能把标签内的字体,进行水平居中。使用方法:text-align:center 

技术分享图片
<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
        text-align: center;
    }
</style>
text-align

  1.8 垂直居中

  作用:能把标签内的字体,进行水平居中。使用方法:line-height:标签高度值。  

技术分享图片
<style>
    .c1{
        border: 1px solid red;
        height: 80px;
        width: 70%;
        font-size:20px;
        color: blue;
        font-weight: bold;
        text-align: center;
        line-height:80px;
    }
</style>
line-height

 

CSS边框及常用样式

标签:设置   图片   ack   技术   大小   今天   方法   title   top   

原文地址:https://www.cnblogs.com/bigberg/p/8430831.html

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