CSS基础

小小の风铃

已于 2022-08-10 17:19:17 修改

阅读量90

点赞数

分类专栏： java 总学习笔记文章标签： css 前端 html

于 2022-06-27 15:16:11 首次发布

本文链接：https://blog.csdn.net/m0_53653954/article/details/125480500

版权

java 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

总学习笔记

4 篇文章 0 订阅

订阅专栏

前言

这是B站学习笔记
视频地址：https://www.bilibili.com/video/BV1Y7411K7zz

系列文章目录

1.HTML

文章目录

前言
系列文章目录
1. 什么是css
2. 快速入门
3.css的三种导入方式
4.选择器
5.美化网页元素
6、盒子模型
7、浮动
8、定位

1. 什么是css

Cascading Style Sheet 层叠级联样式表

CSS ： (美化网页)
字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

2. 快速入门

可将css代码写在 html <head> 标签中的<style>中

语法：

选择器 {
声明1；
声明2；
声明3；

}

规范：每一个声明最好以分号结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

css的优势

内容和表现分离
网页结构表现统一，可以实现代码的复用
样式丰富
利用SEO，容易被搜索引擎收录

3.css的三种导入方式

1.行内样式

在标签元素中，编写一个style属性，编写样式即可

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

<h1 style="color:red;">我是标题</h1>


</body>
</html>

2.内部样式

在<head>中的<style>标签中编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>


</body>
</html>

3.外部样式

css代码与html代码分离，css代码写在单独的文件中

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<h1>我是标题</h1>


</body>
</html>

优先级：就近原则，离元素最近的样式优先使用

**扩展：**外部样式两种写法

链接式：
html

<link rel="stylesheet" href="css/style.css">

导入式：
@import是CSS2.1特有的

 <style>
        @import url("css/style.css");
 </style>

4.选择器

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

4.1 基本选择器

标签选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        h1{
            color: #25af1f;
            background: #2353be;
            border-radius: 24px;/*圆角边框*/
        }
        p{
            font-size: 50px;
        }
    </style>
</head>
<body>

<h1>学Java</h1>
<p>p标签</p>

</body>
</html>

类选择器 class
格式： .class的名称{}
好处：可以多个标签归类，同一个class，可以复用

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

<!--    类选择器-->
    <style>
        .a{
            color: aquamarine;
        }
        .b{
            color: chartreuse;
        }
    </style>
</head>
<body>

<h1 class="a">标题1</h1>
<h1 class="b">标题2</h1>
<h1>标题2</h1>

<p class="b">P标签</p>

</body>
</html>

id 选择器
格式：#id名{}

id选择器中的id必须保证全局唯一！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
        #a{
            color: #25af1f;
        }
    </style>
</head>
<body>
<h1 id="a">标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级：

不遵循就近原则，优先级是固定的：
id选择器>class选择器>标签选择器

4.2、层次选择器

前提：html标签的树形结构

后代选择器：在某个元素的后代（包括此元素）
```
/*后代选择器*/
body p{
    background: red;
}
```

子选择器，该元素的所有儿子

/*子选择器*/
body>p{
    background: #25af1f;
}

相邻兄弟选择器，下一个对象
```
/*相邻兄弟选择器*/
.a + p {
    background: aqua;
}
```
为有class = a标签的下一个p标签有此样式
通用选择器：当前选中元素的向下的所有兄弟元素
```
/*通用选择器*/
.a~p{
background: antiquewhite;
}
```

4.3 结构伪类选择器

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

  <style>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: #25af1f;
    }

    /*ul的最后一个子元素*/
    ul li:last-child{
      background: blanchedalmond;
    }
    /*选中p1 ：定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选择父级元素的第一个子元素，并且要选中的元素和当前元素相同才会生效
    */
    /*p:nth-child(a){}
      选择当前p元素的父级元素，选择父级元素的第a个子元素，并且要选中的元素和当前元素相同才会生效
    */
    p:nth-child(1) {
      background: #1e6da4;
    }

    /*p:nth-of-type(a){}
      择当前p元素的父级元素，选择父级元素的第a个p元素
    */
    p:nth-of-type(1) {
      background: yellow;
    }

  </style>

</head>
<body>

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

</body>
</html>

4.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: #25af1f;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性选择器*/
        /*属性名[属性名=属性值(正则)]{}
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以2这个结尾

        */

        /*选中存在id属性的a标签*/
        a[id] {
            background: #2353be;
        }
        /*选中id=first的a标签*/
        a[id=first] {
            background: blanchedalmond;
        }
        /*class 中有links的a标签*/
        a[class*="links"] {
            background: antiquewhite;
        }
        /*选中href中以http开头的a标签*/
        a[href^=http] {
            background: yellow;
        }

    </style>

</head>
<body>

    <p class="demo">

        <a href="https://www.baidu.com" class="link item first" id="first">1</a>
        <a href="" class="link 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">6</a>
        <a href="/a.pdf">7</a>
        <a hraf="/abc.pdf">8</a>
        <a href="abc.doc">9</a>
        <a href="abcd.doc">10</a>

    </p>

</body>
</html>

5.美化网页元素

5.1、span标签

约定俗成，重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>

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

5.2、字体样式

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

    <style>
        body{
            font-family: Algerian, 楷体,serif;
            color: #1e6da4;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }

    </style>

</head>
<body>

<h1>什么是 CSS？</h1>
<p class="p1">
    CSS 指的是层叠样式表* (Cascading Style Sheets)
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
</p>
<p>
CSS 节省了大量工作。它可以同时控制多张网页的布局
外部样式表存储在 CSS 文件中
*：也称级联样式表。
</p>

<p>
    Love　　by Roy CroftI love you,Not for what you are,But for what I amWhen I am with you.I love you,Not only for whatYou have made of yourself,But for whatYou are making of me.I love youFor the part of meThat you bring out;I love youFor putting your handInto my heaped-up heartAnd passing overAll the foolish, weak thingsThat you can’t helpDimly seeing there,And for drawing outInto the lightAll the beautiful belongingsThat no one else had lookedQuite far enough to find.I love you because youAre helping me to makeOf the lumber of my lifeNot a tavernBut a temple;Out of the worksOf my every dayNot a reproachBut a song.I love youBecause you have doneMore than any creedCould have doneTo make me goodAnd more than any fateCould have doneTo make me happy.You have done itWithout a touch,Without a word,Without a sign.You have done itBy being yourself.Perhaps that is whatBeing a friend means,After all.
</p>

</body>
</html>

font-family：字体
font-size：字体大小
font-weight：字体粗细
color：字体颜色
font
- 第一个参数：字体风格
- 第二个参数：字体粗细
- 第三个参数：字体大小
- 第四个参数：字体样式

5.3、文本样式

颜色 color rgb rgba
文本对齐方式 text-align
首行缩进 text-indent
行高 line-height
单行文字上下居中：line-height=height
装饰 text-decoration
文本和图片水平对齐 vertical-align：middle;

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

    <!--
    颜色：
        单词
        RBG 0~F
        RGBA A:0~1 表示透明度

    text-align: 排版
        right:居右
        left:居左
        center:居中
    text-indent:首行缩进
        单位em表示字数，2em表示缩进两个字
    height: 300px;
    line-height: 300px;
        行高和块的高度一致就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.2);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: aqua;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接标签去下滑线*/
        a{
            text-decoration: none;
        }
        img,span{
            vertical-align: middle;
        }
    </style>

</head>
<body>

<a href="a.png">aaa</a>

<p class="l1">2131231231</p>
<p class="l2">2131231231</p>
<p class="l3">2131231231</p>

<h1>什么是 CSS？</h1>
<p class="p1">
  CSS 指的是层叠样式表* (Cascading Style Sheets)
  CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
</p>
<p class="p3">
  CSS 节省了大量工作。它可以同时控制多张网页的布局
  外部样式表存储在 CSS 文件中
  *：也称级联样式表。
</p>

<p>
  Love　　by Roy CroftI love you,Not for what you are,But for what I amWhen I am with you.I love you,Not only for whatYou have made of yourself,But for whatYou are making of me.I love youFor the part of meThat you bring out;I love youFor putting your handInto my heaped-up heartAnd passing overAll the foolish, weak thingsThat you can’t helpDimly seeing there,And for drawing outInto the lightAll the beautiful belongingsThat no one else had lookedQuite far enough to find.I love you because youAre helping me to makeOf the lumber of my lifeNot a tavernBut a temple;Out of the worksOf my every dayNot a reproachBut a song.I love youBecause you have doneMore than any creedCould have doneTo make me goodAnd more than any fateCould have doneTo make me happy.You have done itWithout a touch,Without a word,Without a sign.You have done itBy being yourself.Perhaps that is whatBeing a friend means,After all.
</p>

<p>
    <img src="a.png">
    <span>sadadasdadadasd</span>
</p>

</body>
</html>

5.4、阴影

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

5.5、超链接伪类

正常情况下：a, a:hover

 /*默认颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
            font-size: 50px;
        }

5.6、列表


#nav{
    width: 300px;
    background: #a4a4a3;;

}

.title{
    font-size: 18px;/*字体大小*/
    font-weight: bold;/*字体粗细(粗体)*/
    text-indent: 1em;/*缩进一个字体*/
    line-height: 35px;/*行高*/
    background: red;
}
/*ul li*/
/*
list-style:
    none:去掉无序列表的点和有序列表的数字
    circle:空心圆
    decimal:数字
    square:正方形

 */
ul{
    /*background: #a4a4a3;*/
}

ul li{
    /*行高*/
    line-height: 30px;
    /*去除列表前的点*/
    list-style: none;

}

a{
    /*去下滑线*/
    text-decoration: none;
    /*字体大小*/
    font-size: 14px;
    color: #000000;
}

a:hover{
    color: orange;
    /*加下滑线*/
    text-decoration: underline;
}

5.7、背景

背景颜色

背景图片

<style>
        div{
            width: 1000px;
            height: 700px;
            /*边框：粗细 线条形状 颜色*/
            border: 1px solid red;
            /*背景图片，默认是全部平铺的*/
            background-image: url("images/ml.jpg");
        }
        .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        .div2{
            /*垂直平铺*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }
 </style>

5.8、渐变

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

6、盒子模型

6.1、什么是盒子模型

margin: 外边距

padding: 内边距

border: 边框

6.2、边框(border)

边框的粗细
边框的样式
边框的颜色

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

    <style>

        body{
            margin: 0;
        }
        /*border:粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }

        h2{
            font-size: 16px;
            background: #3cbda6;
        }

        form{
            background: #82e3c9;
        }

        div:nth-of-type(1) input{
            border: 3px solid black;
        }

        div:nth-of-type(2) input{
            border: 3px dashed #7fda91;
        }

        div:nth-of-type(3) input{
             border: 2px dashed #11c744;
         }

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

6.3、内、外边距

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

    <style>

        body{
            margin: 0;
        }
        /*border:粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
            /*外边距上方为0 左右居中*/
            /*居中要求：外层是块元素，块元素有固定的宽度*/
            mar	gin: 0 auto;
        }
        /*
        margin:0;  上右下左都是0
        margin:0 1px;  上下都是0， 左右是1px
        margin:0 1px 2px 3px;  按上右下左的顺时针顺序
        */
        h2{
            font-size: 16px;
            background: #3cbda6;
            line-height: 30px;
            color: white;
            margin: 0 1px;
        }

        form{
            background: #82e3c9;
        }

        input{
            border: 1px solid black;
        }

        div:nth-of-type(1){
            padding: 10px 2px;
        }

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

盒子的计算方式：元素的大小？

$margin\ +\ border\ +\ padding\ +\ 内容宽度$

6.4 圆角边框

$b or d er - r a d i u s :$
参数单位 $p x$
一个参数：表示4个角
两个参数：分别表示左上右下和右上左下
四个参数：分别表示从左上开始顺时针四个角

圆圈： $border-radius\ =\ \frac{width}{2}\ =\ \frac{height}{2}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            border: 10px solid red;
            border-radius: 100px 100px 0px 0px;

        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

6.5、盒子阴影

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

  <style>
      div{
          width: 100px;
          height: 50px;
          border: 10px solid red;
          box-shadow: 10px 10px 100px blue;

      }
  </style>

</head>
<body>

<div></div>

</body>
</html>

7、浮动

7.1、标准文档流

块级元素：独占一行
```
h1~h6 p div 列表...
```
行内元素：不独占一行
```
span   a    img    strong...
```

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

7.2、 $d i s pl a y$

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

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

</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

这种方式也是实现行内元素排列的方式，但是我们多数情况下都使用float

7.3、浮动

左右浮动 float
参数：
- left：左浮动
- right: 右浮动

7.4、父级边框塌陷问题

chear

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

解决方案：

增加父级元素的高度
```
#father{
    border: 1px #000000 solid;
    heigth: 800px;
}
```
特点：简单，元素要是超出了父级元素的高度，则此方法无效

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

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

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

特点：简单，代码中尽量避免空div

$o v er f l o w$
```
在父级元素中增加一个overflow:hidden;
```
$o v er f l o w :$
$hi dd e n :$ 内容长度或超过固定值时，隐藏超出部分
$scro ll :$ 内容长度或超过固定值时，产生滚动条

特点：简单，但有些场景下网页回变得不美观
父类添加一个伪类：after
```
#father:after{
    /*添加一个空文本*/
    content:'';
    /*使空文本变成块元素*/
    display:block;
    /*禁止两侧浮动*/
    clear:both;
}
```
此种方法效果与增加一个空的<div>效果相同，但是不需要再原html代码中增加内容
特点：写法稍微复杂。但是没有副作用，推荐使用。

7.5、display与float对比

display: 浮动方向不可控制
float: 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

8、定位

8.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: #e8a323;
            border: 1px dashed #31c57e;
            /*相对定位：上下左右*/
            position: relative;
            /*向上提高20px*/
            top: -20px;
            /*向左平移20px*/
            left: -20px;
        }
        #second{
            background-color: #a6e823;
            border: 1px dashed #dc1543;
        }
        #third{
            background-color: #23e896;
            border: 1px dashed #be19d0;
            /*相对定位：上下左右*/
            position: relative;
            /*向下提高20px*/
            bottom: -20px;
            /*向右平移20px*/
            right: -20px;
        }
    </style>

</head>
<body>

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

</body>
</html>

相对定位： $p os i t i o n : re l a t i v e;$

相对与原来的位置，进行指定方向的移动，相对定位后，内容仍然在标准文档流中，不会产生塌陷，原来的位置会被保留

/*向下提高20px*/
bottom: -20px;
/*向右平移20px*/
right: -20px;
/*向下提高20px*/
bottom: -20px;
/*向右平移20px*/
right: -20px;

8.2、绝对定位

$p os i t i o n : ab so l u t e;$

定位：基于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;
    }
    #first{
      background-color: #e8a323;
      border: 1px dashed #31c57e;
    }
    #second{
      background-color: #a6e823;
      border: 1px dashed #dc1543;
      position: absolute;
    }
    #third{
      background-color: #23e896;
      border: 1px dashed #be19d0;
    }
  </style>

</head>
<body>

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

</body>
</html>

8.3、固定定位

$ position: fixed;$

<!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: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

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

</body>
</html>