ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

前端基础02——CSS详解

2021-09-23 16:04:55  阅读：168  来源： 互联网

标签：02 solid height color 详解 nbsp background border 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;
}

属性选择器！！

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; */

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

  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>

练习：

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

  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>

固定定位

<!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,solid,height,color,详解,nbsp,background,border,CSS
来源： https://www.cnblogs.com/xsyw/p/15324567.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有