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

最新推荐文章于 2024-05-19 10:58:35 发布

karshey

最新推荐文章于 2024-05-19 10:58:35 发布

阅读量317

点赞数

分类专栏：从零开始的Java开发文章标签： css css3 前端

本文链接：https://blog.csdn.net/karshey/article/details/126366876

版权

从零开始的Java开发专栏收录该内容

31 篇文章 4 订阅

订阅专栏

文章目录

CSS简介

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

CSS的作用：

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

CSS基础

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

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

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

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

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

</html>

在这里插入图片描述

CSS选择器

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

类选择器要以.开头。

代码：

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

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <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>CSDN</p>
    <p class="p1">一些废话一些废话一些废话一些废话一些废话一些废话一些废话</p>
</body>

</html>

在这里插入图片描述

背景设置

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

添加代码：

body {
        background-color: yellowgreen;

        background-image: url("../img/2.jpg");
        /*url(位置)*/
        background-repeat: no-repeat;
        /*图片不重复*/
        background-attachment: scroll;
        /*图片随文字滚动*/
        background-position: top center;
        /*图片在最上居中*/
    }

在这里插入图片描述

使用外部样式表

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

如：

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

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

如上面的代码可以改成：

这是html文件：

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

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

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

</html>

这是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;
    /*图片在最上居中*/
}

样式

文本类样式

颜色的表示方法：

英语单词
十六进制
RGB

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

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

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

direction：书写方向

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

字体类样式

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

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

列表样式

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

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

伪类样式

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

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

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

html代码：

<body>
    <a href="#">伪类</a>
</body>

css代码：

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

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

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

/*激活：点击的时候*/
a:active {
    color: darkblue;
}