CSS学习笔记

小柒xq

已于 2024-08-26 09:18:38 修改

阅读量385

点赞数 1

分类专栏：笔记文章标签：前端 css

于 2024-08-26 09:18:13 首次发布

本文链接：https://blog.csdn.net/m0_63783672/article/details/141551138

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3

一.什么是CSS

1.CSS快速入门

style

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

    <!--规范  <style> 可以编写css代码,每一个声明语句最好使用分号结尾
    语法：
        选择器{
           声明1;
           声明2;
        }
    -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>

</body>
</html>

h1{
      color: red;
  }

CSS的优势：

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

2.三种CSS导入方式

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

<!--优先级：行内样式>内部样式>外部样式     (就近原则)-->

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

/*外部样式*/
h1{
       color: green;
  }

拓展：外部样式两种写法

链接式：

html

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

导入式：

css2.0

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

二.选择器

1.三种基本选择器-重要

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

1.标签选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*标签选择器，会选择到页面上所有的这个标签*/
        h1{
           color : #a13d30;
           background: pink;
           border-radius: 33px;
        }
    </style>
</head>
<body>
<h1>学JAVA</h1>
<h1>学JAVA</h1>
<p>听狂神说</p>

</body>
</html>

2.类选择器

好处：可以多个标签归类，是同一个class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式：  .class的名称{}
        好处：可以多个标签归类，是同一个class

        */
        .xiaoqi{
             color: yellow;
        }
        .xiaoqi1{
             color: pink
        }
    </style>

</head>
<body>
<h1 class="xiaoqi">学JAVA</h1>
<h1 class="xiaoqi1">学JAVA</h1>
<p  class="xiaoqi1">听狂神说</p>

</body>
</html>

3.id选择器

id必须保证全局唯一

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

    <style>
        /*
        id选择器 :id必须保证全局唯一
        #id名称{}
        不遵循就近原则
        优先级：
        id选择器>class选择器>标签选择器
        */
        #wjk{
           color:blue;
        }
        .wy{
            color:green;
        }
        h1{
            color:pink;
        }
    </style>
</head>
<body>

<h1 id="wjk">学JAVA</h1>
<h1 class="wy">学JAVA</h1>
<p class="wy">听狂神说</p>
</body>
</html>

优先级

id>class>标签

2.层次选择器

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

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

子选择器一代，儿子

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

相邻兄弟选择器同辈

/*相邻兄弟选择器      只有一个*/
        .active + p{
              background: yellow;
        }

通用选择器

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

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

    <style>
        /*p{*/
            /*background: green;*/
        /*}*/
        /*后代选择器*/
         /* body p{*/
            /*   background: red;*/
         /* }*/

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

        /*相邻兄弟选择器      只有一个*/
        /*.active + p{*/
            /*  background: yellow;*/
        /*}*/

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

    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>

3.结构伪类选择器

伪类：条件

/* ul的第一个子元素*/
        ul li:first-child{
             background: #02ff00;
       }
        
        /* ul的最后一个子元素*/
        ul li:last-child{
             background: #ff4832;
        }
 /*选中 p1 : 定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选择父级元素的第一个 ， 并且是当前元素才生成.
        */
        p:nth-child(2){
             background: #2700ff;
        }
        /*选中父类元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
             background:yellow;
        }

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

<!--避免使用class,id选择器-->
    <style>
        /* ul的第一个子元素*/
        ul li:first-child{
             background: #02ff00;
       }

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

        /*选中 p1 : 定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选择父级元素的第一个 ， 并且是当前元素才生成.
        */
        p:nth-child(2){
             background: #2700ff;
        }
        /*选中父类元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
             background:yellow;
        }
        a:hover{
            background:black;
        }
    </style>
</head>
<body>
<a href="">1233455</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

4.属性选择器-重要(常用)

id+class结合

<!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: 10px;
             background: pink;
             text-align: center;
             color: gainsboro;
             text-decoration: none;
             margin-right: 5px ;
             font: bold 20px/50px Arial;
        }
        /* 属性名.  属性名=属性值(正则) */
        /*     =绝对等于  
               *=是包含
               ^=以这个开头
               $=以这个结尾 
          */

        /*存在id属性的元素  a[]{}*/
        /* a[id]{
            background: yellow;
        } */
        /* id = first的元素 */
        /* a[id = first]{
            background: #63ff23;

        } */
        /* class中有links的元素 */
        /* a[class*=links]{
            background: yellow;
        } */
        /* 选中href中以http开头的元素 */
        /* a[href^=http]{
            background: yellow;
        } */
        a[href$=pdf]{
            background: blue;
        }

    </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</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.jgp" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item last">7</a>
</p>

</body>
</html>

=
*=
^=
$=

三.美化网页元素

1.为什么要美化网页

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

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

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

    <style>
        #title{
            font-size: 50px;

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

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

</body>
</html>

2.字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- font family:字体
         font-size:字体大小
         font-weight: 字体的粗细
         color:字体颜色
    -->
    <style>
        body{
            font-family: 宋体;
            color: blueviolet;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>集合是数学的基本概念之一</h1>
<p class="p1">具有某种特定属性的事物的全体称为"集"，而元素就是组成集的每个事物。</p>

<p>研究集的运算及其性质的数学分支叫做集论或集合论集合的定义很广，不仅限于数学，在生产生活中对于集合的使用也是很广泛的，而组成特定集合的具有特定属性的事物全部都可以称做元素</p>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 字体风格 -->
    <style>
        p{
            font:oblique 100 12px "楷体";
        }
    </style>
</head>
<body>
<p class="p1">具有某种特定属性的事物的全体称为"集"，而元素就是组成集的每个事物。</p>
</body>
</html>

3.文本样式

颜色 color rgb rgba
文本对齐方式 text-align = center
首行缩进 text-indent: 2em;
行高 line-height
装饰 text-decoration
文本图片水平对齐：vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        颜色：
            单词
            RGB   0~F
            RGBA  A: 0~1
        text-align : 排版  居中
        text-indent: 2em;   段落首行缩进
        行高，和 块的高度一致，就可以上下居中
     -->
    <style>
        h1{
            color: rgba(0, 255, 255,0.1);
            text-align: left;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: #2700ff;
            height: 300px;
            line-height: 300px;
        }
        /* 下划线 */
        .l1{
            text-decoration: underline;
        }
        /* 中划线 */
        .l2{
            text-decoration: line-through;
        }
        /* 上划线 */
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线*/
        a{
           text-decoration:none
        }
        /*水平对齐 参照物，  a , b*/
        img,span{
            vertical-align: middle;
         }
    </style>

</head>
<body>

<a href="">123</a>
<p class="l1">112233</p>
<p class="l2">112233</p>
<p class="l3">112233</p>

<h1>集合是数学的基本概念之一</h1>
<p class="p1">具有某种特定属性的事物的全体称为"集"，而元素就是组成集的每个事物。</p>

<p class="p2">研究集的运算及其性质的数学分支叫做集论或集合论集合的定义很广，不仅限于数学，在生产生活中对于集合的使用也是很广泛的，而组成特定集合的具有特定属性的事物全部都可以称做元素</p>
<p>
    <img src="images/a.jpg" alt="" width="300px" height="300px">
    <span>sssssssss</span>
</p>

</body>
</html>

4.阴影

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

5.超链接伪类

正常的情况下 a a:hover

 /* 默认的颜色 */
        a{
            text-decoration: none;
            color: black;
        }
        /* 鼠标悬浮的颜色 */
        a:hover{
            color: orange;
            font-size: 50px;
        }
        /* 鼠标按住未释放的颜色 */
        a:active{
            color: green;
        }
        a:visited{
            color: #ff008a;
        }

6.列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" 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>&nbsp;&nbsp;</li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;</li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;</li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;</li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;</li>
    </ul>
</div>

</body>
</html>

#nav{
   width:500px;
   background: #a0a0a0;
}

.title{
   font-size: 18px;
   font-weight: bold;
   text-indent: 1em;
   line-height: 30px;
   background: red;
}
/* ul
 list-style:
 none 去掉圆点
 circle  空心圆
 decimal  数字
 square  正方形
 li*/
/*ul{
   background: #a0a0a0;
}*/
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;
}

7.背景

背景颜色

背景图片

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

8.渐变

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

四.盒子模型

1.什么是盒子模型

margin: 外边距

padding: 内边距

border: 边框

2.边框

1.边框的粗细

2.样式

3.颜色

border: 粗细 , 样式 , 颜色;

3.内外边距

盒子的计算方式：你这个元素到底多大？

4.圆角边框

4个角

<style>
div{
    width: 100px;
    height: 100px;
    border: 10px solid red;
    border-radius: 100px;
}
</style>

5.盒子阴影

<!--margin: 0 auto; 居中
    要求：块元素，块元素有固定的宽度
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border-radius: 50px;
            box-shadow: 10px;
        }
       
    </style>

五.浮动

1.标准文档流

块级元素：独占一行

h1~h6    p   div    列表。。。

行内元素：不独占一行

span   a  img   strong....

行内元素可以被包含在块级元素中

2.display

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

1.这个也是一种实现行内元素排列的方式

3.float

1.左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border:1px #F00 dashed;
    display: inline-block;
    float: right;
}
.layer02{
    border:1px #00F dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border:1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border:1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

4.父级边框塌陷的问题

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:after{
    content: '';
    display: block;
    clear: both;
}

小结：

浮动元素后面增加空 div

简单，代码中尽量避免空div
设置父元素高度

简单，元素假设有了固定的高度，就会被限制
overflow

简单，下拉的一些场景避免使用
父类添加一个伪类 after(推荐)

写法稍微复杂一点，但是没有副作用，推荐使用！

5.对比

display

方向不可控制
float

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

六.定位

1.相对定位

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

<!--相对定位
相对于自己原来的位置进行偏移
 -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
            position: relative;/*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;

        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
            position: relative;
            bottom : -10px;
            right: 20px;
        }

    </style>
</head>
<body>

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

相对定位：position；relative；

相对于原来的位置，进行指定的偏移。相对定位的话，他仍然在标准文档流，原来的位置会被保留

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

方块定位

<!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: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #47a4ff;
        }
        .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>

2.绝对定位

定位：基于xxx定位上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移~
在父级元素范围内移动
相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留

<!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 #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
            position: absolute;
            right: 30px;
            top: -10px;

        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
        }

    </style>
</head>
<body>

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

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:red;
           position: absolute;
           right:0;
           bottom:0;
        }
        div:nth-of-type(2){/*fixed ,固定定位*/
           width: 50px;
           height: 50px;
           background: yellow;
           position: fixed;
           right: 0;
           bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

4.z-index

图层

<!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/a.jpg" alt="" width="300px" height="300px"></li>
        <li class="tipText">学习微服务</li>
        <li class="tipBg"></li>
        <li>时间：2099-2-1</li>
        <li>地点：火星</li>
    </ul>
</div>
</body>
</html>

#content{
   width:300px;
   padding: 0px;
   margin:0px;
   overflow: hidden;
   font-size:12px;
   line-height:25px;
   border: 1px #000 solid;
}
ul,li{
   padding: 0px;
   margin:0px;
   list-style: none;
}
/*父级元素相对定位*/
#content ul{
   position: relative;
}
.tipText,.tipBg{
   position:absolute;
   width: 300px;
   height: 25px;
   top: 280px;
}
.tipText{
   color: white;
   z-index: 999;
}
.tipBg{
   background: #000;
   opacity: 0.5;/*背景透明度*/
   
}