Java登陆第二十一天——CSS

合集 - Java登陆(70)
1.Java登陆第一天——Mysql安装2.Java登陆第一天——Maven入门3.Java登陆第二天——SQL之DDL4.Java登陆第二天——SQL之DML5.Java登陆第三天——SQL之DQL(一)基础查询、聚合函数、分组查询6.Java登陆第四天——SQL之DQL(二)分页查询、多表查询、自连接7.Java登陆第五天——SQL之DQL(三)子查询8.Java登陆第六天——SQL之表复制，表去重，合并查询9.Java登陆第六天——SQL之SQL(四)外连接10.Java登陆第六天——SQL之约束11.Java登陆第七天——SQL之事务12.Java登陆第七天——SQL之事务隔离13.Java登陆第八天——SQL之DCL14.Java登陆第九天——JDBC(一)DriverManager、Connection、Statement15.Java登陆第十天——JDBC(二)ResultSet16.Java登陆第十一天——JDBC(三)PreparedStatement、CLOB、BLOB17.Java登陆第十二天——网络编程(一)网络的概念18.Java登陆第十二天——网络编程(二)InetAddress、Socket19.Java登陆第十三天——网络编程(三)DatagramSocket20.Java登陆第十四天——网络编程(四)韩顺平网络编程21.Java登陆第十五天——网络编程(四)韩顺平网络编程22.Java登陆第十六天——网络编程(四)韩顺平网络编程23.Java登陆第十七天——网络编程(四)韩顺平网络编程完成24.Java登陆第十七天——正则表达式25.Java登陆第十八天——Java8之Lambda表达式26.Java登陆第十九天——HTML规范与语法27.Java登陆第二十天——HTML常用标签
28.Java登陆第二十一天——CSS
29.Java登陆第二十二天——JavaScript入门30.Java登陆第二十三天——JavaScript对象、JSON、事件31.Java登陆第二十四天——JavaScriptBOM、DOM32.Java登陆第二十五天——Tomcat、认识JavaWeb项目33.Java登陆第二十六天——Http34.Java登陆第二十六天——Servlet35.Java登陆第二十七天——多种方法Servlet映射、Content-Type36.Java登陆第二十八天——Servlet生命周期37.Java登陆第二十九天——Servlet继承关系，service和doGet的区别38.Java登陆第二十九天——ServletConfig和ServletContext39.Java登陆第二十九天——HttpServletRequest和HttpServletResponse40.Java登陆第二十九天——请求转发和响应重定向41.Java登陆第三十天——Cookie和Session42.Java登陆第三十天——域对象43.Java登陆第三十一天——Filter44.Java登陆第三十一天——监听器45.Java登陆第三十二天——AJAX和异步46.Java登陆第三十二天——前端工程化47.Java登陆第三十二天——ES6(一)let、const、模板字符串、解构表达式、箭头函数48.Java登陆第三十三天——ES6(二)reset、spread、Class类语法糖49.Java登陆第三十三天——ES6(二)浅拷贝、深拷贝50.Java登陆第三十三天——ES6(二)模块、模块化51.Java登陆第三十四天——Node.js安装、npm配置、npm命令52.Java登陆第三十四天——使用Vite创建工程化的Vue3项目53.Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）54.Java登陆第三十五天——VUE初始页面解析55.Java登陆第三十六天——VUE3引入CSS56.Java登陆第三十六天——VUE3响应式入门、setup语法糖57.Java登陆第三十七天——VUE3插值表达式、文本渲染、属性渲染、事件绑定58.Java登陆第三十七天——VUE3响应式基础、条件渲染、列表渲染59.Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)60.Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)61.Java登陆第三十九天——Router路由入门62.Java登陆第三十九天——Router编程式路由，路由传参63.Java登陆第四十天——Router路由守卫64.Java登陆第四十天——Router路由守卫练习65.Java登陆第四十一天——Promise、async关键字、await关键字66.Java登陆第四十一天——Axios67.Java登陆第四十二天——Axios拦截器68.Java登陆第四十二天——跨域69.Java登陆第四十三天——Pinia70.Java登陆第四十四天——跟写微头条遇到的问题
收起

CSS

CSS是一种可以给HTML每个元素添加样式的语言。

不必记住每一个CSS，使用查阅文档即可。菜鸟教程CSS文档

CSS语法

image

选择器是需要改变样式的HTML元素。

每一条声明由属性和值组成，分号结尾，并由花括号包括。

属性：指的是样式属性，并不是HTML中的标签属性

如何在HTML中使用CSS

行内式

定义在元素的style属性中。

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p style="font-size:50px;...">单位是像素</p>

</body>
</html>

运行效果如下：
image

内嵌式

定义在头部，使用<style></style>包括

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 50px;
        }
    </style>
</head>
<body>

<p>单位是像素</p>

</body>
</html>

运行效果如下：
image

外部引入

通过头部中link标签引入。菜鸟link标签手册

在目录中新建.css文件
image

/*Test.css文件  这是CSS的注释*/
p{
    font-size: 50px;
}

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="Test.css" rel="stylesheet">
</head>
<body>

<p>单位是像素</p>

</body>
</html>

运行效果如下：
image

CSS选择器

因为CSS是另一种语言，所以需要选择器来选择HTML中的元素。从而更改其样式。
CSS选择器更多用法1
CSS选择器更多用法2

标签选择器

通过标签名选择元素，修改其样式

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 50px;
        }
    </style>
</head>
<body>

<p>标签选择器会修改所有被选择标签的样式</p>
<p>标签选择器会修改所有被选择标签的样式</p>
<p>标签选择器会修改所有被选择标签的样式</p>

</body>
</html>

运行效果如下：
image

ID选择器

通过#id来选择，标签中属性ID为某的元素，修改其样式

ID不要以数字开头

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p2{
            font-size: 50px;
        }
    </style>
</head>
<body>

<p>标签选择器会修改所有被选择标签的样式</p>
<p id="p2">ID选择器会选择名为某ID的元素</p>
<p>标签选择器会修改所有被选择标签的样式</p>

</body>
</html>

运行效果如下：
image

CLASS选择器

通过.class来选择，标签中属性CLASS为某的元素，修改其样式

CLASS可以理解为组，某组元素。(某类也行，并不是JAVA中类的意思)

CLASS不要以数字开头

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p{
            font-size: 50px;
        }
    </style>
</head>
<body>

<p>id仅能为1个标签</p>
<p class="p">class可以是多个标签</p>
<p class="p">class可以是多个标签</p>

</body>
</html>

运行效果如下：
image

如为一个元素声明多个CLASS，用空格分隔类名。

CSS浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

其初衷是为了解决文字环绕图片问题，元素浮动后，一定不会把文字挡住。菜鸟教程浮动

现有代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #outdiv{
            height: 500px;
            width: 500px;
            background: antiquewhite;
        }
        .indiv{
            height: 100px;
            width: 100px;
        }
        .d1{
           background: #c200ff;
        }
        .d2{
            background: #feff0e;
        }
        .d3{
            background: #00ff4b;
        }
    </style>
</head>
<body>
    <div id="outdiv">
        <div class="indiv d1">div1</div>
        <div class="indiv d2">div2</div>
        <div class="indiv d3">div3</div>
    </div>

</body>
</html>

运行效果如下：
image

需求：div1，div2，div3处于同一行

向右浮动解析：

image

至此，修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #outdiv{
            height: 500px;
            width: 500px;
            background: antiquewhite;
        }
        .indiv{
            height: 100px;
            width: 100px;
        }
        .d1{
           background: #c200ff;
            float: right;
        }
        .d2{
            background: #feff0e;
            float: right;
        }
        .d3{
            background: #00ff4b;
            float: right;
        }
    </style>
</head>
<body>
    <div id="outdiv">
        <div class="indiv d1">div1</div>
        <div class="indiv d2">div2</div>
        <div class="indiv d3">div3</div>
    </div>

</body>
</html>

运行效果如下：
image

如果是向左浮动

image

CSS定位

CSS 的 Position（定位），可以定义元素的位置。菜鸟教程定位

Position值 描述
static 默认定位
absolute 绝对定位，填写多少就是多少
relative 相对定位，相对于之前的位置
fixed 相对定位，相对于浏览器的位置

现有代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .indiv {
            height: 100px;
            width: 100px;
        }

        .d1 {
            background: #c200ff;
        }

        .d2 {
            background: #feff0e;
        }

        .d3 {
            background: #00ff4b;

        }
    </style>
</head>
<body>

<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>

</body>
</html>

运行效果如下：
image

absolute

绝对定位，填写多少就是多少

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .indiv {
            height: 100px;
            width: 100px;
        }

        .d1 {
            background: #c200ff;
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .d2 {
            background: #feff0e;
        }

        .d3 {
            background: #00ff4b;

        }
    </style>
</head>
<body>

<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>

</body>
</html>

运行效果如下：
image

absolute

相对定位，相对于之前该元素的位置

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .indiv {
            height: 100px;
            width: 100px;
        }

        .d1 {
            background: #c200ff;
            position: absolute;
            left: 50px;
            top: 50px;
        }

        .d2 {
            background: #feff0e;
        }

        .d3 {
            background: #00ff4b;

        }
    </style>
</head>
<body>

<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</div>

</body>
</html>

运行效果如下：
image

fixed

相对定位，相对于浏览器的位置

栗子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .indiv {
            height: 100px;
            width: 100px;
        }

        .d1 {
            background: #c200ff;
            position: fixed;
            left: 50px;
            top: 50px;
        }

        .d2 {
            background: #feff0e;
        }

        .d3 {
            background: #00ff4b;

        }
    </style>
</head>
<body>

<div class="indiv d1">div1</div>
<div class="indiv d2">div2</div>
<div class="indiv d3">div3</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><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><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><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><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--为了使浏览器窗口可以拖动添加的很多个换行-->
</body>
</html>

运行效果如下：
image
拖动浏览器窗口发现还是在此处，证明就是相对于浏览器的定位
image

CSS盒子模型（重点）
菜鸟教程盒子模型
学会看文档也是一种自律！

posted @   rowbed  阅读(11)  评论(0)  编辑  收藏  举报
相关博文：
·  Java登陆第二十二天——JavaScript入门
·  Java登陆第二十三天——JavaScript对象、JSON、事件
·  Day 15
·  java修饰 css 2
·  前端——CSS
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手