css基础(一文读懂css)

最新推荐文章于 2024-04-03 04:40:43 发布

一城烟雨452

最新推荐文章于 2024-04-03 04:40:43 发布

阅读量888

点赞数 30

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_65436886/article/details/137244304

版权

1.css简介

css是一种用于描述网页样式和布局的样式表语言。它与HTML结合使用，用于控制网页中各个元素的外观和排版。

2.css样式引入方式

2.1 行内样式

行内优先级最高，针对当前标签

2.2 行外头部引入

行外头部：style，针对当前的html的对应多个标签，行内最高，距离越近优先级越高

2.3 从html外部引入

html使用link从外部引入一个样式，外部的样式使用css编写，可以针对多个html，写样式时要先导入外部样式。

3.css选择器

3.1 通配、标签、类名和id选择器

* 通配选择器，所有的标签都可以选择到，书写形式*{}

标签选择器，标签选择器，如p或者span标签，p{}

. class 类名选择器在样式中的书写形式.类名{}

# id选择器书写形式#id名{}

继承的选择器优先级最低

3.2 符号选择器

,逗号	满足逗号左右一个就行,如span,p，是标签span或者p颜色都是红色
空格	子孙选择器，在其里面的标签如body span，选择body里的所有span标签
>子选择器	子选择器，只选择子，里层的不选如body>span，只选择子span标签，即span3和span4，里层的span1和span2不选
+	相邻下一个如#p5+span，类名为p5的下一个是span，选择该span
~	选择后续的如#p5~span，选择id为p5的后续的span，不用相邻

3.3 属性选择器

[attr]	拥有属性
[attr=]	拥有且值相等,如[id="p3"]，拥有id属性且属性为p3
[attr^=]	拥有且以值开头，如[id^="p"]，拥有id属性且以p开头
[attr$=]	拥有且以值结尾，如[id$="3"]，拥有id属性且以3结尾

3.4 伪类选择器

伪类选择器在正常选择器之后使用

状态：普通样式鼠标滑入:hover 鼠标点击:active

通常先写普通样式，在写鼠标划入的样式，最后写鼠标点击的样式，顺序不能相反

顺序：

:first-of-type	第一个
:last-of-type	最后一个
:nth-of-type(n)	正数第n个
:nth-last-of-type(n)	倒数第n个
:nth-of-type(odd)	从1开始的奇数
:nth-of-type(even)	从1开始的偶数

4.css包围盒

css 中的包围盒（Box Model）是指用来描述 HTML 元素在页面上所占空间的模型。

4.1 内容区域（Content Area）

内容区域是元素实际包含内容的区域，比如文本、图片等。内容区域的大小可以通过设置元素的宽度（width）和高度（height）来控制。

4.2 内边距（Padding）

内边距是内容区域与边框之间的空白区域，用于控制元素内容与边框之间的距离。可以通过设置 padding 属性来控制内边距的大小。

4.3 边框（Border）

边框是包围在内容区域和内边距周围的线条或者边界，用于界定元素的边界。可以通过设置 border 属性来定义边框的样式、宽度和颜色。

4.4 外边距（Margin）

外边距是元素边框与相邻元素之间的空白区域，用于控制元素与其他元素之间的距离。可以通过设置 margin 属性来定义外边距的大小。

更改包围盒计算方式：box-sizing: border-box 给定宽高包含边框和内补。

5.css样式属性

5.1 font字体

font-family	字体如黑体、楷体、仿宋，默认使用的是系统有的字体，如果系统没有默认使用微软雅黑
font-size	字体大小
font-weight	字体粗细 400默认，700bold
font-style	字体样式斜体italic normal正常

5.2 text文本相关

transform	capitalize首字母大写 lowercase全小写 uppercase全大写
align	left靠左 right靠右 center居中
indent	缩进 2em代表缩进两个当前的字体大小
decoration	常用none 去掉下划线，如a(是一个链接，会有下划线)标签的文本百度这两个字，将下划线去掉)

5.3 背景

background-color	背景色
background-image	背景图	使用了url()函数，背景图片，优先级高
background-repeat	重复	常用no-repeat，图片小，可以重复可以repeat-x和repeat-y，但通常都使用一个图片，大的图片没有必要重复
background-position	位置	支持left right top bottom center 也支持像素 100px 200px
background-size	大小	100%铺满，contain长边完全展示短边补空，cover 短边完全展示长边隐藏

5.4 列表

list-style：

type：circle空心圆，disc实心圆

square方块，lower-alpha小写字母，lower-roman罗马数字

position：outside外侧，inside内侧

list-style:none 去除所有样式(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体文本背景列表</title>
    <style>
        /* *通配符选择器，所有标签都可以选择上 */
        /* *{
            font-family: "仿宋", "黑体";
            font-size: 20px;
            font-weight: 400;
            font-style: italic;
            
        } */
        /* 标签选择器，span标签可以选择 */
        /* span:nth-of-type(1){
            font-family: "楷体";
            font-weight: bold;
        }
        span:nth-last-of-type(2){
            font-family: "黑体";
            font-size: 25px;
            font-style: normal;
        } */
        /* p:nth-of-type(1){
            text-transform: uppercase;
            text-align: center;
            text-indent: 2em;
            
        }
        a{
            text-decoration: none;
        } */

        /* .container{
            width: 300px;
            height: 300px;
            background-color: aqua;
            background-image: url(./img/img1.png);
            background-repeat:no-repeat;
            background-position: center;
            background-size: contain;
        } */

        ul,ol,li{
            list-style-type: lower-alpha;
            list-style-position: inside;
            /* list-style: none; */
        }
    </style>
</head>
<body>
    
     <!-- <span>span1</span>
     <span>span2</span>
     <span>span3</span>

     <p>hello1</p>
     <p>hello2</p>
     <p>hello3</p>
     <p>hello4</p>
     <p>hello5</p>
     <a href="">百度</a> -->
     <p class="container"></p>
     <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
     </ul>
     <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
     </ol>
</body>
</html>

6.css的显示display

inline	行内，不能给宽高
block	块，可以给宽高
inline-block	多个块在一行，块可以给宽高
none	隐藏

7.css的定位

position定位

relative	相对定位参考文档流，就是参考静态定位
absolute	绝对定位参考位置是外层的第一个非静态
fixed	固定定位参考浏览器窗口
sticky	粘性定位没有达到粘性位置-相当于静态定位达到粘性位置，相当于固定定位
z-index	距离眼睛的位置，该块显示的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        div{
            /* 默认为静态定位：从上到下，从左到右 */
            width: 100px;
            height: 100px;
            background-color: aqua;
            
        }
        .relative{
            width: 90px;
            height: 90px;
            background-color: blue;
            position: relative;
            left: 10px;
            bottom: 20px;
        }
        .relative1{
            width: 50px;
            height: 50px;
            background-color: brown;
            position: relative;
            left: 20px;
            top: 10px;
        }
        .abs{
            width: 50px;
            height: 50px;
            background-color: burlywood;
            position: absolute;
        }
        .abs2{
            width: 20px;
            height: 20px;
            background-color: cadetblue;
            position: absolute;
            left: 10px;
            bottom: 30px;
        }
        .fixed{
            width: 100%;
            height: 60px;
            
            background-color: lightpink;
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        .sticky{
            width: 100%;
            background-color: plum;
            position: sticky;
            bottom: 20px;
            top: 60px;
            z-index: 555;
        }
    </style>
</head>
<body>
    <div class="fixed">fixed</div>
    <!-- 
        position
        静态：static
        相对定位：relative，参考文档流，就是参考静态定位
        绝对定位：absolute，参考位置是外层的第一个非静态
        fixed 固定定位，参考浏览器窗口
        sticky 粘性定位 没有达到粘性位置-相当于静态定位；达到粘性位置，相当于固定定位

        z-index 距离眼睛的位置，该块显示的优先级
     -->
    <div>static</div>
    <div>static</div>
    <div>static</div>
    <div>static</div>
    <div>static</div>
    <div>static</div>
    <div>static</div>
    <div>static</div>
    <div>static</div>

    <hr>
    <div class="sticky">sticky</div>
    <hr>

    <div class="relative">rel1</div>
    <div class="relative relative1">rel2</div>

    <div class="abs">abs1
        <div class="abs abs2">abs2</div>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

8.css的浮动与清除

浮动：float：left 左浮动-上一个左浮动的右侧

right 右浮动-上一个右浮动的左侧

清除：clear：left 左边不能有左浮动

right 右边不能有右浮动

both 清除左右浮动，一般使用一个标签清除浮动，且该标签不占用位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动与清除</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            text-align: center;
        }
        .div1{
            float: left;
            background-color: lightcoral;
            text-align: center;
        }
        .div2{
            float: left;
            background-color: lightcoral;
            text-align: center;
            clear: left;
        }
        .div3{
            float: left;
            background-color: lightcoral;
            text-align: center;
            clear: left;
        }
        .div4{
            float: right;
            background-color: lightcoral;
            text-align: center;
            clear: left;
        }
        .div5{
            float: right;
            background-color: lightcoral;
            text-align: center;
            clear: right;
        }
        .div6{
            float: right;
            background-color: lightcoral;
            text-align: center;
            clear: right;
        }
        .clear{
            width: 0;
            height: 0;
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 
        浮动 float
                left 左浮动-上一个左浮动的右侧
                right 右浮动-上一个右浮动的左侧
            clear清除
                left 左边不能用左浮动
                right 右边不能有右浮动
                both 清除左右浮动，一般使用一个标签清除浮动，且该标签不占用位置
     -->
     <div class="div1">div1</div>
     <div class="div2">div2</div>
     <div class="div3">div3</div>
     <div class="div4">div4</div>
     <div class="div5">div5</div>
     <div class="div6">div6</div>
     <div class="clear"></div>
     <div>div7</div>
</body>
</html>

9. css自定义字体

在头部样式：@font-face 自定义字体名，定义字体名字和字体路径

.自定义的字体名，使用自定义字体

使用外部字体：<link rel="stylesheet" href="css文件路径">

然后可以直接使用类名来调用(要写上两个类名iconfont和使用的图标名)相应的字体

如果想要变色，可以设置鼠标划上的颜色span:hover{color:lihhtcoral;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义字体</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        /* @font-face {
            font-family:"python2401" ;
            src: url();
        }
        .myfont{
            font-family: "python2401" !important;
            font-size: 60px;
            color: lightcoral;
        } */
        span:hover{
            color: lightcoral;
        }
    </style>
</head>
<body>
    <!-- 
        字体是有版权的
        可以使用iconfont阿里的免费字体，下载代码，使用的是.css和font文件
        有三种方式：unicode font class 
        unicode不支持多色，使用@font-face来自定义字体，包括字体名字和字体路径，
            然后使用.myfont来使用自定义字体
        第三种使用方便，在外边<link rel="stylesheet" href="css文件路径">，
            然后可以直接使用类名来调用(要写上两个类名iconfont和使用的图标名)相应的字体，如果想要变色，可以设置鼠标划上的颜色span:hover{color:lihhtcoral;}
     -->
     <span class="iconfont icon-shouyebeifen"></span>
     <span class="iconfont icon-shouye"></span>
</body>
</html>

10. css的渐变

transition 如：transition: all 0.5s linea，all所有属性，0.5s时间，linear匀速

transform旋转，rotate()旋转度数，trandlateX()X方向偏移多少，scale()缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
    <style>
        .div1{
            width: 100px;
        }
        .d1{
            height: 20px;
            background-color: lightblue;
        }
        .d2{
            height: 0px;
            background-color: lawngreen;
            /* 渐变 all所有属性 0.5s内完成 linear匀速 */
            transition: all 0.5s linear;

        }
        .d1:hover~.d2{
            height: 150px;
            /* transform旋转 rotate()旋转度数  不能写多个 trandlateX()X方向偏移多少*/
            /* transform: rotate(90deg); */
            /* transform: translateX(200px); */
            /* scale()缩放 */
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="d1"></div>
        <br><br><br><br><br><br><br><br><br><br>
        <div class="d2"></div>
    </div>
</body>
</html>

11. css旋转

自定义旋转

@keyframes 自定义旋转名，中间的百分之几、旋转多少度都是自定义

使用旋转，animation: 自定义选择的名字时间 linear匀速 infinite无限(不写只旋转一次持续旋转) reverse(不写是顺时针)反方向选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转</title>
    <style>
        .animation{
            width: 100px;

        }
        /* 自定义旋转 @keyframes 名字 中间的百分之几、旋转多少度都是自定义的 */
        @keyframes myrotate{
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        .animation{
            width: 48px;
            height: 48px;
            /* 使用旋转animation: 自定义选择的名字 时间 linear匀速 infinite无限(不写只旋转一次持续旋转) reverse(不写是顺时针)反方向选择*/
            animation: myrotate 1s linear infinite reverse;
        }
    </style>
</head>
<body>
    <div class="animation">
        <img src="../img/taiji.png" alt="">
    </div>
</body>
</html>

12.css弹性容器

css弹性容器是指通过 CSS Flexbox（弹性盒子布局）属性来控制其子元素的布局方式的容器。Flexbox 是一种弹性布局模型，可以让容器内的子元素能够以灵活的方式排列、对齐和分布空间。

12.1 display

设置为display: flex 的元素会变成一个弹性容器，其子元素会按照 Flexbox 规则进行布局。另外，display: inline-flex; 也可以创建一个行内的弹性容器。

12.2 flex-direction

指定弹性容器内子元素的排列方向。常见的取值包括row（水平方向）、colum（垂直方向）、row-reverse（反转水平方向）和colum-reverse（反转垂直方向）。

12.3 justify-content

定义了弹性容器内子元素沿着主轴（Flexbox 的排列方向）的对齐方式。常见的取值包括flex-start（起始位置）、flex-end结束位置）、center（居中）、space-between（两端对齐，项目之间的间隔相等）和space-around（每个项目两侧的间隔相等）。

12.4 align-items

定义了弹性容器内子元素沿着交叉轴（与 Flexbox 的排列方向垂直的方向）的对齐方式。常见的取值包括flex-start（起始位置）、flex-end（结束位置）、center（居中）。

12.5 align-content

仅在有多行的情况下生效，定义了多根轴线（Flexbox 的排列方向的垂直方向）的对齐方式。常见的取值包括flex-start、flex-end、center、space-between、space-around 。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性容器</title>
    <style>
        .container{
            width: 300px;
            height: 300px;
            /* border: 1px solid blue; */
            
            display: flex;
            /* 主轴方向: 默认是column列排序 column-reverse 行排序row row-reverse*/
            /* flex-direction: column; */
            /* flex-direction: column-reverse; */
            flex-direction: column;
            /* flex-direction: row-reverse; */

            /* nowrap wrap wrap-reverse */
            /* flex-wrap: wrap; */

            /* justify-content 主轴 flex-start主轴开始位置 flex-end主轴结束位置 center主轴居中
                space-between中间有空白  space-around两边中间都有空白
                align-items交叉轴 flex-start交叉轴起始位置 flex-end交叉轴结束 center居中
            */
            /* justify-content: center; */
            /* align-items: center; */

            justify-content: space-around;
            align-items: center;
        }
        /* .container div{
            width: 100px;
            height: 100px;
            line-height: 60px;
            text-align: center;
            background-color: lightcoral;
            
        } */
        
        .container .c1{
            /* c1是一个容器，容器的展示为flex，将flex-directon设为行，再设置位置 */
            /* 块在容器中移动位置 */
            width: 300px;
            height: 100px;
            display: flex;
            flex-direction: row;
            border: 1px solid blue;
            justify-content: flex-start;
        }
        .container .c2{
            width: 300px;
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            border: 1px solid blue;
            
        }
        .container .c3{
            width: 300px;
            height: 100px;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            border: 1px solid blue;
        }
        .container .c1 div{
            
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        .container .c2 div{
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        .container .c3 div{
            width: 100px;
            height: 100px;
            
            
            flex-direction: row;
            background-color: lightcoral;
            
        }
    </style>
</head>

<body>
    <!-- 
        display:flex
        主轴
        交叉轴
     -->

    <div class="container">
        <div class="c1">
            <div>1</div>
        </div>
        <div class="c2">
            <div>2</div>
        </div>
        <div class="c3">
            <div>3</div>
        </div>
        
    </div>

</body>

</html>