理解css，div

最新推荐文章于 2022-07-01 09:12:47 发布

summer_sun_tree

最新推荐文章于 2022-07-01 09:12:47 发布

阅读量262

点赞数 3

文章标签： html css3 css

本文链接：https://blog.csdn.net/weixin_45637488/article/details/112715193

版权

css就是对html中的盒子进行样式上的规定，盒子大小颜色间距等等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
         *{
             text-align: center;
         }
         h1{
             color: red;
         }
         p{
             color: blue;}
      /*  标准格式：
      标签选择器{属性：值;}
        css只用来修改样式*/
      /*css必须写在style里面，别忘了结尾的分号;*/
    </style>
</head>
<body>
    <h1>成功法则</h1>
    <p>迟到毁一生</p>
    <p>早退穷三代</p>
    <p>按时上下班</p>
    <!-- 不要在html里面添加样式！只用来添加语义 -->
</body>
</html>

对div盒子样式的规定分为：（div只有布局功能，没有语义）

内容长宽：width，height
内边距：padding
边框：border
外边距：margin

设定盒子的时候，一般先设定好了wieth，height，再添加其他加以修改，达到我们想要的样子。

先说边框样式：

边框有三要素：wieth，style（solid实线，dotted点状，double双线，dashed虚线），color。

三要素中只有color可以省略，不然出来的就是啥边框也没有。

可以根据自己的需求，设置单边（四个边）单元素（三要素）的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 定义多边多元素 */
        .box1{
            width: 100px;
            height: 100px;
            border: 100px solid black;
            background-color: red;
        }
        /* 定义单边的三要素，上右下左顺时针的顺序 */
        .box2{
            width: 100px;
            height: 100px;
            border-top: 5px solid blue;
            border-right: 10px dashed green;
            border-bottom: 15px dotted yellow;
            border-left: 20px double pink;   
        }
        /* 定义单边的单要素*/
        .box3{
            width: 100px;
            height: 100px;

            border-top-width: 5px;
            border-top-style: solid;
            border-top-color: blue;

            border-right-width: 5px;
            border-right-style: solid;
            border-right-color: blue;}
        /* 定义全边的单要素 */
        .box4{
            width: 100px;
            height: 100px;
            border-width: 5px 10px 15px 20px;
            border-style:solid dashed dotted double;
            border-color: blue purple green pink;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>

</body>
</html>

summer_sun_tree

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
理解css，div

css就是对html中的盒子进行样式上的规定，盒子大小颜色间距等等<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt.
复制链接

扫一扫