CSS样式详解(二)

梦里梦外; 2023-02-21 06:10 13阅读 0赞

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

# 一.CSS样式 #

## **1.边框属性** ##

border:边框

width:宽度

height:高度

background-color:背景颜色

*  举例使用:

## 2.**布局** ##

>          格式：
> 
>      选择器\{float:属性值;\}
> 
> 常用属性值：
> 
>          none：元素不浮动（默认值）
> 
>          left：元素向左浮动
> 
>          right：元素向右浮动

>  *  格式：选择器\{
> 
> clear:属性值;
> 
> \}
> 
> 常用属性值：
> 
>      left：不允许该元素左侧有浮动元素（清除左侧浮动的影响）
> 
>      right：不允许该元素右侧有浮动元素（清除右侧浮动的影响）
> 
>      both：同时清除左右两侧浮动的影响（一般用both）

*  举例使用:

## 3.**转换** ##

块元素：会自动换行

行内元素：不会自动换行

*  常用的属性值：

block：此元素将显为块元素（块元素默认的display属性值）

inline：此元素将显示为行内元素（行内元素默认的display属性值）

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

## 4.**字体** ##

# 二.CSS盒子模型 #

## **1.简述** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70][]

## 2.**边框（border）** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 1][]

*  举例使用:
 *      <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元素边框 的距离

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 2][]

*  举例使用:

## 4.**外边距（margin）** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 3][]

# 三.**引入CSS样式** #

## 1.**内部样式（写在某个HTML页面上）** ##

修改某一个标签的样式：

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

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

格式：

**<style>**

**css样式代码**

**</style>**

## 2.**外部样式** ##

### 1、创建css文件  （.css） ###

![20200628221418837.png][]

### 2、为HTML引入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>

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200628220757613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200628220831522.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200628221049462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200628221158253.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[20200628221418837.png]: https://img-blog.csdnimg.cn/20200628221418837.png