CSS学习|这一篇就够了|笔记|总结|（超详细讲解）

最新推荐文章于 2024-07-26 08:00:00 发布

程序员老茶

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量544

点赞数

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

本文链接：https://blog.csdn.net/qq_53431712/article/details/130134600

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：老茶icon
🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：CSS

内容/作用：知识点/设计/实验/作业/练习

学习：CSS基础

CSS

Cascading Style Sheets 层叠样式表

用于控制HTML中标签样式的语言。

可以精确到像素，用于美化HTML标签。

CSS语法

样式名:样式值;

选择器

用于选中页面中元素(标签)的工具

ID选择器

1.给某个标签添加id的属性，对其命名

2.通过**#id名**获取

通常用于获取某一个元素，id名称不要冲突

类选择器

1.给某些标签添加class的属性，对其命名

2.通过**.class名**获取

通过用于获取一组元素

元素选择器/HTML选择器/标签选择器

直接通过标签名获取元素，获取所有对应标签。

后代选择器

*表示所有元素

空格
- 得到所有子元素
>
- 得到第一层子元素

div p{
    /*得到div下的所有子元素p*/
}
div>p{
    /*得到div下第一层子元素p*/
}
div *{
    /*得到div中的所有子元素*/
}

群组选择器

使用逗号将多个选择器同时选中

p,#md,.mp{
    
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                color: green;
            }
            /* #test{
            color: red;
            } */
            #mp{
                color: red;
            }
            .mp{
                color: blue;
            }
            /* #md下的所有子标签p */
            #md p{
                font-size: 18px;
            }
            /* #md下的第一层标签p */
            #md>p{
                background-color: cadetblue;
            }
            #md,#md2{
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id="md">
            <p id="mp">这是一段文字</p>
            <p class="mp">这是一段文字</p>
            <p class="mp">这是一段文字</p>
            <p>这是一段文字</p>
            <p>这是一段文字</p>
            <div id="md2">
                <p>这是一段文字</p>
                <p class="mp" id="test" style="color: black;">这是一段文字</p>
                <p>这是一段文字</p>
            </div>
        </div>
    </body>
</html>

CSS写在哪里

写在某个标签的style属性中

<div style="样式名:值;">
    
</div>

写在head标签下的style标签中

<html>
    <head>
        <style>
            选择器{
                样式:值;
                样式:值;
            }
        </style>
    </head>
</html>

写在一个独立的css文件中

1.新建一个.css文件，在其中编写css样式

*{
    margin:0;
    padding:0;
}

2.在页面中通过link标签导入

<html>
    <head>
        <!--导入css文件-->
        <link rel="stylesheet" href="xxx.css">
    </head>
</html>

选择器的优先级

内嵌在style标签 >> id选择器 >> class选择器 >> 标签选择器

在选择某个元素时，尽量将其层次关系写具体，如a b c{}

常用样式

尺寸

只有块级元素才能设置尺寸。

如果要对某个行内元素设置尺寸，需要先将其转换为块级元素。

相关样式名	值	举例
width	px/百分比/vw	width:100px/50%/30vw;
height	px/百分比/vh	height:100px/50%/30vh;

背景background

样式名	作用	值
background-color	背景色	颜色的单词、十进制RGB、十六进制RGB
background-image	背景图	url(图片路径)
background-size	背景图片尺寸	cover覆盖、百分比。 cover会完全将区域覆盖。100%会完整显示图片。
background-position	背景图片位置	10px表示同时向下和向右移动10px
background-repeat	背景图片是否重复	默认重复 no-repeat不重复 repeat-x表示x轴重复 repeat-y表示y轴重复
background-attachment	背景图片固定	fixed表示将背景图片固定，不随滚动条滚动
background	背景样式简写	可以同时设置以上多个参数，如 background:#f00 url(图片地址) no-repeat center 表示图片能加载则显示图片，不能加载显示背景色，背景图不重复，居中显示

背景渐变

渐变色css代码自动生成https://uigradients.com

background: linear-gradient(to 方向, 颜色1, 颜色2，颜色3...)
方向：left  right   top  bottom
background: linear-gradient(to right, #fdeff9, #ec38bc)

边框border

边框会"套"在元素外层，元素原本大小不变，最终所占页面区域大小为元素大小+边框宽度

边框相关样式	作用	值
border-style	边框线条样式	solid、double、dashed、dotted
border-width	边框宽度	px
border-color	边框颜色	颜色的三种写法
border	同时设置所有边框线条、宽度和颜色	border:1px solid red
border-方向-样式	某方向的style或width或color，方向为left、right、top、bottom	border-left-color:red
border-方向	同时设置某边框线条、宽度和颜色	border-top:1px dotted blue;
border-上下方向-左右方向-radius	设置某个方向的边框为圆角。
border-radius	同时设置四个角为圆角。如果正方形，值为边长的一半，则为圆形
outline	轮廓。input文本框默认获得焦点时，会显示一个轮廓，通常设置为none去掉轮廓
border-collapse	合并相邻边框。通常用于合并表格中的td的边框。	表格{border-collapse:collapse}

字体

样式名	作用	值
font-size	字体大小	像素。默认16px，最小12px
font-weight	字体粗细	lighter细，bolder粗
font-family	字体字型	默认微软雅黑

文本

样式名	作用	值
color	文本颜色	颜色的三种写法
text-decoration	文本修饰	underline下划线 line-through删除线 overline上划线通常给页面中的所有a标签设置text-decoration:none去掉a标签默认的下划线
text-align	文本对齐方式	默认left左对齐，right右对齐，center居中
line-height	行高	设置为与文字相同大小时，行间距为0。"垂直居中"时，将行高设置为容器高度。
text-indent	首行缩进	根据文字大小设置缩进的像素。如默认文字16px，首行缩进2个字符，则设置为32px;
text-shadow	文本阴影	颜色水平位置垂直位置模糊程度。如#000 4px 5px 3px表示水平向右4px，垂直向下5px，模糊3px
letter-spacing	字符间距	像素
word-break	英文换行方式	默认break-word以单词为单位换行，不会拆分单词。 break-all以字母为单位换行，会拆分单词。

列表

样式名	作用	值
list-style-type	设置列表li前的标记	通常设置为none去除标记
list-style-position	设置列表li前的标记的位置	默认outside，标记位于li之外；inside表示标记位于li之中
list-style-image	设置列表li前的标记为图片	url(图片地址)

鼠标样式cursor

值	效果
pointer	指示链接的指针(手)
move	可移动的十字箭头
help	带问号的箭头
progress	带载入的箭头
wait	载入状态
crosshair	十字线
text	光标

伪类

表示某个元素的某种状态

用于对某些元素在不同的状态下呈现不同的效果

如a标签有访问前、悬停时、按下时、访问后四种状态对应四个伪类

a标签的伪类	作用
a:link	未访问时
a:hover	鼠标悬停
a:active	鼠标按下
a:visited	访问后

:hover可以适用于很多标签，如#xx:hover，表示鼠标悬停在id为xx的元素上时

追加内容，通过context属性编辑追加的内容，同时可以设置其他样式。

在某个元素之前或之后插入内容	说明
:after	之后
:before	之前

<!DOCTYPE html>
<html>
    <head>
        <style>
            p:after
            {
                content:"追加的内容";
                color:red;
                xx:xx;
            }
        </style>
    </head>

    <body>
        <p>My name is Donald</p>
        <p>I live in Ducksburg</p>
    </body>
</html>

显示方式display

控制元素的类型或是否显示。

值	作用
block	将元素设置为块级元素，这样元素就能独占一行，能设置尺寸
inline	将元素设置为行内元素，这样元素占一行中的一部分，不能设置尺寸
inline-block	将元素设置为行内块，这样元素占一行中的一部分，能设置尺寸
none	将元素不显示，不保留元素位置

浮动float

让某个元素脱离原本的位置，朝某个方向对齐

值	作用
left	向左浮动
right	向右浮动
none	清除浮动

float:left和display:inline-block的区别

相同点：都能让多个块级元素成为行内块。

display:inline-block

多个元素最终位于同一行内，可以设置尺寸，元素以下线对齐，保留该行位置，保留元素间的缝隙，后续元素为新的一行

在这里插入图片描述

float:left

多个元素最终位于同一行内，可以设置尺寸，元素以上线对齐，不保留该行位置，不保留元素间的缝隙，后续元素会紧邻

在这里插入图片描述

盒子模型

页面中的所有块级元素，都是一个"盒子"，每个"盒子"由元素自身、内边距padding、边框border、外边距marjin组成。

边框border：元素外的一圈

内边距padding：边框与元素自身之间的距离

外边距marjing：元素A的边框与元素B的边框之间的距离

在这里插入图片描述

盒子模型相关样式	作用
padding	内边距。1个参数表示同时设置4个方向。2个参数表示上下左右。3个参数表示上左右下。4个参数表示上右下左顺时针。
margin	外边距。1个参数表示同时设置4个方向。2个参数表示上下左右。3个参数表示上左右下。4个参数表示上右下左顺时针。如果值设置为auto，表示自动将所在的容器剩余距离除以2。
padding-方向	某个方向的内边距。方向可以是left、right、top、bottom
margin-方向	某个方向的外边距。

一个元素的所占位置是外边距+边框+内边距+元素自身大小。

如果让某个块级元素居中，使用margin:上下距离 auto;

盒子模型阴影

元素{
    box-shadow:#000 4px 4px 4px;
}

溢出overflow

处理子元素超出父元素的部分

值	作用
visible	默认，溢出部分显示
hidden	溢出部分隐藏
scroll	溢出部分使用滚动条控制

定位position

将元素以像素为单位调整位置

值	含义	作用
fixed	固定定位	让元素固定在页面的某个位置，不会页面的滚动而改变位置。
absulote	绝对定位
relative	相对定位

配合定位使用样式

	作用	值
left	元素距离页面左边界的左右距离	正值向右，负值向左
top	元素距离页面上边界的上下距离	正值向下，负值向上
right	元素距离页面右边界的左右距离	正值向左，负值向右
bottom	元素距离页面下边界的上下距离	正值向上，负值向下

文档流

页面中每个元素默认都有自己的位置，这个位置称为文档流。

如果某个元素脱离文档流，就会失去它原本所占的位置，后续元素就会顶替其位置。

可以通过浮动float、固定定位positon:fixed、绝对定位positon:absolute让元素脱离文档流。

脱离文档流后，通过改变left、right、top和bottom移动其位置。

固定定位fixed

让某个元素脱离文档流，默认根据页面的四个边界进行定位。

绝对定位absolute

让某个元素脱离文档流，根据已定位的父元素进行定位。如果没有已定位的父元素，会根据body定位。

相对定位relative

元素不会脱离文档流，根据它原本的位置进行定位，定位原点是元素本身的位置。

层叠z-index

对于已定位的元素，可以通过z-index调整层叠顺序，值是一个数字，越大离眼睛越近。

#md1{
    position:relative; 
    z-index:10;
}
#md2{
    position:relative; 
    z-index:0;
}

不透明度opacity

设置某个元素的不透明度，0~1之间的小说表示不透明度。1完全不透明，0完全透明。

如果只是定义背景透明时，使用rgba(red,green,blue,alpha)，alpha使用

div{
    /*让div中的所有内容都半透明，如文字*/
    background-color:#000;
    opacity:0.5;

    
    /*让div背景半透明，其中的内容不受影响*/
    background-color:rgba(0,0,0,0.5);
}

转换transform

改变元素的状态，如旋转、移动、缩放等

值
rotate(30deg)	顺时针2D旋转30度
rotateX/Y/Z(30deg)	沿X/Y/Z轴3D旋转30度
translateX/Y(50px)	朝X或Y轴平移50像素
translate(10px,30px)	朝右移动像素px,下移动30像素
scale(1.5)	缩放1.5倍

以上所有效果可以通过transform:效果1 效果2 … 同时设置

transform: rotate(30deg) translateX(100px) scale(1.2)

过渡transition

设置某个转换效果完成所需的时间等参数

相关样式	作用
transition-duration:3s	转换所需时间
transition-delay: 2s	延时生效
transition-timing-function:linear	时间函数，linear表示匀速
transition:4s 1s linear	在1s后，匀速在4s内完成过渡

自定义动画animation

1.定义动画的关键帧

@keyframes 动画名{
    0%{
        /*该阶段的样式*/
        样式名:值;
    }
    25%{}
    50%{}
    75%{}
    100%{}
}

2.给某个元素设置animation样式

#xxx{
    /*指定动画名*/
    animation-name:动画名;
	/*动画执行时间*/
    animation-duration:3s;
	/*延时*/
    animation-delay:3s;
    /*动画执行次数 infinite无限*/
    animation-iteration-count:4;
    /*动画时间函数 linear匀速  ease-in ease-out ease-in-out*/
    animation-timing-function:linear;
    
    /*简写 只写一个时间表示用时 写两个时间表示第一个是用时，第二个是延时*/
    animation:动画名 5s 2s infinite linear;
}

animation相关样式	作用
animation-name:动画名	执行指定动画
animation-duration:3s	动画执行时间
animation-delay:3s	动画延时时间
animation-iteration-count:3	动画执行次数，infinite表示无限
animation-timing-function:linear	动画执行时间函数，linear表示匀速
animation:动画名 5s 2s	简写。只写一个时间表示用时写两个时间表示第一个是用时，第二个是延时

滤镜filter

<div class="img_filter">
    <div style="filter: grayscale(100%);">灰度grayscale(100%)</div>
    <div style="filter: blur(2px);">模糊程度blur(2px)</div>
    <div style="filter: brightness(50%);">亮度brightness(50%)</div>
    <div style="filter: contrast(150%);">对比度contrast(150%)</div>
    <div style="filter: hue-rotate(180deg);">色相旋转hue-rotate(15deg)</div>
    <div style="filter: saturate(300%);">饱和度saturate(300%)</div>
    <div style="filter: sepia(100%);">深褐色sepia(100%)</div>
    <div style="filter: invert(100%);">颜色反转invert(100%)</div>
    <div style="filter: contrast(150%) saturate(150%) hue-rotate(30deg)">重叠滤镜</div>
</div>