前端基础02——CSS详解

CSS

Cascading Style Sheet:层叠级联样式表

CSS:表现(美化网页)

字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动...

发展史:

CSS1.0

CSS2.0 DIV(块) + CSS,HTML与CSS结构分离的思想,网页变得简单,SEO

CSS2.1 浮动,定位

CSS3.0 圆角,阴影,动画... 浏览器兼容性~

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--规范.<style> 可以编写css的代码,每一个声明最好使用分号结尾
语法:
    选择器{
    声明1;
    声明2;
    声明3;
    }
-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>这是标题</h1>

</body>
</html>
h1{
    color: aqua;
}

建议使用这种规范。

CSS的优势:

  1. 内容和表现分离
  2. 网页结构表现单一,可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 理由SEO,容易被搜索引擎收录

优先级:就近原则。

外部样式两种写法:

  • 链接式

  • 导入式

选择器

作用:选择页面中的某一个或者某一类元素

基本选择器

  1. 标签选择器

    选择到页面上所有的这个标签的元素

  2. 类选择器 class

    类选择器的格式 .class的名称{}

    好处:可以多个标签归类,可以跨标签使用,是同一个class,可以复用

  3. Id选择器

    id选择器格式 #id名称{}

    全局唯一!不遵循就近原则

优先级:id > class >标签

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

    <style>
        #num01{
            color: red;
        }
        .C002{
            color:green;
        }
        h1{
            color: aquamarine;
        }
    </style>

</head>
<body>

<h1 id="num01">标题1</h1>
<h1 class="C002">标题2</h1>
<h1 class="C002">标题3</h1>
<h1 >标题4</h1>
<h1>标题5</h1>

</body>
</html>

层次选择器

  1. 后代选择器:在某个元素的后面(祖爷爷,爷爷,爸爸,你)

       body p{
           background: aqua;
       }
    
  2. 子选择器(一代,儿子)

    body>p{
        background: red;
    }
    
  3. 相邻弟选择器:当前选中元素的向下一个兄弟元素,相邻(向下)

    .active +p{
        background: green;
    }
    
  4. 通用选择器:当前选中元素的向下所有兄弟元素

    .active2 ~p{
        background: antiquewhite;
    }
    

结构伪类选择器

伪类:条件

/*ul的第一个子元素*/
ul li:first-child{
    background: aquamarine;
}

/*ul的最后一个子元素*/
ul li:last-child{
    background: aqua;
}

/*选中p1:定位到父元素,选择当前的第一个元素选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效*/
p:nth-child(2){
    background: red;
}

/*选中父元素下的p元素的第二个,类型*/
p:nth-of-type(2){
    background:yellow;
}

前端基础02——CSS详解

属性选择器!!

class+id选择器

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

    <style>
        .demo a{
            float: left;
            display:block;
            height: 50px;
            width: 50px;
            border-radius: 20px;
            background: cadetblue;
            text-align: center;
            color: aquamarine;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*属性名, 属性名=属性值(正则)
        =   绝对等于
        *=  包含这个元素
        ^=  以这个开头
        $=  以这个结尾
        */
        /*存在id属性的元素   a[]{}   */
        /*a[id]{*/
        /*    background: red;*/
        /*}*/

        /*class中有links的元素*/
        /*a[class*="link"]{*/
        /*    background:deepskyblue;*/
        /*}*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{*/
        /*    background: blanchedalmond;*/
        /*}*/

        /*选中href中以doc结尾的元素*/
        a[href$=doc]{
            background: cornflowerblue;
        }
    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item" >3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="image/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="http:/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>

</body>
</html>

美化网页

span标签:重点要突出的字,使用span套起来

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

    <style>
        #titel1{
            font-size: 50px;
        }
    </style>
    
</head>
<body>

好好<span id="titel1">学习</span>

</body>
</html>

字体样式

<!--font-family: 字体
  font-size: 字体大小
  font-width: 字体粗细
  color:字体颜色-->
    <style>
        body{
            font-family: "Arial Black", 楷体;
            color:cadetblue;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-width: bold;
        }
    </style>
p{
    font:oblique bolder 16px 楷体;
}

文本样式

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

<!--  颜色:RGB 红绿蓝 #000000 ~ #FFFFFF  rgb(0,0,0) ~ rgb(255,255,255)
           RGBA -> A代表透明度(0~1)
           text-align:center  排版,居中
           text-indent: 2em    首行缩进
           行高和块的高度一致,就可以实现单行文字上下居中
           height: 50px;
           line-height: 50px; -->

    <style>
        h1{
            color: rgba(0,0,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            text-indent: 2em;
            height: 50px;
            line-height: 50px;
        }
        /*下划线*/
        .a{
            text-decoration: underline;
        }
        /*中划线*/
        .b{
            text-decoration: line-through;
        }
        /*上划线*/
        .c{
            text-decoration: overline;
        }
        /*a标签(超链接)取消下划线*/
        a{
            text-decoration: none;
        }
        /*文本和图片对齐,需要参照物*/
        img,span{
            vertical-align: middle;
        }
        
    </style>

</head>
<body>

<h1>烽火戏诸侯</h1>

<p class="p1">烽火戏诸侯,指西周末年的历史事件。周幽王为博褒姒(bāo sì)一笑,点燃了烽火台,戏弄了诸侯。褒姒看了果然哈哈大笑。幽王很高兴,因而又多次点燃烽火。导致诸侯们都不相信烽火,也就渐渐不来了。</p>
<p class="p2"> 后来犬戎攻破镐京,杀死幽王。幽王的儿子周平王东迁,开始了东周时期。</p>

<p class="a">1234567</p>
<p class="b">1234567</p>
<p class="c">1234567</p>
<a href="">1234567</a>
    
<p>
    <img src="image/1.gif" alt="">
    <span>qasdsadergtjhtsfewgth</span>
</p>

</body>
</html>

前端基础02——CSS详解
素材:前端基础02——CSS详解

超链接伪类

正常情况下,a,a:hover

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

    <style>
        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: darksalmon;
            font-size: 20px;
        }
        /*鼠标按住的状态*/
        a:active{
            color: cadetblue;
        }
        /*!*未访问的链接*!*/
        /*a:link{*/
        /*    color: aqua;*/
        /*}*/
        /*!*已访问的链接*!*/
        /*a:visited{*/
        /*    color: red;*/
        /*}*/

        #data{
            font-size: 50px;
            text-shadow: cornflowerblue 10px 10px 5px;
        }
        /*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径;*/

    </style>
    
</head>
<body>

<a href="">
    <img src="image/1.gif" alt="">
</a>
<p>
    <a href="abc.doc">但愿人长久</a>
</p>
<p>
    <a href="abc.doc">千里共婵娟</a>
</p>
<p id="data">
    2021/09/21
</p>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    
</head>
<body>

<div id="nav">
    <h2 class="title">房产</h2>
    <ul>
        <li><a href="#" >房屋出租</a>&nbsp;&nbsp;<a href="#">转租</a>&nbsp;&nbsp;<a href="#" >房产服务</a></li>
        <li><a href="#" >二手房出售</a>&nbsp;&nbsp;<a href="#">求购</a>&nbsp;&nbsp;<a href="#" >房产开发</a></li>
        <li><a href="#" >商铺出租</a>&nbsp;&nbsp;<a href="#">转租</a>&nbsp;&nbsp;<a href="#" >室内设施</a></li>
        <li><a href="#" >商铺出售</a>&nbsp;&nbsp;<a href="#">求购</a>&nbsp;&nbsp;<a href="#" >室外设施</a></li>
        <li><a href="#" >写字楼出租</a>&nbsp;&nbsp;<a href="#">求购</a>&nbsp;&nbsp;<a href="#" >社区休闲设施</a></li>
        <li><a href="#" >写字楼出售</a>&nbsp;&nbsp;<a href="#">求购</a></li>
        <li><a href="#" >厂房/仓库</a>&nbsp;&nbsp;<a href="#">土地</a></li>
        <li><a href="#" >新房出售</a>&nbsp;&nbsp;<a href="#">求购</a></li>
        <li><a href="#" >别墅豪宅</a>&nbsp;&nbsp;<a href="#">转租</a></li>
        <li><a href="#" >多媒体</a>&nbsp;&nbsp;<a href="#">会议</a>&nbsp;&nbsp;<a href="#">商业房产</a></li>
        <li><a href="#" >停车位租转</a>&nbsp;&nbsp;<a href="#">求购</a></li>
    </ul>
</div>

</body>
</html>
#nav{
    width: 300px;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    /*颜色,图片,图片位置,平铺方式*/
    background:cornflowerblue url("../image/d.png") 270px 10px no-repeat;

}
/*ul li*/
/*list-style:none 去掉原点
             circle 空心圆
             decimal 数字
             square 正方形*/
ul{
    background: beige;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("../image/r.png");
    background-repeat: no-repeat;
    background-position: 230px 2px;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: darksalmon;
    text-decoration: underline;
}

前端基础02——CSS详解

素材:前端基础02——CSS详解
前端基础02——CSS详解

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1920px;
            height:1080px;
            border:1px solid red;

            /*默认全部平铺 repeat*/
            background-image: url("image/21.gif");
        }
        /*水平平铺*/
        .div1{
            background-repeat: repeat-x;
        }
        /*垂直平铺*/
        .div2{
            background-repeat: repeat-y;
        }
        /*不平铺*/
        .div3{
            background-repeat: no-repeat;
        }

    </style>
    
</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

素材:前端基础02——CSS详解

渐变

Grabient

background-color: #D9AFD9;
background-image: linear-gradient(100deg, #D9AFD9 0%, #97D9E1 100%);

前端基础02——CSS详解

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

<!--    径向渐变,圆形渐变-->
    <style>
        body{
            /*background-color: #D9AFD9;*/
            background-image: linear-gradient(100deg, #11efef 0%, #fdc300 100%);
        }
    </style>

</head>
<body>

渐变背景

</body>
</html>

盒子模型

前端基础02——CSS详解

margin:外边距

padding:内边距

border:边框

盒子的计算方式:margin+border+padding+内容宽度

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        /*body总有一个默认的外边距,需要置0*/
        h2,u1,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border:粗细,样式,颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: violet;
            line-height: 30px;
            color: beige;
        }
        form{
            background: #11efef;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px solid cornflowerblue;
        }
        div:nth-of-type(3) input{
            border: 3px solid #fdc300;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
    
</div>

</body>
</html>

前端基础02——CSS详解

内外边距

#box{
    width: 300px;
    border: 1px solid red;
    margin: 0 auto;
}

h2{
    font-size: 16px;
    background-color: violet;
    line-height: 30px;
    color: beige;
    margin: 0;
}
form{
    background: #11efef;
}
input{
    border: 1px solid black;
}
div:nth-of-type(1){
    padding: 5px;
}

前端基础02——CSS详解

圆角边框

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

    #a{
        width: 100px;
        height: 100px;
        border: 10px solid #b6b6b6;
        border-radius: 50px 20px 10px 5px;
        /*左上 右上 右下 左下 顺时针方向*/
    }
    #b{
        width: 100px;
        height: 100px;
        border: 1px solid #11efef;
        border-radius: 50px;
    }
    #c{
        width: 100px;
        height: 50px;
        border: 1px solid lightblue;
        border-radius: 50px 50px 0 0;
    }
    img{
        border-radius: 40px;
    }
  </style>

</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d">
    <img id="cat" src="image/cat.png" alt="">
</div>

</body>
</html>

前端基础02——CSS详解

阴影

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

    <style>
        body{
            width: 100px;
            margin: 100px auto;
        }
        img{
            width: 100px;
            height: 100px;
            border: 1px solid beige;
            border-radius:120px;
            box-shadow: 10px 10px 100px black;

        }
    </style>
    
</head>
<body>

<div>
    <img src="image/02.jpg" alt="">
</div>

</body>
</html>

前端基础02——CSS详解

网站:模板之家;源码之家;element;vue;飞冰

浮动

块级元素:独占一行

h1~h6 p div 列表...

行内元素:不独占一行

span a img strong...

行内元素可以被包含在块级元素中,反之,则不可以

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*block 块元素
          inline 行内元素
          inline-block 是块元素,但是可以内联在一行
          none*/
        #a{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

<div id="a">div块元素</div>
<span>span行内元素</span>
<div id="father">
    <div id="layer01"><img src="image/1.png" alt=""></div>
    <div id="layer02"><img src="image/2.jpg" alt=""></div>
    <div id="layer03"><img src="image/3.gif" alt=""></div>
    <div id="layer04">浮动的盒子可以向左浮动,也可以向右浮动,直到它的边缘碰到包含框或另一个盒子为止</div>

</div>

</body>
</html>

这个也是实现行内元素排列的方式,但是我们很多情况都是用float

float

左右浮动

#father{
    border: 1px #11efef solid;
}
#layer01{
    border: 1px solid red;
    display: inline-block;
    float: left;
}
#layer02{
    border: 1px solid red;
    display: inline-block;
    float:left;
}
#layer03{
    border: 1px solid red;
    display: inline-block;
    float: left;
}
#layer04{
    border: 1px solid red;
    clear: both;
}

前端基础02——CSS详解

父级边框塌陷问题

clear

/*clear: right;右侧不允许有浮动元素
  clear: left; 左侧不允许有浮动元素
  clear: both; 两侧都不允许有浮动
  clear: none; */

解决父级边框塌陷的方法:

  1. 增加父级元素的高度

    #father{
        border:1px #000 solid;
        height:800px;
    }
    
  2. 增加一个空的div标签,清除浮动

    <div class="clear"></div>
    
    .clear{
        clear:both;
        margin:0;
        padding:0;
    }
    
  3. overflow

    在父级元素中增加一个 overflow:hidden

    #father{
        border: 1px #11efef solid;
        overflow: hidden;
    }
    
  4. 父类添加一个伪类:after

    #father:after{
        content: '';
        display: block;
        clear: both;
    }
    

小结:

1.浮动元素后面增加空div

​ 简单,代码中尽量避免空div

2.设置父类高度

​ 简单,元素加上有了固定的高度,就会被限制

3.overflow

​ 简单,下拉的一些场景避免使用

4.父类添加一个伪类:after(推荐)

​ 写法稍微复杂一点,但是没用副作用,推荐使用

对比:

  • display

    方向不可以控制

  • float

    浮动起来会脱离标准文档流,所以要解决父级边框塌陷问题

定位

相对定位

position: relative;

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

<!--    相对定位:
        相对于自己原来的位置进行指定偏移
		任然在标准文档流中
		原来的位置会被保留-->
    <style>
        body{
            padding: 100px;
        }
        div{
            margin: 20px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #11efef;
        }
        #first{
            background-color: beige;
            border: 1px solid skyblue;
            position: relative;/*相对定位:上下左右*/
            top:-20px;
            right: 20px;
        }
        #second{
            background-color: beige;
            border: 1px solid skyblue;
        }
        #third{
            background-color: beige;
            border: 1px solid skyblue;
            position: relative;
            left: 20px;
            bottom: -20px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

前端基础02——CSS详解

练习:

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

    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: skyblue;
            line-height: 100px;
            text-align: center;
            color: beige;
            display: block;
        }
        a:hover{
            background: #b6b6b6;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            bottom: 300px;

        }
    </style>
    
</head>
<body>

<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

前端基础02——CSS详解

绝对定位

position: absolute;

  1. 没用父级元素定位的前提下,相对于浏览器定位
  2. 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--绝对定位
        相对于父级或浏览器的位置,进行指定偏移
      不在标准文档流中
      原来的位置不会被保留-->
    <style>
        body{
            padding: 100px;
        }
        div{
            margin: 20px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #11efef;
            position: relative;/*相对定位*/
        }
        #first{
            background-color: beige;
            border: 1px solid skyblue;
        }
        #second{
            background-color: beige;
            border: 1px solid skyblue;
        }
        #third{
            background-color: beige;
            border: 1px solid skyblue;
            position: absolute;/*绝对定位*/
            left: 10px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

前端基础02——CSS详解

固定定位

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

  <style>
    body{
        height: 1000px;
    }
    div:nth-of-type(1){
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    div:nth-of-type(2){
        width: 50px;
        height: 50px;
        background: skyblue;
        position: fixed;
        right: 0;
        bottom: 0;
    }

  </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

z-index

图层:z-index,默认是0,最高无限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<div>
    <ul>
        <li><img src="image/4.jpg" alt=""></li>
        <li class="text">寻找藏匿在生活中的惊喜</li>
        <li class="bj"></li>
        <li>时间:2021/09/23</li>
        <li>地点:北方小镇</li>
        
    </ul>
    
</div>

</body>
</html>
body,div,ul,li{
    padding: 0px;
    margin: 0px;
}
div{
    width: 640px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid deepskyblue;
}
ul,li{
    list-style: none;
}
/*父级元素相对定位*/
ul{
    position: relative;
}
.text,.bj{
    position: absolute;
    width:300px;
    height: 25px;
    top: 615px;
    color:deeppink;
}
.text{
    /*层级:第999层*/
    z-index: 999;
}
.bj{
    background: black;
    /*背景透明度*/
    opacity:0.4;
}

网页动画:css3、JavaScript、canvas动画

总结

前端基础02——CSS详解

上一篇:去掉特殊空格(\t \v \f \xa0 \u0020 \u3000 \u00A0  ;)


下一篇:8.css列表样式