前端基础02——CSS详解

2024-01-08 22:48:16

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的优势：

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

优先级：就近原则。

外部样式两种写法：

链接式
导入式

选择器

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

基本选择器

标签选择器

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

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

好处：可以多个标签归类,可以跨标签使用，是同一个class，可以复用
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>

层次选择器

后代选择器：在某个元素的后面（祖爷爷，爷爷，爸爸，你）
```
   body p{
       background: aqua;
   }
```
子选择器（一代，儿子）
```
body>p{
    background: red;
}
```
相邻弟选择器：当前选中元素的向下一个兄弟元素，相邻（向下）
```
.active +p{
    background: green;
}
```
通用选择器：当前选中元素的向下所有兄弟元素
```
.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;
}

属性选择器！！

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>

素材：

超链接伪类

正常情况下，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;
}

素材：

背景

<!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>

素材：

渐变

Grabient

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

<!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>

盒子模型

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>

内外边距

#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;
}

圆角边框

<!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>

阴影

<!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>

网站：模板之家；源码之家；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;
}

父级边框塌陷问题

clear

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

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

增加父级元素的高度

#father{
    border:1px #000 solid;
    height:800px;
}

增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

overflow

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

#father{
    border: 1px #11efef solid;
    overflow: hidden;
}

父类添加一个伪类：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>

练习：

<!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>

绝对定位

position: absolute;

没用父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

<!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>

固定定位

<!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详解

CSS

快速入门

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器！！

美化网页

字体样式

文本样式

超链接伪类

列表

背景

渐变

盒子模型

边框

内外边距

圆角边框

阴影

浮动

display

float

父级边框塌陷问题

定位

相对定位

绝对定位

固定定位

z-index

总结

码农公寓

CSS

快速入门

选择器

基本选择器

层次选择器

结构伪类选择器

属性选择器！！

美化网页

字体样式

文本样式

超链接伪类

列表

背景

渐变

盒子模型

边框

内外边距

圆角边框

阴影

浮动

display

float

父级边框塌陷问题

定位

相对定位

绝对定位

固定定位

z-index

总结

相关文章