学习css

米斯木

已于 2023-10-07 16:27:11 修改

阅读量45

点赞数

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

于 2023-05-05 20:00:59 首次发布

本文链接：https://blog.csdn.net/missmoonlight/article/details/130514086

版权

Java学习笔记专栏收录该内容

24 篇文章 0 订阅

订阅专栏

未来在开发中，虽然是后端开发，但是和前端的交互是不可避免的，所以得掌握一定基础的前端知识

CSS

英文：Cascading Style Sheets

中文：层叠样式表

作用：美化HTML标签，包括但不限于对标签的文本，背景，大小，位置等的美化

写CSS的位置

位置1：内联样式（写在body里面的开始标签中）
<body>
    <span style = "css代码">内联样式</span>
</body>
优先级最高，但代码冗余度大，复用性低，同时降低了代码的可读性

简单使用下可以，主要不在这里写

位置2：在head表中写style标签，在style中写CSS代码
<head>
    <style type="text/css">
        css代码
    </style>
</head>
优点：书写一遍，其他同类型就用写了

缺点：只能在当前网页中使用，其他网页中就不能使用了

位置3：写在CSS文件夹中的CSS文件中

在CSS文件中写CSS代码，在HTML的head标签中写link标签引入CSS文件，如此HTML和CSS便有了关联。此步骤在head标签中直接输入link就会有提示，直接回车，在href处写css文件的位置（相对位置）

选择器

作用：在CSS代码中寻找指定的HTML标签

分类：

1.基本选择器

统配选择器

*{

css代码

}

给当前网页中的所有标签设置属性

标签选择器

标签名{

CSS代码

}

给当前网页中的该标签（所有的）设置样式

class选择器
所有标签都可以设置class属性

.class值{

CSS样式

}

同理，给当前网页中所有class值为“.”后面值一样的设置CSS样式
<span class = "t1 t2">啦啦啦</span>
<b class = "t1">啦啦啦</b>
class属性值可以有多个，不同属性值之间用空格隔开
ID选择器

#id值{

css样式

}

2.高级选择器

伪类选择器
鼠标悬浮

hover

比如说网页中有一个文字，你鼠标放上去会改变样式，这就是鼠标悬浮
选择器:hover{
    鼠标放上去后改变的样式
}
交互

focus
选择器:focus{
交互时的样式
}
当用户使用鼠标点击、使用 Tab 键或其他方式将焦点移动到一个元素上时，该元素就处于 “focus” 状态。
first-of-type
选择器:first-of-type{
}
选择器中的第一个（一般不会写id的，id的只有一个，class之类的可以有多个）
last-of-type

选择器的最后一个

nth-of-type(n)

选择器的第n个

before

在这个选择器之前

content:"文本内容";

样式的一种

after

在次选择器之后

属性选择器

基本选择器[属性名]{

} 选择这个选择器下的有这个属性名的

基本选择器[属性名=属性值]{

} 选择这个选择器下的属性值为此的

子代选择器

父选择器子选择器{

}

父子之间用空格隔开

或

父选择器>子选择器{

}

选择器优先级

当选择器优先级相同时，谁在下听谁的

当选择器优先级不同时，听优先级高的

统配选择器 < 标签选择器 < class选择器 < id选择器 < 内联样式

现在我们终于找到了标签

接下来就是设置网页样式了

文本样式

字体大小默认16px

font-size 字体大小

color 颜色

六位调色法光的三原色:红,绿,蓝每个颜色的取值范围是000~255(十进制),00~FF 写法:

#红色绿色蓝色

#FF0000:红

#00FF00:绿

#0000FF:蓝

#000000:黑

#FFFFFF:白

rgb(); rgba(); a:透明度,0全透明,1不透明,取值范围0~1

font-style 字体样式

font-weight 字体粗细

font-family 字体

text-decoration 装饰线

line-height 行高

text-align 文本位置

背景样式

背景颜色：background-color

背景图片：background-image

背景大小：background-size

背景是否平铺：background-repeat

背景位置：background-position

元素类型

行内元素

行内块元素

块元素

通过display属性可修改元素类型

display：block；块元素独占一行，可修改宽高默认宽充满父容器

display：inline-block；行内块元素不独占一行，可修改宽高

display：inline；行内元素不独占一行，不可修改宽高

display：none；隐藏在网页上不会显示

盒子模型

定位

定位关键字：position

浏览器窗口定位

以浏览器可视化窗口做参考（说人话就是你浏览器能看到的大小，网页上哪些一直在右下角的小广告之类的就是浏览器定位）

属性：fixed

配合的属性：

left：标签距离浏览器左边的距离

right：标签距离浏览器右边的距离

top：距离顶部的距离

bottom：距离底部的距离

z-index：层级，范围（-99~99）

不保留标签原位置

相对定位

相对与标签的原位置做定位

属性：relative

配合的属性：还是那5个属性，只不过相对于原位置做参考来移动

会保留标签原位置

绝对定位

相对于最近的 上层做过定位的 父容器

属性：absolute

配合的属性：还是那5个属性只是参考物不同

浮动

float
    值:
        left
        right
注意:会导致空间塌陷,需要给其父容器class属性追加clear值,css处编写以下代码
            .clear:after{
                content: ".";
                display: block;
                clear: both;
                width: 0;
                height: 0;
                visibility: hidden;
            }