HTML基础之CSS

使用CSS的三种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--    写CSS第二种方式：在head中定义style标签，在style标签内部通过选择器来为目标标签配置css样式-->
    <style>
        /*1、id选择器,使用#id{}样式*/
        #i1{
            background-color: blue;
            height: 100px;
             100px;
        }
    </style>


    <!--    写CSS第三种方式：引入css文件，文件内容为：选择器{样式表},通过link标签在head中引入CSS文件,href传入文件名-->
<!-- demo.css文件内容：-->
<!--    #i2{-->
<!--    background-color: green;-->
<!--    height: 100px;-->
<!--     100px;-->
<!--}-->
    <link rel="stylesheet" href="demo.css">

</head>
<body>

<!--    写CSS第一种方式：在标签style属性中写，多个样式使用分号分隔-->
    <div style="background-color: red;height:100px;100px;">背景色</div>

    <div id="i1">背景色1</div>
    <div id="i2">背景色2</div>

</body>

当一个标签上需要多个css样式来修饰时，只能使用class属性，不能使用id属性

.c1{
             100px;
            height: 100px;
    }

.c2{
            background-color: red;
        }

<div class="c1 c2">1</div>

CSS优先级：使用同一个id 对应不同的背景色，然后采用上面三种方式来测试CSS优先级

　　结论：标签中的style优先级最高，然后从下往上，距离目标标签越近优先级越高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*1、id选择器,使用#id{}样式*/
        #i1{
            background-color: blue;
            height: 100px;
             100px;
        }
    </style>

<!-- demo.css文件内容：-->
<!--    #i1{-->
<!--    background-color: green;-->
<!--    height: 100px;-->
<!--     100px;-->
<!--}-->
    <link rel="stylesheet" href="demo.css">

</head>
<body>
<!--style属性中多个样式使用分号分割-->
    <div id="i1" style="background-color: black;height:100px;100px;">背景色</div>
<!--    <div id="i1">背景色1</div>-->
<!--    <div id="i2">背景色2</div>-->
</body>
</html>

　
id与class区别：

　　由于id只能在一个标签中使用，多个标签不能使用同一个id，但是能共用同一个class

选择器：

　　id选择器（#）

　　class选择器（.）

　　标签选择器

　　层级选择器（空格）

　　组合选择器（逗号）

　　属性选择器（中括号）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    选择器-->
    <style>
        /*id选择器*/
        #i1{
            background-color: green;
             100px;
            height: 100px;
        }

        /*#class选择器*/
        .c1{
            background-color: blue;
             100px;
            height: 100px;
        }

        /*标签选择器*/
        span{
            background-color: green;
        }

        /* 层级选择器 组合选择器  span标签下面所有div标签颜色改变 层级通过空格*/
        span div {
            color: aqua;
            background-color: red;
        }

        /* class 层级选择器 层级通过空格*/
        .d1 div {
            background-color: #336699;
            height: 48px;
        }

        /* id 层级选择器 层级通过空格*/
        #i2 div {
            background-color: black;
            height: 48px;
        }

        /* 组合选择器 id z1 z2 z3 共用一套css样式 组合 通过逗号*/
        #z1, #z2, #z3 {
            background-color: chocolate;
            height: 48px;
        }

        /* 组合选择器 class s1 s2 s3 共用一套css样式 组合 通过逗号*/
        .s1, .s2, .s3 {
            background-color: darkmagenta;
            height: 48px;
        }

        /* 属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用(自定义属性s)*/
        div[s='dsx'] {
            background-color: darkred;
            height: 48px;
        }

        
        
        /*写一个不同颜色 相同宽高的正方形*/
        .wh{
             100px;
            height: 100px;
        }
        .bc-1{
            background-color: red;
        }
        .bc-2{
            background-color: blue;
        }


    </style>
</head>
<body>
<!--    id选择器-->
    <div id="i1"></div>

<!--class选择器-->
    <div class="c1"></div>

<!--    标签选择器-->
    <!--    所有的span都是绿色-->
    <span>我是标签选择器</span>

<!-- 层级选择器 组合标签选择器 -->
    <span>
        <div>组合标签选择器</div>
    </span>

<!--层级选择器 class选择器下的div标签 -->
    <div class="d1">
        <div></div>
    </div>

<!--层级选择器 id选择器下的div标签-->
    <div id="i2">
        <div></div>
    </div>

<!-- id组合选择器 -->
    <div id="z1"></div>
    <div id="z2"></div>
    <div id="z3"></div>

<!-- class组合选择器 -->
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>

<!-- 属性选择器 -->
    <div s="dsx">我是属性选择器</div>
    <div name="nn">我不是属性选择器</div>



<!--写一个不同颜色 相同宽高的正方形-->
    <!--    class中可以运用多个css样式，使用空格分割-->
    <div class="wh bc-1"></div>
    <div class="wh bc-2"></div>

</body>

CSS属性

　　backgroundclor、height、width、font-size、font-weight、text-align、line-height、float、display、margin、padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <!-- height：高 width：宽 -->
    <div style="background-color:darkblue;height: 48px; 48px;border: 1px solid red"></div>

    <!--    宽度支持百分比-->
    <div style="background-color: blue;height: 100px; 40%"></div>

    <!-- 边框 border：宽度 (solid)实线还是(dotted)虚线 颜色-->
    <div style="height: 48px;border: 1px solid red"></div>

    <!-- 边框 border 上下左右边框 都可单独配置 -->
    <div style="height: 48px;border-left: 1px dotted red"></div>

    <!-- 字体大小 font-size: 14px font-weight: 字体加粗 bold-->
    <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;font-weight: bold">字体</div>

    <!-- 平行方向左右居中 text-align: center -->
    <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center">大师兄</div>

    <!-- 垂直方向居中 line-height：垂直方向要根据标签高度-->
    <div style="height: 48px; 80%;border: 1px solid red;font-size: 14px;text-align: center;line-height: 48px">大师兄</div>

    <!-- float 浮动 块级标签浮动后 相当于分层 都向左浮动 块级标签会便在一行 如果超过宽度超过100则会换行-->
    <div style="background-color: aqua; 20%;float: left">1</div>
    <div style="background-color: red; 20%;float:left;">2</div>
    <div style="background-color: black; 20%;float:right;">3</div>

    <!-- 块及标签的占满100%是相对来说，相对与他外层的div -->
    <div style=" 400px;height: 400px;border: 1px solid black;">
        <div style=" 100px;height: 40px;background-color: red;float:left;"></div>
        <div style=" 100px;height: 40px;background-color: blue;float:left;"></div>
        <div style=" 100px;height: 40px;background-color: red;float:left;"></div>
        <div style=" 100px;height: 40px;background-color: blue;float:left;"></div>
        <div style=" 100px;height: 40px;background-color: red;float:left;"></div>
    </div>

    <!-- display 属性 展示属性 块级标签和行内标签之间切换的属性 display:inline 块级标签转换为行内标签-->
    <div style="height: 100px;background-color: black;display: inline">外联标签</div>

    <!-- display：block 内联标签转换为块及标签-->
    <span style="height: 100px;background-color: red;display: block;">内联标签</span>

    <!-- 行内标签必须要有内容，否则无法设置高度、宽度、padding、margin-->
    <span style="background-color: blue; 100px;height: 100px;">大师兄</span>

    <!-- 通过display:inline-block 可以完美的解决上个问题;他既有行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性-->
    <span style="background-color: aqua; 100px;height: 100px;display: inline-block "></span>

    <!-- 隐藏标签;display：none-->
    <span style="background-color: #336699;display: none">我是隐藏的</span>

    <!-- 外边距 margin 内边距 padding-->
    <!-- margin 外边距 自己针对外围的div产生变化 外边距撑大外层 -->
    <div style="border: 1px solid red;height: 100px">
        <div style="background-color: blue;height: 70px;margin-top: 40px"></div>
    </div>
    
    <!-- padding 内边距 自身的边距增加 从上到下增加 内边距扩大自身 -->
    <div style="border: 1px solid red;height: 100px">
        <div style="background-color: green;height: 70px;padding: 30px">内边距增加</div>
    </div>


</body>
</html>

CSS基础样式（补充上面CSS属性的）

float浮动

　　<!--    通过在div中增加style属性优先级最高，实现向左浮动-->
　　<style>.c1{100px;height:100px;float:right;}</style>
　　<div class="c1" style="float: left">2</div>

由于浮动的原因，浮动的div可能跑出了外层div,需要使用clear属性清除浮动 left:清除左边浮动 right:清除右边浮动 both:清除两边浮动

<div style="clear: both;"></div>

display：none

    <div style="display: none"></div>

绝对定位：position

position 分层

position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html

position relative absolute

position：relative 与 position：absolute(绝对定位，单用没什么作用结合relative才牛逼) absolute的定位针对于于relative的定位单独relative没有任何意义见body.html

<!--    将div固定在最上方，无论如何滚动页面，都不会随着滚动上下移动-->
<div style="position: fixed;top: 0px;left: 0;right: 0;height: 100px; 100%;background-color: burlywood;"></div>

相对定位：

position：relative 与 position：absolute(绝对定位，单用没什么作用结合relative才牛逼) absolute的定位针对于于relative的定位单独relative没有任何意义

在父层div中使用position：relative，在自己这层使用position：absolute，自己这层就可以通过 top bottom left right 来操作自己这层的div了

例子是在一个div内部四个角放上4个红色小div

        .content-inner{
             100%;
            height: 200px;
            border: 1px black solid;
            /*相对定位：外层div需要使用position: relative*/
            position: relative;
        }
        .test{
             40px;
            height: 40px;
            background-color: red;
            /*相对定位：内层div需要使用position: absolute*/
            position: absolute;
        }

            <div class="content-inner">
                <div class="test" style="top: 0;right: 0"></div>
                <div class="test" style="top: 0;left: 0"></div>
                <div class="test" style="bottom: 0;right: 0"></div>
                <div class="test" style="bottom: 0;left: 0"></div>
            </div>

margin 外边距

外边距自己针对外围的div产生变化外边距撑大外层 top left right bottom

　　当自己在兄弟div在下方的时候，margin调节距离是相对于上方的兄弟div，常用来控制兄弟div的间距

<h4>外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom</h4>
<div style="border: 1px red solid; 100%;height: 100px">
     <div style="background-color: blue; 100%;height: 30px;margin-top: 10px"></div>
</div>
<h4>外边距 当自己在兄弟div在下方的时候，margin调节距离是相对于上方的兄弟div，常用来控制兄弟div的间距</h4>
<div style="border: 1px red solid; 100%;height: 100px">
     <div style="background-color: black; 100%;height: 10px;margin-top: 0"></div>
     <div style="background-color: blue; 100%;height: 30px;margin-top: 20px"></div>
</div>


z-index层级：经常在滚动页面时，需要保持第一行标题栏div保持不动，也就是第一行div要压住其他div，就是要设置层级，层级数越大，表示层级越高，展示越靠前

.pg-header{ /*层级关系：数字越大，层级越高*/
            z-index: 999;}

cursor ：鼠标悬浮时展示的样式

<!--截图样式-->
<input type="button" value="登录" style="cursor: crosshair;" >
<!--小手样式-->
<input type="button" value="登录" style="cursor: pointer;" >
<!--移动样式-->
<input type="button" value="登录" style="cursor: move;" >

overflow

overflow属性设置当div内的内容溢出div的高宽时，如何处理？

hidden：溢出部分截取掉；

scroll：超出就出现滚动条；

auto:超出就出现滚动条

<div style=" 100px;height: 100px;border: 1px red solid;overflow: hidden;display: inline-block">
      <img src="http://ui.imdsx.cn/static/image/dsx.jpg" >
 </div>
<div style=" 100px;height: 100px;border: 1px red solid;overflow: auto;display: inline-block">
      <img src="http://ui.imdsx.cn/static/image/dsx.jpg" >
</div>
<div style=" 100px;height: 100px;border: 1px red solid;overflow: scroll;display: inline-block">
       <img src="http://ui.imdsx.cn/static/image/dsx.jpg" >
</div>

hover

hover属性是当鼠标移动到上面后，展示其样式

background

background 是针对背景一些样式设置， background-image：背景图片，图片大小如果小于div的大小。则无限堆叠水平垂直都堆叠。可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。 background-position 针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值第二个位y的值，background-position:10px 10px。可以通过background直接简写，background 简写参数分别为颜色背景图 postion横向纵向是否堆叠

<h4>无限堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px">
</div>
<h4>不堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px;background-repeat: no-repeat">
</div>
<h4>横向堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px;background-repeat: repeat-x">
</div>
<h4>纵向堆叠</h4>
<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx.jpg');height: 160px; 100%;height: 500px;background-repeat: repeat-y">
</div>