CSS样式详解(二)

这篇让我们继续上篇CSS之旅吧~~~上货~

一.CSS样式

1.边框属性

border:边框

width:宽度

height:高度

background-color:背景颜色

  • 举例使用:
<style>
        #dd{
            /*
            border:边框粗细 边框线类型 边框线颜色
            */
            border:1px solid blue;
            /*
            宽度、高度 : px  百分比
            */
            width:300px;
            height: 300px;
            /*
            颜色:颜色单词
                  颜色编码
            */
            background-color: bisque;
        }
        #dl{
            width:300px;
            height: 300px;
            background-image: url("../img/xxx.png");
        }
    </style>
</head>
<body>
    <div id="dd">今天周日了,明天你是否要继续跟煌sir一起学习呢</div>

    <div id="dl">今天周日了,明天你是否要继续跟煌sir一起学习呢</div>
</body>

 

 

 

2.布局

  •  

         格式:

     选择器{float:属性值;}

常用属性值:

         none:元素不浮动(默认值)

         left:元素向左浮动

         right:元素向右浮动

 

  • 格式:选择器{

clear:属性值;

}

常用属性值:

     left:不允许该元素左侧有浮动元素(清除左侧浮动的影响)

     right:不允许该元素右侧有浮动元素(清除右侧浮动的影响)

     both:同时清除左右两侧浮动的影响(一般用both)

 

  • 举例使用:
<style>
        #d1{
            background-color: red;
            width: 100px;
            height: 100px;
            float: left;
        }
        #d2{
            background-color: green;
            width: 110px;
            height: 110px;
            float: left;
            /*clear:both;*/
        }
        #d3{
            background-color: blue;
            width: 120px;
            height: 120px;
            float: left;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</body>

 

 

3.转换

块元素:会自动换行   

行内元素:不会自动换行

 

  • 常用的属性值:

   block:此元素将显为块元素(块元素默认的display属性值)

   inline:此元素将显示为行内元素(行内元素默认的display属性值)

   none:此元素将被隐藏,不显示,也不占用页面空间。

 

 

 

4.字体

<style>
        span{
            font-size:120px;
            color:red;
        }
    </style>
</head>
<body>
    <span>xxxxx</span>
</body>

 

 

 

二.CSS盒子模型

1.简述

 

 

2.边框(border)

 

  • 举例使用:
  • <style>
            div{
                width: 300px;
                height: 300px;
                border-top:3px double blue;
                border-right:3px double red;
                border-bottom:3px double yellow;
                border-left:3px double green;
                /*
                一次性设置四个边框
                border:3px double green;
                */
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    

     

 

3.内边距(padding)

内边距:HTML元素里的内容体  到  HTML元素边框 的距离

 

  • 举例使用:
<style>
        div{
            width: 300px;
            height: 300px;
            border:3px solid red;
            padding-top: 50px;
            padding-left: 50px;
        }
    </style>
</head>
<body>
    <div>这是我的测试内容</div>
</body>

 

 

4.外边距(margin)

 

<style>
        div{
            width: 300px;
            height: 300px;
            border:3px solid red;
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

 

 

 

三.引入CSS样式

1.内部样式(写在某个HTML页面上)

修改某一个标签的样式:

<html标签 style=”css样式代码” />

 

修改某个页面上的标签样式:

格式:

<style>

css样式代码

</style>

 

 

2.外部样式

1、创建css文件  (.css)

 

2、为HTML引入css文件

格式:

<link rel="stylesheet" type="text/css" href="css文件路径"/>

  • rel="stylesheet" ,固定值,表示样式表
  • type="text/css",固定值,表示css类型
  • href ,表示css文件位置

举例:


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="demo.css"/>
</head>

 

 

 

 

 

 

 

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多! 

~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值