首页 前端知识 Diary22-全网最全的CSS3.0讲解

Diary22-全网最全的CSS3.0讲解

2024-04-20 16:04:00 前端知识 前端哥 34 359 我要收藏

CSS学习

1.认识CSS

1.1什么是CSS

CSS:Cascading Style Sheet——层叠级联样式表

CSS:表现(美化网页)

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

1.2CSS发展史

  • CSS1.0:只包含字体颜色

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

  • CSS2.1:加入了浮动和定位

  • CSS3.0:加入了圆角边框,阴影,动画...

1.3快速入门

  • 规范:<style>可以编写CSS的代码,每一个声明,最好使用分号结尾

  • 语法:

    选择器{

    声明1;

    声明2;

    声明3;

    }

1.4CSS的优势

  • 内容和表现分离

  • 网页结构表现统一,可以实现复用

  • 样式丰富

  • 建议使用独立于HTML的CSS文件

1.5CSS三种导入方式

  • 内部样式

  • 外部样式

  • 行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <!--内部样式-->
    <style>
        h1{
            color:green;
        }
    </style>
​
    <!--外部样式-->
    <link rel="stylesheet" href="CSS/style.css">
​
​
</head>
<body>
​
<!--优先级:就近原则(谁离元素近谁有效)-->
<h1 style="color:red">sxc</h1>
​
</body>
</html>
/*外部样式*/
 h1{
     color:yellow;
 }

2.选择器

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

2.1基本选择器(重点)

2.1.1 标签选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        /*标签选择器,会选择到页面上所有这个标签的元素*/
      h1{
        color:red;
      }
      p{
        font-size:80px;
      }  
    </style>
​
​
</head>
<body>
​
<h1>sxc</h1>
<h1>sxc</h1>
<p>中国围棋第一人</p>
​
</body>
</html>

结果如下:

2.1.2 类选择器

类选择器的格式 .class的名称{} 优点:可以多个标签归类,同一个class可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
​
    <style>
        /*  类选择器的格式  .class的名称{}
          优点:可以多个标签归类,同一个class可以复用
        */
        .hanhan{
            color:red;
        }
        .sunshen{
            color:yellow;
        }
        .sxc{
            color:green;
        }
    </style>
​
<body>
​
<h1 class="sxc">围棋第一人</h1>
<h1 class="sunshen">围棋第一人</h1>
<h1 class="hanhan">围棋第一人</h1>
​
</body>
</html>

结果如下图所示:

2.1.3 id选择器

id选择器:id必须全局唯一! 语法:#id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        /*  id选择器:id必须全局唯一!
            #id名称{}
        */
        #sunshen{
            color:red;
        }
    </style>
​
</head>
<body>
​
<h1 id="sunshen">sxc</h1>
​
</body>
</html>
2.1.4三种选择器的优先级

id选择器>类选择器>标签选择器

2.2层次选择器

2.2.1后代选择器

后代选择器:在某个元素的后面

/*后代迭代器*/
       body p{
            background: green;
            }
2.2.2子选择器

子选择器:一代

 /*子选择器*/
        body>p{
            background: red;
        }
2.2.3相邻兄弟选择器

相邻兄弟选择器:只有一个,相邻(向下)

/*相邻兄弟选择器*/
        .active+p{
            background: yellow;
        }
2.2.4通用选择器

通用选择器:当前选中元素的向下所有兄弟元素

/*通用选择器*/
        .active~p{
            background: yellow;
        }

2.3结构伪类选择器

/*ul的第一个元素*/
    ul li:first-child{
        background: red;
    }
​
    /*ul的最后一个元素*/
    ul li:last-child{
        background: green;
    }
​
/*选中p1:定位到父元素,选择当前的第一个元素
    选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效,按顺序选择
     */
    p:nth-child(1){
        background: yellow;
    }
​
    /*选中父元素下的p元素的第一个*/
    p:nth-of-type(1){
        background: red;
    }

2.4属性选择器(常用+重点)

语法:属性名=属性值(正则)

  • =:绝对等于

  • *=:包含这个元素

  • ^=:以这个开头

  • $=:以这个结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: #2700ff;
        text-align: center;
        color: gainsboro;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
​
    /*a[id]{
        background: yellow;
    }*/
​
    /*a[id=first]{
        background: yellow;
    }*/
​
    /*a[class*=links]{
        background: yellow;
    }*/
​
    /*a[href^=http]{
        background: yellow;
    }*/
​
    a[href$=pdf]{
        background: yellow;
    }
​
</style>
​
​
​
​
<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="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/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="/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>

结果如下:

3.美化网页元素

3.1为什么要美化网页

  • 有效的传递页面信息

  • 美化网页,页面漂亮,才能吸引用户

  • 凸显页面的主题

  • 提高用户的体验

3.2字体样式

  • font-family:字体

  • font-size:字体大小

  • font-weight:字体粗细

  • color:字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
<!--
font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
​
  <style>
    body h1{
        font-family:楷体;
        color:red;
    }
    h1{
      font-size: 50px;
    }
    .p1{
        font-weight: bold;
    }
  </style>
​
</head>
<body>
​
<h1>2-16勇夺第一</h1>
​
<p class="p1">
  棋手战鹰,职业二段
</p>
​
<p>
  在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩,率队成功降级,是当今中国围棋第一美女主播
</p>
​
<p>
    She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.
</p>
​
</body>
</html>

结果如下图所示:

3.3文本样式

3.3.1颜色

RGB:0-F RGBA A:0~1

3.3.2文本的对齐方式

text-align: center;居中

3.3.3首行缩进

text-indent: 2em;首行缩进两个字符

3.3.4行高

height line-height 行高与块的高度一致,就可以上下居中

3.3.5装饰

text-decoration:underline下划线

3.3.6文本图片水平对齐

img,span{ vertical-align: middle; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
​
<!--
1.颜色:
RGB:0-F
RGBA  A:0~1
​
2.文本对齐方式:
text-align: center;居中
​
3.首行缩进:
text-indent: 2em;首行缩进两个字符
​
4.height
line-height
行高与块的高度一致,就可以上下居中
-->
​
  <style>
    h1{
      color:rgba(0,255,255,0.8);
      text-align: center;
    }
    .p1{
      text-indent: 2em;
    }
    .p2{
      text-indent: 2em;
    }
    .p3{
      text-indent: 2em;
      background: cornsilk;
      height: 30px;
      line-height: 30px;
    }
    img,span{
      vertical-align: middle;
    }
  </style>
​
</head>
<body>
​
<h1>2-16勇夺第一</h1>
​
<p class="p1">
  棋手战鹰,职业二段
</p>
​
<p class="p2">
  在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩,率队成功降级,是当今中国围棋第一美女主播
</p>
​
<p class="p3">
  She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.
</p>
​
<p>
  <img src="images/3.jpg" alt="">
  战鹰美照
</p>
​
</body>
</html>

结果如下图所示

3.4超链接伪装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    /*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮的颜色*/
    a:hover{
      color:orange;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: aqua;
    }
  </style>
​
​
</head>
<body>
​
<a href="#">
  <img src="images/3.jpg" alt="">
</a>
<p>
  <a href="#">骑手战鹰</a>
</p>
<p>
  <a href="">职业二段</a>
</p>
<p>
  2-16勇夺第一
</p>
​
</body>
</html>

结果如下图所示:

3.5文本阴影

/*text-shadow;阴影颜色,水平偏移,垂直偏移,阴影半径*/
    #price{
      text-shadow: aquamarine 10px 10px 2px;
    }

3.6列表

#nav{
    width: 300px;
    background: bisque;
}
​
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent:1em;
    line-height: 35px;
    background: red;
}
​
ul{
    background: bisque;
}
​
ul li{
    height: 30px;
    list-style: none;
    text-indent:1em;
}
​
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
​
a:hover{
    color: orange;
    text-decoration: underline;
}

3.7背景图片应用及渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    div{
      width:1000px;
      height: 700px;
      border: 1px solid red;
      background-image: url("images/3.jpg");
    }
    .div1{
      background-repeat: repeat-x;
    }
    .div1{
      background-repeat: repeat-y;
    }
    .div1{
      background-repeat: no-repeat;
    }
  </style>
​
​
</head>
<body>
​
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
​
​
</body>
</html>

3.8渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      background-color: #FFFFFF;
      background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)
    }
  </style>
</head>
<body>
​
</body>
</html>

结果如下图所示:

4.盒子模型

4.1什么是盒子模型

4.2边框

  • 边框的粗细

  • 边框的样式

  • 边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    body{
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    /*border:粗细;样式;颜色*/
    #box{
      width: 300px;
      border: 1px solid red;
    }
​
    h2{
      font-size: 16px;
      background-color:aqua;
      line-height: 30px;
    }
​
    form{
      background: aqua;
    }
​
    div:nth-of-type(1) input{
      border: 3px solid black;
    }
  </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>

4.3内外边距

margin+border+padding+内容宽度

盒子的计算方式:元素到底有多大

h2{
      font-size: 16px;
      background-color:aqua;
      line-height: 30px;
      margin: 0 2px 3px 5px;
    }
​

4.4圆角边框

下面给出一个最简单的圆角边框的案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 5px solid red;
      border-radius:30px ;
    }
  </style>
​
</head>
<body>
​
<div></div>
​
</body>
</html>

结果如下图所示:

4.5盒子阴影

下面给出一个最简单的盒子阴影的案例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
​
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 5px solid red;
      box-shadow:10px 10px 100px yellow;
    }
  </style>
​
</head>
<body>
​
<div></div>
​
</body>
</html>

结果如下图所示:

5.浮动

5.1 display

<style>
    div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
        }
</style>

5.2 float

.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: right;
}

5.3父级边框塌陷问题

clear

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

解决方案:

  • 增加父级元素的高度

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

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

    在父级元素中增加一个  overflow:hidden;
  • 父类添加一个伪类:after(推荐)

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

6.定位

6.1相对定位

加入下面这语句——position: relative;

相对于原来的位置,进行指定的偏移

top: -10px;
bottom: -10px;
left: 10px;
right: 10px;

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background-color: aqua;
            border: 1px dashed green;
            position: relative;
            top: -10px;
            left: 10px;
        }
        #second{
            background-color: orange;
            border: 1px dashed yellow;
        }
        #third{
            background-color: cornflowerblue;
            border: 1px dashed blue;
            position: relative;
            bottom: -10px;
            right: 10px;
        }
    </style>
​
</head>
<body>
​
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
​
</body>
</html>

结果如下图所示:

6.2方块定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    #box{
      width: 300px;
      height: 300px;
      padding: 10px;
      border: 2px solid red;
    }
    a{
      width: 100px;
      height: 100px;
      text-decoration: none;
      background-color: hotpink;
      line-height:100px ;
      text-align: center;
      color: #FFFFFF;
      display: block;
    }
    a:hover{
      background: #6284FF;
    }
    .a2,.a4{
      position: relative;
      left: 200px;
      top: -100px;
    }
    .a5{
      position: relative;
      left: 100px;
      top: -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>

结果如下图所示:

6.3绝对定位

  • 没有父级元素的前提下,相对于浏览器定位

  • 假设父级元素存在定位,通常会相对父级元素进行偏移

  • 在父级元素范围内移动

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    ​
        <style>
            div{
                margin: 10px;
                padding: 5px;
                font-size: 12px;
                line-height: 25px;
            }
            #father{
                border: 1px solid red;
            }
            #first{
                background-color: aqua;
                border: 1px dashed green;
            }
            #second{
                background-color: orange;
                border: 1px dashed yellow;
                position: absolute;
                right: 30px;
            }
            #third{
                background-color: cornflowerblue;
                border: 1px dashed blue;
            }
        </style>
    ​
    </head>
    <body>
    ​
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
    ​
    </body>
    </html>

    结果如下图所示:

6.4固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        body{
            height: 300px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
​
​
</head>
<body>
​
<div>div1</div>
​
</body>
</html>

结果如下图所示:

无论浏览器页面如何滑动,其位置不变

6.5 z-index

z-index:默认为0,最高为999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <link rel="stylesheet" href="css/style.css">
​
</head>
<body>
​
<div id="content">
  <ul>
    <li><img src="images/3.jpg" alt=""></li>
    <li class="tipText">2-16勇夺第一</li>
    <li class="tipBG"></li>
    <li>战鹰战鹰几岁了,战鹰战鹰我三岁了</li>
  </ul>
</div>
​
</body>
</html>
#content{
    width: 800px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
#content ul{
    position: relative;
}
.tipBG,.tipText{
    position: absolute;
    width: 800px;
    top: 367px;
    height: 25px;
}
.tipText{
    color: #FFFFFF;
    z-index: 999;
}
.tipBG{
    background: #000;
    opacity:0.5;
}

结果如下图所示:

7.CSS3.0总结

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5394.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!