【从零开始的Java开发】2-8-2 CSS入门：CSS选择器、样式

文章目录

CSS简介

CSS，即Cascading Style Sheets，层叠样式列表。
层叠，表示我们可以对一个标签、对象进行多次的、重复的格式设置。

CSS的作用：

结构域样式分离的方式，便于后期维护与改版
可以用多套样式，使网页有任意样式切换的效果
使页面载入得更快、降低服务器的成本

CSS基础

样式表分类：外部、内部、行内样式

样式文件结构：html中的任何标签都可以是样式选择器。
在这里插入图片描述
代码：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>indextitle>
    <style type="text/css">
    p {
        background-color: red;
        font-size: 40px;
    }
    style>
head>

<body>
    <p>https: //www.csdn.net/p>
    <p>CSDNp>
    <p>一些废话一些废话一些废话一些废话一些废话一些废话一些废话p>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在这里插入图片描述

CSS选择器

作用：用来选择（找到）需要添加样式的位置
常用选择器：标签选择器、（归）类选择器class

类选择器要以.开头。

代码：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>indextitle>
    <style type="text/css">
    p {
        background-color: red;
        font-size: 40px;
    }

    .p1 {
    	font-family: 隶书;
        background-color: blue;
        font-size: 35px;
    }
    style>
head>

<body>
    <p>https: //www.csdn.net/p>
    <p>CSDNp>
    <p class="p1">一些废话一些废话一些废话一些废话一些废话一些废话一些废话p>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在这里插入图片描述

背景设置

在这里插入图片描述
scroll：背景是随滚动条滚动
fixed：背景不是随滚动条滚动

添加代码：

body {
        background-color: yellowgreen;

        background-image: url("../img/2.jpg");
        /*url(位置)*/
        background-repeat: no-repeat;
        /*图片不重复*/
        background-attachment: scroll;
        /*图片随文字滚动*/
        background-position: top center;
        /*图片在最上居中*/
    }
1
2
3
4
5
6
7
8
9
10
11
12

在这里插入图片描述

使用外部样式表

外部样式表：新建一个文档，里面全写css，然后通过link插入到html代码中。
作用：使网页的表示层与结构层彻底分离。

如：

<link rel="stylesheet" type="text/css" href="index.css">
1

link：用于定义文档与外部资源的关系
rel：是relationship的缩写，也就是“关系”
type：定义css样式文件的类型
href：引用具体的文件

如上面的代码可以改成：

这是html文件：

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>indextitle>
    <link rel="stylesheet" type="text/css" href="index.css">
    style>
head>

<body>
    <p>https: //www.csdn.net/p>
    <p>CSDNp>
    <p class="p1">一些废话一些废话一些废话一些废话一些废话一些废话一些废话p>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这是css文件：

p {
    background-color: red;
    font-size: 40px;
}

.p1 {
    font-family: 隶书;
    background-color: blue;
    font-size: 35px;
}

body {
    background-color: yellowgreen;

    background-image: url("../img/2.jpg");
    /*url(位置)*/
    background-repeat: no-repeat;
    /*图片不重复*/
    background-attachment: scroll;
    /*图片随文字滚动*/
    background-position: top center;
    /*图片在最上居中*/
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

样式

文本类样式

颜色的表示方法：

英语单词
十六进制
RGB

文本样式：对齐方式、文本修饰、文本转换、文本缩进等
作用：美化和修饰

在这里插入图片描述
ltr：左对齐
rtl：右对齐
justify：两端对齐

如果针对的是字母和汉字，direction和text-align的效果完全一样。
如果针对的是数字，则direction的rtl是从右向左写，而text-align的right是向右对齐。

direction：书写方向

在这里插入图片描述
capitalize：首字母大写。
nem：缩进n个字符的距离。

字体类样式

字体样式：font系列。
作用：定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）

在这里插入图片描述
italic：绝大多数可以变为斜体字（但有的不行——不过一般都是用这个）
oblique：倾斜显示

列表样式

在这里插入图片描述
list-style-type可以用到的值：

列表使用频率很高，经常用于菜单、规律性展示等应用场景。

伪类样式

通常情况，超级链接上设置的样式，称为伪类。
实际上，伪类是一种状态，超级链接是一种标签——它们经常一起使用。

math.combinatorics-0.0.6.zip

.zip

0星超过10%的资源 78KB

下载

伪类是用在超链接上的效果比较多，但超链接不是伪类。
伪类是选择器。
冒号:以后的是伪类

关于伪类选择器：
在这里插入图片描述
与超级链接相关的举例

html代码：

<body>
    <a href="#">伪类a>
body>
1
2
3

css代码：

/*没被访问的时候*/
a:link {
    color: blue;
}

/*已经访问后*/
a:visited {
    color: greenyellow;
}

/*鼠标放上去的时候*/
a:hover {
    color: orangered;
    font-size: 30px;
}

/*激活：点击的时候*/
a:active {
    color: darkblue;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

伪类的分类

状态伪类
结构性伪类

状态伪类：我们选择的目标对象的状态发生变化时，进行的样式改变。
如：鼠标悬停后的状态变化，鼠标点击后的状态变化。

结构性伪类：
在这里插入图片描述
伪元素选择器

CSS其他选择器

在这里插入图片描述

class选择器：.开头
id选择器：#开头

CSS选择器的优先级

选择的范围越小，优先级越高。
!important一般不会使用，因为会干扰逻辑。
如果同级别，则以后出现为准。

相关阅读:
SD-WAN技术：优化国内外服务器访问的关键
nodejs开发的小程序老年人健康预警系统
lighthouse VERTEX50对超纯水水质监测
利用bert4keras实现多任务学习
计算机操作系统-第九天
[算法]滑动窗口
给博客园的寄语
Python | 打包 .py 为可执行文件.exe
IoT 边缘集群基于 Kubernetes Events 的告警通知实现（二）：进一步配置
FlinkSQL类型系统

原文地址：https://blog.csdn.net/karshey/article/details/126366876