CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布

草莓泡芙@

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量225

点赞数 2

分类专栏： python

本文链接：https://blog.csdn.net/gu305524073/article/details/104399117

版权

python 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

CSS查询手册

一、CSS简介

css注释：必须在style标签中，或者css文件中，style标签中的是css语法结构。
css语法：选择器声明块

选择器：通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。
声明块：紧跟在选择器后边，使用一对{}括起来，声明块中实际就是一组一组的明值对结构，每一个名值对就是一个声明。

二、块标签&内联标签&文档流

块标签：用来进行页面布局使用，块标签是独占一行的元素，无论内容多少都会独占一行。

div是块标签，不会设置默认样式，用来进行页面布局使用
p h1 h2 … ul、li、ol为块元素都是块标签

内联标签：用来选中文字设置样式，只占自身大小的元素，不会占用一行。

a img iframe span，都是内联标签。span标签专门用来选中文字设置样式。
一般情况下只使用块标签包含内联标签，反过来不可以
a元素可以包含除它本身之外的任意元素
p元素不可以包含其他的块元素

文档流：处在网页的最底层，表示一个页面中的位置，创建的元素默认都处在文档流中。

块元素、内联元素脱离文档流后，都称为块元素。
元素在文档流中的特点：
块元素：
1、块元素在文档流中会独占一行，自上向下排列
2、块元素在文档流中默认宽度是父元素的100%
3、块元素在文档流中的高度默认被元素撑开
4、脱离文档流后，高度和宽度都被内容撑开
内联元素：
1、内联元素在文档流中只占自身大小，默认从左向右排列，若一行中不足以容纳所有的内联元素，则换到下一行，继续从左向右。
2、在文档流中，内联元素的宽度和高度默认都被内容撑开
3、内联元素脱离文档流（使用float）后变成块元素，可设置高度、宽度。

三、常用标签

查看HTML标签手册

1、<img>图片标签： src相对路径 alt在路径中找不到时显示
相对路径：相对于当前资源所在得目录 …/返回到上一级

<img src="../11.png" alt="路径中无图片" width="300" height="120" />

2、标题标签：h1、h2、h3、h4、h5、h6六级
中间font是强调字

<h1>这是我得<font color="#dc143c">第一个</font>网页</h1>

3、<span>标签，被用来组合文档中的行内元素。

<p class="tip"><span>提示：</span>... ... ...</p>

4、<p> 标签定义段落。

<p>这是段落</p>

5、<div> 标签可定义文档中的分区或节（division/section）。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

6、<ul> 标签定义无序列表。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

7、<tr> 标签定义 HTML 表格中的行，画表格。

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

8、<a> 标签定义超链接，href 属性指示链接的目标。

<a href="http://www.baidu.com">点我去百度</a>

四、文本标签

1、em表示语气上的强调，默认使用斜体显示
strong表示内容上的强调，默认使用粗体显示
2、i标签中内容以斜体显示
b标签中内容以加粗显示
h5规范中规定，用于不需要着重的内容而是单纯加粗/斜体
3、small标签中的内容比父元素中的要小一些
在h5中用来表示一些细则类的内容，如：合同中的小字，网站的版权声明
4、cite标签表示参考的内容
网页中所加书名号的内容，书名、歌名、电影名…
5、q标签表示一个短的引用（行内引用），浏览器会默认加上引号
blockquote标签表示一个长引用（块级引用）
6、sup标签设置上标
sub标签设置下标
7、del标签表示删除的内容，自动加删除线
8、ins标签表示插入的内容，自动加下划线
9、pre预格式标签，保留代码格式
code专门表示代码
结合使用pre、code

五、列表

HTML网页中可创建三种列表：
无序列表、有序列表、定义列表可以相互嵌套

1、无序列表

使用ul标签创建
使用li在ul中创建列表项
type属性设置无序列表中项目符号，一般不使用，采用为li设置背景图片
（1）disc 实心圆
（2）square实心黑框
（3）circle空心圆
取消项目符号需设置css样式list-style: none;

    <style type="text/css">
        ul{
            list-style: none;
        }
    </style>
    <ul type="square">
        <li>第一天</li>
        <li>第二天</li>
        <li>第三天</li>
    </ul>

2、有序列表

使用ol标签创建，其他和无序列表类似
type属性，指定序号类型
（1）默认值，阿拉伯数字
（2）a/A，小写/大写字母
（3）i/I，罗马数字

    <ol>
        <li>一月</li>
        <li>二月</li>
        <li>三月</li>
    </ol>

3、定义列表

使用dl标签创建
子标签：（1）dt被定义的内容
（2）dd对内容的描述

    <dl>
        <dt>向日葵<dt/>
        <dd>是一种花</dd>
    </dl>

六、继承

后代元素自动可以继承祖先元素样式，
但是不是所有的样式都会被继承，例如：背景相关的样式、边框相关的样式、定位相关的样式不会被继承
此处的background-color会继承是因为默认transparent透明度

    <div style="background-color: springgreen">
        我是一个div标签
        <span>我是一个div中的span标签</span>
    </div>
    <p>我是一个p标签</p>

在这里插入图片描述

七、浮动

1、块元素在文档流中默认垂直排列，所有三个div自上而下排列
2、块元素在页面中水平排列：使块元素脱离文档流
   使用float来使元素浮动，从而脱离文档流,向页面的左上或右上漂浮，下边的元素会立即向上移动，直到遇到父元素的边框或者其他浮动的元素
   若浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
   浮动的元素不会超过她上边的兄弟元素，最多会一样齐
        none，默认值，元素默认垂直排列
        left，元素会立即脱离文档流，向页面左侧浮动
        right，元素会立即脱离文档流，向页面右侧浮动
    浮动元素不会盖住文字，文字会自动环绕在浮动元素周围
    可通过设置文字环绕图片的效果

1、使用float来使元素浮动

从而脱离文档流,向页面的左上或右上漂浮，下边的元素会立即向上移动，直到遇到父元素的边框或者其他浮动的元素。
浮动的元素不会超过她上边的兄弟元素，最多会一样齐
若浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

float: left;
float: right;
float: both;

2、清除浮动

clear用来清除其他浮动元素对当前元素的影响
属性值：none:默认值，不清除浮动
left：清除左侧浮动对当前元素的影响
right：清除右侧浮动对当前元素的影响
both：清除两侧浮动元素对当前元素的影响
清除对他影响最大元素的浮动

clear: left;

3、解决浮动布局高度塌陷和外边界传递（兼容IE6）重点理解

外边距传递效果演示

高度塌陷效果演示

最推荐方法：

.clearfix {zoom: 1}
.clearfix:before, .clearfix:after {
    content: '';
    display: table;
    clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷</title>
<!--
    根据W3C的标准，在页面中都包含一个隐含属性，Block Formatting Context
    简称BFC，默认为关闭
    打开后：
        1、父元素的垂直边距不会和子元素重叠
        2、开启BFC的元素不会被浮动元素所覆盖
        3、开启BFC的元素可以包含浮动的子元素
    开启BFC方法：
        1、设置元素浮动，可撑开父元素，但会导致父元素宽度丢失
           导致下边元素上移
        2、设置元素绝对定位，效果同1
        3、设置元素为inline-block，可解决问题，但会导致宽度丢失
        4、将元素的overflow设置为非visible值
        综上推荐使用：overflow:hidden

        但在IE6及以下的浏览器不支持BFC，但含另一个隐形属性hasLayout
        开启方法为zoom:1

        方法一：综上所述兼容所有版本，解决高度塌陷问题，推荐使用
        overflow:hidden;
        zoom: 1;
        方法二：直接在高度塌陷的父元素后加一个空白div
        由于空白div没有浮动可以撑开父元素的高度
        对其用clear清除浮动。基本无副作用
        <div style="clear: both"></div>
        方法三：通过after伪类向元素的最后添加一个空白块元素，对其清除浮动
        原理同方法二，几乎无副作用，最推荐


-->
    <style type="text/css">
        /*方法一*/
        .box1{
            border: yellow solid 10px;
            /*overflow:hidden;*/
            /*zoom: 1;*/
            /*display: inline-block;*/

        }
        .box2{
            background-color: green;
            height: 100px;
            width: 100px;
            float: left;
        }
        .box-l{
            background-color: red;
            height: 100px;
        }
        /*方法三*/
        .clearfix:after{
            /*添加空白元素*/
            content: "";
            /*转为块元素*/
            display: block;
            /*清除浮动*/
            clear: both;
        }
        /*IE6中不支持after伪类，还需使用hasLayout*/
        .clearfix{
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
<!--        <div style="clear: both"></div>-->
    </div>
    <div class="box3"></div>
</body>
</html>

八、盒子模型

1、块元素：盒模型

在这里插入图片描述
（1）height、width表示盒子内容区内容
（2）为元素设置边框：

border-width边框宽度
border-color边框颜色
border-style边框样式
三个必须同时存在才显示

 border-width: 10px;
 border-color:gold;
 border-style: dotted;
 # 简写：无顺序，border指定四个边
 border: yellow solid 10px;

（3）border-left、border-right、border-top、border-bottom分别设置边框的四周，若其中任意边不设置，属性设为none即可。
（4）内边距（padding），盒子内容区和盒子边框之间的距离

padding-top
padding-right
padding-bottom
padding-left
盒子大小由内容区、内边距、边框共同决定
盒子内边距会影响盒子的可见大小，元素背景会延伸到内边距
盒子可见框的宽度=border-left-width+padding-left+width+padding-right+border-right-width （高度同理）

padding同时设置四边框的样式:
padding: 50px;四边都加
padding: 50px 100px;增加上边、右边
padding: 10px 40px 100px;上、左右、下
padding: 10px 40px 80px 100px;上、右、下、左

（5）外边距（margin）,当前盒子与其他盒子之间的距离，不会影响可见大小，只会影响盒子所在位置。

margin-top: 100px;
margin-left: 100px;
margin-bottom: 100px;
margin-right: 100px;
外边距可以设置为负值，向反向移动
margin可以设置为auto，auto一般只设置给水平
margin-left或margin-right设为auto，使外边距为最大值
margin-left、margin-right同时设为auto，使两侧边距为相同的值，可以使子元素自动在父元素中居中
垂直方向外边距设为auto，外边距默认值为0

（6）垂直外边距的重叠，网页中相邻的垂直方向的外边距会发生外边距的重叠。

相邻兄弟元素之间的垂直外边距以最大值决定，而不是相加值。
父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素（子元素的上外边距会传递给父元素）
解决外边距重叠问题：

Resolve-margin-top-deliver:before {content: ''; display: table}

例子代码来自于链接：解决垂直外边距塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直外边距折叠</title>
    <style>
        .test-container {background-color: bisque}
        .Resolve-margin-top-deliver:before {content: ''; display: table}
        .box-50 {width: 50px; height: 50px}
        .box-75 {width: 75px; height: 75px}
        .box-100 {width: 100px; height: 100px}
    </style>
</head>
<body>

<h2>相邻兄弟元素之间的垂直外边距以最大值决定</h2>
<p>每个盒子边长50px，两个盒子上下间距为100px</p>
<hr>
<div class="test-container">
    <div class="box-50" style="background-color: darkcyan; margin-bottom: 100px;"></div>
    <div class="box-50" style="background-color: hotpink; margin-top: 50px;"></div>
</div>


<h2>子元素的上外边距会传递给父元素</h2>
<p>外层盒子上边距50px</p><hr>
<div class="test-container">
    <div class="box-100" style="background-color: darkcyan;">
        <div class="box-50" style="background-color: hotpink; margin-top: 50px;"></div>
    </div>
</div>


<h2>解决外边界传递</h2>
<p>内层盒子距外层盒子上边距50px</p><hr>
<div class="test-container">
    <div class="box-100 Resolve-margin-top-deliver" style="background-color: darkcyan;">
        <div class="box-50" style="background-color: hotpink; margin-top: 50px"></div>
    </div>
</div>

</body>
</html>

（7）清除浏览器默认样式：

*{
     margin: 0;
     padding: 0;
}
或单独清除：
body{
       margin：0
}
p{
     margin：0
}

2、内联元素的盒模型：

    - 内容区、内边距、边框、外边距
    1. 内连元素不能设置width、height
    2. 可以设置水平方向的内边距
		- padding-left: 100px
	    - padding-right: 100px
    3. 可以设置垂直方向的内边距，但不会影响页面布局
        - padding-top: 50px
	    - padding-bottom: 50px
    4. 可以为元素设置边框，但垂直的边框不会影响到页面布局
      - border: 1px blue solid
    5. 支持水平外边距
      - margin-left: 100px
      - margin-right: 100px
    6. 不支持垂直外边距

    - 内联元素无法直接设置width、height，可转换为块元素进行设置

3、display、visibility

    display样式：修改元素类型
    display:inline将元素作为内联元素显示
            block将元素设置为块元素显示
            inline-block将元素转换为行内块元素
                        -元素既有行内元素特点，又有块元素特点，即可设置行高，又不会独占一行
            none不显示元素，且在页面中不会继续占位置
    visibility：设置元素的隐藏和显示状态
    visibility: visible默认值，元素在页面中显示
                hidden元素隐藏不显示，但会在页面中继续占位置

4、溢出，超过父元素的内容，称为溢出的内容

子元素默认存在父元素内容区中，理论上子元素最大等于父元素内容区大小
若子元素超过了父元素的内容区，则超过的大小会在父元素以外显示，父元素默认为溢出
overflow，设置父元素处理溢出内容

- overflow:visible，默认值，不会对溢出内容做处理，在父元素以为显示
                hidden溢出内容会被修剪，不会显示
                scroll为父元素添加滚动条，无论是否溢出，都会添加水平及垂直滚动条
                auto根据需求添加水平和垂直滚动条

盒子模型例子：

<!DOCTYPE html>
<html lang="en">
<head> ·    ·
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        .box1{
            height: 100px;
            width: 100px;
            background-color: red;
            /*border-width: 10px;*/
            /*border-color:gold;*/
            /*border-style: dotted;*/
            border: yellow solid 10px;
            /*去除其中某一边*/
            /*border-right: none；*/
            /*margin-top: 100px;*/
            /*!*margin-left: 100px;*!*/
            /*margin-bottom: 100px;*/
            /*margin-right: 100px;*/
            /*margin-left: -50px;*/
            margin: auto;
            /*float: right;*/
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: red;
            border-left: yellow solid 10px;
            border-right: springgreen solid 10px;
            border-top: hotpink solid 10px;
            border-bottom: blueviolet solid 10px;
        }
        .box-l{
            height: 100px;
            width: 100px;
            background-color: red;
            border-left: yellow solid 10px;
            border-right: springgreen solid 10px;
            border-top: hotpink solid 10px;
            border-bottom: blueviolet solid 10px;
            /*padding-left: 50px;*/
            /*padding-right: 50px;*/
            /*padding-top: 50px;*/
            /*padding-bottom: 50px;*/
            /*四边都加*/
            /*padding: 50px;*/
            /*增加上边、右边*/
            /*padding: 50px 100px;*/
            /*上、左右、下*/
            /*padding: 10px 40px 100px;*/
            /*上、右、下、左*/
            /*padding: 10px 40px 80px 100px;*/
        }
        .box-m{
            height: 100%;
            width: 100%;
            background-color: pink;
        }
        p{
            display:inline-block;
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }
        a{
            /*visibility: hidden;*/
            display: none;、
        }
        .box-r{
            width: 300px;
            height: 200px;
            background-color: pink;
            overflow: auto;
        }
    </style>
</head>
<body>

    <p>p标签</p>
    <a>a标签</a>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="box4"> </div>
    </div>
    <div class="box5">
            1.酒精闪点12.78℃，火灾危险性属于甲类，75%酒精闪点在22℃，火灾危险性液甲类,易燃易爆；包装物外部应有明显标识和警示标志，以防止误服误用。
            2.对电梯等密闭空间使用酒精时，需要保证良好通风，禁止喷洒式消毒方式，应采取擦拭方法进行消毒且在消毒过程中避免洒漏，空气中浓度不得超过3%；经酒精消毒过的电梯间等封闭空间严禁吸烟和使用明火。
            3.使用酒精时不要靠近热源、避开明火, 严禁吸烟，有取暖炉的地方严禁喷洒；餐厅操作间等产生明火处严禁使用酒精消毒。
            办公区域不建议用于电器表面消毒，必须使用时，应先关闭电源待冷却后使
    </div>
</body>
</html>

九、选择器

1、选择器优先级规则：

    （1）使用不同的选择器，选中同一个元素并设置样式时，优先级高的先显示
    （2）当包含多种选择器时，需要将多种选择器的优先级相加然后再比较
    注意：选择器优先级计算不会超过他的最大的数量级
    （3）选择器优先级一样，则使用靠后的样式
    （4）并集选择器优先级是单独计算的
        div,p,#p1,.hello{} div、p、#p1是优先级单独计算的，不是一起累加
     (5)在样式的最后添加!important，此时样式会获得最高优先级，优于所有的样式显示

2、优先级级别：

        内联样式，优先级1000
        id选择器，优先级100
        类和伪类，优先级10
        元素选择器，优先级1
        通配*，优先级0
        继承的样式，没有优先级
    伪类的顺序：
    link、visited、hover、active优先级是一样的，由于会同时发生，为了显示，顺序写为"lvha"

3、选择器类型

/*
        选择器优先级规则：
        （1）使用不同的选择器，选中同一个元素并设置样式时，优先级高的先显示
        （2）当包含多种选择器时，需要将多种选择器的优先级相加然后再比较
        注意：选择器优先级计算不会超过他的最大的数量级
        （3）选择器优先级一样，则使用靠后的样式
        （4）并集选择器优先级是单独计算的
            div,p,#p1,.hello{} div、p、#p1是优先级单独计算的，不是一起累加
         (5)在样式的最后添加!important，此时样式会获得最高优先级，优于所有的样式显示
        优先级级别：
            内联样式，优先级1000
            id选择器，优先级100
            类和伪类，优先级10
            元素选择器，优先级1
            通配*，优先级0
            继承的样式，没有优先级
        伪类的顺序：
        link、visited、hover、active优先级是一样的，由于会同时发生，为了显示，顺序写为"lvha"
        1、元素选择器：选择页面中所有指定元素
        语法：标签名{}
        2、类选择器：通过元素的class属性选择一组元素
        语法：.class属性值{}
        3、选择器分组：同时选中多个选择器对应的元素
        语法：选择器1，选择器2，选择器n{}
        #p1,.p2,.p3{
            内容
        }
        4、通配选择器：选中页面中所有的元素
        语法：*{}
        5、复合选择器（交集选择器）：选中同时满足多个选择器的元素
        语法：选择器1选择器2选择器n{}
        对于id选择器来说，不建议使用复合选择器
        6、后代元素选择器：选中指定元素的后代元素
        语法：祖先元素 后代元素{}
        7、子元素选择器：指定父元素的指定子元素
        语法：父元素>子元素{}
        8、伪类选择器：伪类表示元素的特殊状态 如访问过的连接，获取焦点的文本框
        语法：标签：link{}表示普通状态，没访问过的
              标签：visited{}表示访问过的,只能设置颜色属性
              标签：hover{}表示鼠标 移入状态，
              标签：active{}表示超链接被点击的状态
              hover、active可用于所有标签，但IE6不支持
              标签：focus{}文本框获取焦点以后，修改背景颜色
              标签：:selection{}为p标签选中的内容设置样式，兼容大部分浏览器
              注：兼容火狐浏览器p::-moz-selection{}
         9、伪元素选择器：表示元素中特殊的位置
         语法：标签：first-letter{}设置首字
              标签：first-line{}设置首行
              标签：before{}元素最前边位置
              标签：after{}元素最后边位置
              注：before、after需结合content样式使用，通过content向before、after位置添加内容
        10、属性选择器：根据元素的属性/属性值来选取指定元素
        语法：标签[属性名]{}选取指定属性的元素
             标签[属性名="属性值"]选取含有指定属性值的元素
             标签[属性名^="属性值"]选取属性值以指定内容开头的元素
             标签[属性名$="属性值"]选取属性值以指定内容开头的元素
             标签[属性名*"属性值"]选取包含指定内容的元素
       11、子元素的伪类选择器：
       语法：标签：first-child{}选中第一个子元素
             注意：选中的是所有块中的子元素，body>p:first-child{}选中指定的元素
            标签：last-child{}选中最后一个子元素
            标签：nth-child{}选中任意一个子元素
            标签：nth-child(n){}选中指定位置子元素
            标签：nth-child(even){}选中偶数位置子元素
            标签：nth-child(odd){}选中奇数位置子元素
            标签：first-of-type{}
            标签：last-of-type{}
            标签：nth-of-type{}
            注意：child标签是在所有标签中排列，type是在当前类型子元素中排列
       12、兄弟元素选择器：
            前一个标签+后一个标签{}选中第一个元素后紧挨着的指定的兄弟元素
            前一个标签~后一个标签{}选中后边所有的兄弟标签
       13、否定伪类：从已选中的元素中剔除某些元素
       语法：标签：not(选择器){}
       */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*元素选择器*/
        p{
            color: crimson;
            font-size: 50px;
        }
        /*id选择器*/
        #p1{
            font-size: 20px;
        }
        /*类选择器*/
        .p2{
            color: aqua;
            font-size: 30px;
        }
        .p3{
            background-color: darkseagreen;
        }
        /*子元素选择器*/
        div>span{
            color: darkturquoise;
        }
        /*后代元素选择器*/
        p div span{
            background-color: hotpink;
        }
        /*伪类选择器*/
        a:visited{
            color: hotpink;
        }
        a:link{
            color: red;
        }
        input:focus{
            background-color: springgreen;
        }
        /*伪元素选择器*/
        p:first-letter{
            font-size: 50px;
        }
        /*属性选择器*/
        p[title="hello"]{
            background-color: blue;
        }
        /*否定伪类*/
        p:not(#p1){
            background-color: blueviolet;
        }

    </style>
</head>
<body>
    <p title="hello">元素选择器</p>
    <!--    class属性和id属性类似，只是class可以重复-->
    <p id="p1">元素选择器,用id值进行辨别</p>
    <p class="p2">元素选择器，为元素设置class属性</p>
    <p class="p2">元素选择器，为元素设置class属性</p>
    <div>我是一个div标签<span>我是一个span元素</span></div>
    <p>
        <div>我是一个div标签<span>我是p标签中的div标签中的span标签</span></div>
    </p>
    <span>我是一个span元素</span>
    <a href="http://www.baidu.com">访问过的标签</a>
    <a href="http://www.sina.com">没访问的标签</a><br>
    <input>

</body>
</html>

十、设置行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置行高</title>
    <style>
/*      设置行高：只能在css中进行设置
    两种方法：1、行间距=行高-字体大小
    2、font进行指明
    */
    .div1{
    line-height: 30px;
    font-size: 20px;
    background-color: orangered;
    }
    .div2{
    font: 30px/50px "黑体";
    background-color: springgreen;
    }
    </style>
</head>
<body>
    <div class="div1" >
        1.酒精闪点12.78℃，火灾危险性属于甲类，75%酒精闪点在22℃，火灾危险性液甲类,易燃易爆；包装物外部应有明显标识和警示标志，以防止误服误用。
        2.对电梯等密闭空间使用酒精时，需要保证良好通风，禁止喷洒式消毒方式，应采取擦拭方法进行消毒且在消毒过程中避免洒漏，空气中浓度不得超过3%；经酒精消毒过的电梯间等封闭空间严禁吸烟和使用明火。
        3.使用酒精时不要靠近热源、避开明火, 严禁吸烟，有取暖炉的地方严禁喷洒；餐厅操作间等产生明火处严禁使用酒精消毒。
        办公区域不建议用于电器表面消毒，必须使用时，应先关闭电源待冷却后使
    </div>
    <div class="div2" >
        1.酒精闪点12.78℃，火灾危险性属于甲类，75%酒精闪点在22℃，火灾危险性液甲类,易燃易爆；包装物外部应有明显标识和警示标志，以防止误服误用。
        2.对电梯等密闭空间使用酒精时，需要保证良好通风，禁止喷洒式消毒方式，应采取擦拭方法进行消毒且在消毒过程中避免洒漏，空气中浓度不得超过3%；经酒精消毒过的电梯间等封闭空间严禁吸烟和使用明火。
        3.使用酒精时不要靠近热源、避开明火, 严禁吸烟，有取暖炉的地方严禁喷洒；餐厅操作间等产生明火处严禁使用酒精消毒。
        办公区域不建议用于电器表面消毒，必须使用时，应先关闭电源待冷却后使
    </div>
</body>
</html>

十一、字体单位&颜色&字体

1、px
2、%
3、em
1em 等于当前的字体尺寸

字体


{
    /* 字体类型： Serif | Sans-serif | Monospace | Cursive | Fantasy */
    font-family: Serif;
    /* 可用逗号同时指定多个字体类型 */

    /* 字体风格： normal | italic:斜体 | oblique:倾斜 */
    font-style: normal;

    /* 字体变形： normal | small-caps:小型大写字母 */
    font-variant: normal;

    /* 字体加粗： normal | bold | <number:[100, 900]>:加粗等级 */
    font-weight: normal;

    /* 字体大小： 长度单位 */
    font-size: 100%;

    /* 简写 */
    /* font: style family; */
    /* font: style weight size family; */
}

颜色

{
    /* 颜色名
     *   #RRGGBB
     *   rgb(<num:[0, 255]>, <num:[0, 255]>, <num:[0, 255]>)
     *   rgba(<num:[0, 255]>, <num:[0, 255]>, <num:[0, 255]>, <num:[0, 1]>)
     *
     *   rgb(<num:[0, 100]%>, <num:[0, 100]%>, <num:[0, 100]%>)
     *   rgba(<num:[0, 100]%>, <num:[0, 100]%>, <num:[0, 100]%>, <num:[0, 100]%>)
     *      
     *   hsl(<num:[0, 360]>,  <num:[0, 100]%>,  <num:[0, 100]%>)
     *   hsla(<num:[0, 360]>,  <num:[0, 100]%>,  <num:[0, 100]%>,  <num:[0, 100]%>)
     */
    /* 前景色 */
    color: pink;

    /* 背景色 */
    background-color: gold;
}

十二、快捷键

创建box：
div.box TAB键
div#box TAB键
交换上下行代码
ctrl+上下键

十三、页面布局练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面练习</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        .container{
            margin-right: 10%;
            margin-left: 10%;
            background-color: bisque;

        }
        .box1{
            margin-top: 20px;
            height: 100px;
            background-color: gold;
            padding: 5px;
        }
        .box2{
            height: 40px;
            background-color: cornflowerblue;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        .box-l{
            height: 400px;
            width: 15%;
            background-color: orange;
            float: left;
        }
        .box-m{
            height: 400px;
            width: 60%;
            margin-left: 5%;
            background-color: palevioletred;
            float: left;
        }
        .box-r{
            height: 400px;
            width: 15%;
            margin-left: 5%;
            background-color: red;
            float: left;
        }
        .box-bottom{
            height: 40px;
            background-color: cornflowerblue;
            margin-top: 8px;
            margin-bottom: 8px;
        }
        /*# 解决垂直外边距折叠*/
        .Resolve-margin-top-deliver:before {
            content: '';
            display: table
        }
        /*# 解决高度塌陷*/
        .Resolve-height-collapse:after {
            content: ''; display: block; clear: both
        }
    </style>
</head>
<body>
    <div class="container Resolve-margin-top-deliver Resolve-height-collapse">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box-l"></div>
        <div class="box-m"></div>
        <div class="box-r">
            <div style="height: 50%; background-color: crimson">.</div>
            <div style="height: 50%; background-color: orangered">.</div>
        </div>
        <div class="Resolve-margin-top-deliver" style="clear: both">
            <div class="box-bottom"></div>
        </div>


    </div>
</body>
</html>

在这里插入图片描述

十四、导航条练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航条练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            background-color: pink;
            /*IE6中设置宽度后默认开启hasLayout*/
            width: 1000px;
            /*去除列表样式*/
            list-style: none;
            /*设置居中、及上边距*/
            margin: 50px auto;
            /*解决高度塌陷*/
            overflow: hidden;
        }
        li{
            /*设置列表浮动*/
            float: left;
            /*设置列表宽度，父元素为ul样式的25%*/
            width: 25%;
        }
        a{
            /*转为块元素*/
            display: block;
            /*设置每个标签宽度，父元素为li的100%*，使整个标签都可跳转/
            width: 100%;
            /*字体居中*/
            text-align: center;
            /*设置上下内边距*/
            padding: 5px 0;
            /*去除下划线*/
            text-decoration: none;
            color: white;
            /*字体加粗*/
            font-weight: bold;
        }
        /*设置鼠标移入的效果*/
        a:hover{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="http://www.baidu.com">首页</a></li>
        <li><a href="http://www.baidu.com">新闻</a></li>
        <li><a href="http://www.baidu.com">联系</a></li>
        <li><a href="http://www.baidu.com">关于</a></li>
    </ul>
</body>
</html>

在这里插入图片描述

草莓泡芙@

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

CSS查询手册文章目录一、CSS简介二、块标签&内联标签&文档流三、常用标签四、文本标签五、列表1、无序列表2、有序列表3、定义列表六、继承七、浮动1、使用float来使元素浮动2、清除浮动3、解决浮动布局高度塌陷和外边界传递（兼容IE6）八、盒子模型1、块元素：盒模型2、内联元素的盒模型：3、display、visibility4、溢出，超过父元素的内容，称为溢出的内容九、选择...
复制链接

扫一扫