CSS基础学习_css学习-CSDN博客

本文链接：https://blog.csdn.net/qq_51148337/article/details/130856702

1.什么是CSS

如何学习

CSS是什么
CSS怎么用
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接、列表）
盒子模型
浮动
定位
网页动画（特效效果）菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现，美化网页

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

1.2 CSS发展史

CSS1.0

CSS2.0 DIV（自定义的一些块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角，阴影，动画…浏览器兼容性

练习格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NPLeRPQL-1684937628508)(C:\Users\sunlei\AppData\Roaming\Typora\typora-user-images\image-20230513215114039.png)]

1.3 快速入门

<!--规范,<style>可以编写CSS代码，每一个声明最好使用分号结尾
语法：
选择器{
声明1；
声明2；
声明3；
}
-->
    <style>
        h1{
            color: chartreuse;
        }
    </style>

</head>
<body>

<h1>我是标题</h1>


</body>

html和css分离

h1{
    color: chartreuse;
}


//在html中实现html和css链接
   <link rel="stylesheet" href="css/style.css">

css优势：

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

1.4 CSS的四种导入方式

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

<!-- 内部样式表-->
  <style>
/* */
h1{
  color: forestgreen;
}
  </style>

<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则！！！-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: cornflowerblue">我是标题</h1>

</body>
</html>

拓展：外部样式的两种写法

链接式 html

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">

导入式 css2.1特有的

<!--  导入式-->
  <style>
    /*@import "css/style.css";*/
    @import url("css/style.css");
  </style>

首先link和import语法结构不同，前者是html标签，只能放在html源代码中使用，后者作为css样式，作用是引入css样式功能。

import在html使用时候需要

本质上两者使用选择区别不大，但为了软件中编辑布局网页html代码，一般使用link较多，也推荐使用link。

2.CSS选择器

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

2.1 基本选择器

标签选择器

选择一类标签

  <style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
      color: cadetblue;
      background: antiquewhite;
      border-radius: 20px;
    }
    p{
        font-size: 50px;
    }
  </style>

类选择器

选中所有class属性一致的标签，可以跨标签使用，类名{}

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*类选择器的格式 .class的名称{}
    好处：可以多个标签归类，是同一个class,可以服用
    */
    .ss{
      color: gold;
    }
    .ll{
      color: navajowhite;
    }
  </style>

</head>
<body>

<h1 class="ss">我爱学习，学习爱我</h1>
<h1 class="ll">我爱学习，学习爱我</h1>
<h1 class="ss">我爱学习，学习爱我</h1>

<p class="ss">p标签</p>
</body>
</html>

Id选择器

全局唯一！#id名{}，优先级不遵循就近原则

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*id选择器：id必须保证全局唯一！！不可以被复用
    #id名称{}
    不遵循就近原则，固定顺序：id选择器>类class选择器>标签选择器
    */
    #xiuxiu{
      color: darkorchid;
    }
    .sunsun{
        color: darkolivegreen;
    }
    h1{
        color: cornflowerblue;
    }
  </style>

</head>
<body>

<h1 id="xiuxiu">我想睡觉</h1>
<h1 class="sunsun">我想睡觉</h1>
<h1 class="sunsun">我想睡觉</h1>
<h1>我想睡觉</h1>
<h1>我想睡觉</h1>

</body>
</html>

2.1层次选择器

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

/* 后代选择器*/
    body p{
      background: darkorchid;
    }

子选择器：只有一代

  /*  子选择器*/
    body>p{
      background: gold;
    }

相邻兄弟选择器:同辈

  /*  相邻兄弟选择器：只有一个（向下）*/
    .active + p{
      background: forestgreen;
    }

通用选择器

  /*  通用选择器:当前选中元素的向下的所有兄弟元素*/
    .active~p{
      background: antiquewhite;
    }

2.3结构伪选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
/*ul的第一个子元素*/
ul li:first-child{
  background: cornflowerblue;
}
/*ul的最后子元素*/
ul li:last-child{
    background: cadetblue;
}
/*选中第一个p元素p1:定位到父元素，选择当前的第一个元素
选中当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效！
*/
p:nth-child(1){
    background: gold;
}
/*选中父元素，下面属于p元素的第一个*/
p:nth-of-type(1){
    background: antiquewhite;
}

  </style>

</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QsqxPWKw-1684937628509)(C:\Users\sunlei\AppData\Roaming\Typora\typora-user-images\image-20230514221113241.png)]

2.4属性选择器（常用）

<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

  /* 存在id属性的元素
  a[]{}
  两种方式：属性名，属性名=属性值
  =  绝对等于
  =* 包含这个元素
  ^= 以这个开头
  $= 以这个结尾
  */
    /*a[id=first]{*/
    /*  background: antiquewhite;*/
    /*}*/

  /*  选中class中含有links的元素*/
  /*  a[class*="links"]{*/
  /*    background: cornflowerblue;*/
  /*  }*/

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

  /*  选中href以pdf结尾的*/
    a[href$=pdf]{
      background: darkseagreen;
    }
  </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="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>

3.美化网页元素

3.1为什么要美化网页

有效的传递信息
美化网页，吸引用户
凸显页面的主题
提高用户体验

span标签：重点要突出的字，使用span标签套起来

<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    #title1{
      font-size: 50px;
    }
  </style>

</head>
<body>

欢迎学习<span id="title1">Java</span>

</body>

3.2字体样式

<!--
font-family:字体
font-size：字体大小
font-weight 字体粗细 lighter
color:字体颜色
-->
    <style>
        body{
            font-family:华文楷体;
            color: darkseagreen;
        }
        h1{
            font-size: 50px;
        }
    .p1{
        font-weight: bold;
    }
    </style>


<!-- 字体风格-->
  <style>
    p{
      font:oblique bolder 20px "animation-name:none;";
    }
  </style>

3.3 文本样式

颜色 color rgb rgba
对齐方式 text-align=center
首行缩进 text-indent:2em
**行高 line-height:**单行文字上下居中！line-height=height!
装饰 text-decoration

注意：a标签自动带下划线，去掉下划线 text-decoration:none

文本图片水平对齐：vertical-align:middle

<!--  颜色：
单词表示
RGB 0~F
RGBA A：0~1

text-align: center 排版居中 偏左偏右right
段落首行缩进： text-indent: 2em;
行高和块的高度一致，就可以上下居中
-->
  <style>
    h1{
      color: cornflowerblue;
        text-align: center;
    }
    .p1{
        text-indent: 2em;
    }
    .p2{
        background: cornsilk;
        height: 100px;
        line-height: 30px;
    }
  </style>

</head>
<body>

<h1>故事介绍</h1>

<p class="p1">
  故乡的夏天，总有几场酣畅淋漓的雷雨，“黑云翻墨未遮山，白雨跳珠乱入船”，山雨生动、豪爽、痛快，打在身上、润在心里，电闪雷鸣在清凉中落幕。天空明朗清新，远处跳跃起伏的山脊清晰、浑厚，很有层次感。无论是漫步在田间地头，还是在山谷间、溪水旁，到处是湿漉漉的绿意、凉意，空谷足音回荡袅绕，老农牵着羊群走向那片葱茏，雨燕在天地之间翻飞，孩童在溪水边嬉戏，点水蜻蜓款款飞舞，处处涤荡着自然清爽原生态的韵律.
</p>

<p class="p2">
  小暑前后，是多雨时节，每一场雨，都清凉着故乡的夏。随着小暑大暑的到来，乡村大地天空，潜藏了五谷丰收和梦想的激情，不觉中也渗入一丝松散从容，山坡上粉紫色的打碗花装饰着大山的胸脯，一望无际的玉米林织成辽阔的青纱帐，原野的树木枝头更深了一层绿，打麦场的麦秸垛边留下了母鸡带着小鸡觅食的爪印……等山上的覆盆子红得发乌，山核桃挨棍子，夏天就快过去了。
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wnppmjTI-1684937628509)(C:\Users\sunlei\AppData\Roaming\Typora\typora-user-images\image-20230516114557623.png)]

3.4阴影

  /*阴影颜色、水平偏移、垂直便宜、阴影半径*/
    #price{
        text-shadow: cornflowerblue 10px 10px 10px;
    }

3.5超链接伪类

正常情况下，a，a:hover

/*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮的状态*/
    a:hover{
        color: gold;
        font-size:50px;
    }
    /*鼠标按照未释放的状态*/
    a:active{
        color: darkolivegreen;
    }
    a:visited{
        color: brown;
    }

3.6列表样式

<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;<a href="#">手机</a><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>
    <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>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;
      <a href="#">票务</a></li>
  </ul>
</div>

</body>

#nav{
    width:500px;
    background: bisque;
}
.title{
    font-size:18px;
    font-weight: bolder;
    text-indent: 2em;
    line-height: 30px;
    background: brown;
}
/*ul li*/
/*
list-style none 去掉原点
circle:空心圆
decimal 数字
square 正方形
*/

/*ul{*/
/*    background: bisque;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: darkgreen;
    text-decoration: underline;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZOUQbYmR-1684937628509)(C:\Users\sunlei\AppData\Roaming\Typora\typora-user-images\image-20230516202110980.png)]

3.7背景

背景颜色

背景图片

<style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/1.png");
        /* 默认是全部平铺*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>

3.8渐变

https://www.grabient.com/

4.盒子模型

4.1什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oonhf7BI-1684937628510)(C:\Users\sunlei\AppData\Roaming\Typora\typora-user-images\image-20230517182627268.png)]

margin：外边距 padding：内边距 border：边框

4.2 边框

边框的样式、粗细、颜色

#box{
      width: 300px;
      border:1px solid red;
    }
    h2{
      font-size: 20px;
      background: beige;
      line-height: 30px;
    }
    form{
      background: darkseagreen;
    }
    div:nth-of-type(1)>input{
      border: 3px solid black;
    }
    div:nth-of-type(2)>input{
      border: 3px dashed #0094fe;
    }
    div:nth-of-type(3)>input{
      border: 3px dashed rgb(55, 0, 254);
    }

4.3 外边距

 #box{
      width: 300px;
      border:1px solid red;
      margin: 0 auto;
    }
    /*
    顺时针旋转
    margin:0
    margin:0,1px
    margin:0 1px 2px 3px
    */
    h2{
      font-size: 20px;
      background: beige;
      line-height: 30px;
      margin-top: 0;
      margin-bottom: 0;
    }
    form{
      background: darkseagreen;
    }
    input{
      border: 1px solid black;
    }
    div:nth-of-type(1){
     padding:10px 2px;
    }

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f5ymr6PG-1684937628510)(C:\Users\sunlei\AppData\Roaming\Typora\typora-user-images\image-20230518155849705.png)]

margin+border+padding+内容宽度

4.4圆角边框

<!--
左上 右上 右下 左下 顺时针方向
圆圈：圆角=半径
-->
  <style>
    div {
      width: 100px;
      height: 100px;
      border: 10px solid olivedrab;
      border-radius: 100px;
    }
  </style>

XXX-模板之家后台管理之家源码之家

4.5阴影

<!--margin:0 auto 居中
要求：块元素，块元素有固定宽度
-->
  <style>
    img{
      border: 1px solid pink;
      margin: 50px;
      border-radius: 200px;
      box-shadow:10px 10px 50px yellow ;
    }
  </style>

</head>
<body>

<div style="width: 1200px;height:50px;display: block;text-align:center">
    <img src="images/1.png" alt="">
</div>


</body>

5.浮动

5.1 标准文档流

块级元素：独占一行

h1-h6 p div 列表

行内标签：不独占一行

span a img strong

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

5.2 display

<!--
block 块元素
inline 行内元素
inline-block 块元素，但可以内联，在一行
-->
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
  </style>

5.3 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px cadetblue solid;
}
.layer01{
    border:1px greenyellow solid;
    display: inline-block;
    float: left;
}
.layer02{
    border:1px plum solid;
    display: inline-block;
    float: left;
}
.layer03{
    border:1px gold dashed;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px blueviolet solid;
    font-size: 15px;
    line-height: 25px;
    display: inline-block;
    float: left;
}

5.4 overflow及父级边框塌陷问题

/*
clear right:右侧不允许有浮动
left：左侧不允许有浮动
both：两侧不允许有浮动
none：可以浮动
*/

解决方案：

增加父级元素的高度~

#father{
    border: 1px cadetblue 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;
}

小结：

浮动元素后面增加空的div——简单，代码中尽量避免空的div
设置父类元素的高度——简单，元素假设有了固定的高度，就会被限制
overflow——简单，下拉的一些场景避免使用
父类添加一个伪类after——推荐使用！！写法复杂一点，但没有副作用

5.5 对比

display

方向不可以控制

float

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

6.定位

6.1 相对定位

<!-- 相对定位
 相对于自己原来的位置进行偏移
-->
  <style>
      body{
          padding: 20px;
      }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
        border: 1px darkblue solid;
        padding: 0;
    }
    #first{
        background-color: olivedrab;
        border:1px chartreuse dashed;
        position: relative; /* 相对定位，上下左右*/
        top:-20px;
        left: 20px;
    }
    #second{
        background-color: bisque;
        border:1px #FFFB7D dashed;
    }
    #third{
        background-color: green;
        border: 1px aquamarine solid;
        position: relative;
        bottom: -20px;
        right: 20px;
    }
  </style>

</head>
<body>

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

</body>

相对定位：positive：relative

相对原来的位置进行左右偏移，上下左右，注意正负变化，仍然再标准文档流中，原来的位置被保留

6.2 绝对定位

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

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置会被保留。

<style>
      body{
          padding: 20px;
      }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
        border: 1px darkblue solid;
        padding: 0;
        position: relative;
    }
    #first{
        background-color: olivedrab;
        border:1px chartreuse dashed;

        top:-20px;
        left: 20px;
    }
    #second{
        background-color: bisque;
        border:1px #FFFB7D dashed;
        position: absolute;
        right: 30px;
        top: -10px;
    }
    #third{
        background-color: green;
        border: 1px aquamarine solid;

        bottom: -20px;
        right: 20px;
    }
  </style>

6.3 固定定位

固定定位就是固定在网页某一处绝对定位是相对浏览器

<!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: cornflowerblue;
      position: absolute;
      right: 0;
      bottom: 0;
    }
   div:nth-of-type(2){ /*固定定位fixed：*/
     width: 50px;
     height: 50px;
     background: olivedrab;
     position: fixed;
     right: 0;
     bottom: 0;
   }
  </style>

</head>
<body>

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

</body>
</html>

6.4 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 id="content">
  <ul>
    <li><img src="images/bg.png" alt=""></li>
    <li class="tipText">加油学习css，为了更好去玩</li>
    <li class="tipBg"></li>
    <li>时间：2023-05-21</li>
    <li>地点：天津滨海区</li>
  </ul>
</div>

</body>
</html>

#content{
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px cornflowerblue solid;
    width: 500px;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
/*  去掉原点  似乎div部分不需要边距等于0*/
}
/*父级元素相对定位，子元素就可以绝对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 500px;
    height: 25px;
    top: 295px;
}
.tipText{
    /*z-index: 999;*/
/*使图层下面的文字显示*/
}
.tipBg{
    background: bisque;
    opacity: 0.5;
/* 改变背景透明度 就可以看到图层下面的文字*/
/*    filter: alpha(opacity=50);*/
/*    IE8以前可以用，版本问题*/
}

7、动画

菜鸟教程

canvas动画

卡巴斯基网络实验室

x：默认是0，最高无限制

<!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/bg.png" alt=""></li>
    <li class="tipText">加油学习css，为了更好去玩</li>
    <li class="tipBg"></li>
    <li>时间：2023-05-21</li>
    <li>地点：天津滨海区</li>
  </ul>
</div>

</body>
</html>

#content{
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px cornflowerblue solid;
    width: 500px;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
/*  去掉原点  似乎div部分不需要边距等于0*/
}
/*父级元素相对定位，子元素就可以绝对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 500px;
    height: 25px;
    top: 295px;
}
.tipText{
    /*z-index: 999;*/
/*使图层下面的文字显示*/
}
.tipBg{
    background: bisque;
    opacity: 0.5;
/* 改变背景透明度 就可以看到图层下面的文字*/
/*    filter: alpha(opacity=50);*/
/*    IE8以前可以用，版本问题*/
}