理解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>
    <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只有布局功能,没有语义)

  1. 内容长宽:width,height
  2. 内边距:padding
  3. 边框:border
  4. 外边距: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>

 

评论 1 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

summer_sun_tree

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值