【Java web】CSS快速入门

已于 2023-12-07 11:20:58 修改
阅读量471 收藏 3
点赞数 1
分类专栏： Java Web 文章标签： css html 前端
于 2023-03-13 10:38:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_68162134/article/details/129464293
版权

目录

CSS概述

CSS （ Cascading Style Sheet，层叠样式表单），一种用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。

在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。（简单地说，css就是美化页面的。）

好处：
（1）功能强大
（2）将内容展示和样式控制分离

  • 降低耦合度。（解耦）
  • 让分工协作更容易
  • 提高开发效率

CSS的使用

选择器{ 属性名 1:属性值 1; 属性名 2:属性值 2; 属性名 3:属性值 3; }

例：
div{ border:1px solid red; width:200px; height:100px;}

在上述代码中，div为选择器，表示 CSS样式作用的HTML对象；border、 width和height为CSS属性，分别表示边框、宽度和高度，其中 border属性有3个值，分别表示该边框为1像素、实心边框线、红色。

在CSS中颜色的取值方式有以下3种。

  • 预定义的颜色值，例如red、 green、blue等。

  • 十六进制形式的值，例如#FFOO00、#FF6600、#29D794等。实际工作中,十六进制形式的值是常用的定义颜色的方式。

  • RGB 代码,例如红色可以用rgb(255,0,0)或 rgb(100%,0%,0%)来表示。如果使用 RGB 代码百分比方式取颜色值.即使值为0.也不能省略百分号，必须写为0%。

CSS的引入方式

要使用CSS修饰网页，就需要在HTML文档中引入CSS。

CSS提供了4种引入方式，分别是行内式、内嵌式、外链式和导入式。

1.行内式

行内式也称内联式。

<标签名 style="属性名 1:属性值 1;属性名 2:属性值 2;属性名 3:属性值 3;">内容</标签名>

例：

<div style="font-size: 40px; color: gray">css,我来了！</div>

<h1 style="font-size: 20px; color: blue">一级标题</h1>

在这里插入图片描述

行内式是通过标签属性来控制样式的，没有做到结构与样式分离，不推荐。

2.内嵌式

内嵌式是将CSS代码写在HTML文档的<head>头部标签中，并用<style>标签定义。

<style type="text/css">
    选择器{
        属性名 1:属性值 1;
        属性名 2:属性值 2;
        属性名 3:属性值 3;
    }
</style>

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border: 1px solid #CCCCCC;
            font-size: 30px;
            color: purple;
            width:300px;
            height: 80px;
        }
    </style>
</head>
<body>
<div>css,我来了！</div>
</body>
</html>

在这里插入图片描述

仅设计一个页面时，内嵌式是个不错的选择，但设计网站时，不建议使用内嵌式，因为它不能充分发挥CSS代码的重用优势。

3.外链式

外链式也叫链入式，是将所有样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link>标签将外部样式表文件链接到HTML文件中。

<head>
    <link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>

  • href：定义所链接外部样式表文件的地址，可以是相对路径，也可以是绝对路径。

  • type：定义所链接文档的类型，这里需要指定为“textcss”，表示链接的外部文件为CSS。

  • rel：定义当前文档与被链接文档之间的关系，这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

新建一个style.css

在这里插入图片描述

在这里插入图片描述

div{
    font-size: 50px;
    color: blue;
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div>css,我来了！</div>
</body>
</html>

在这里插入图片描述

实际开发中，外链式是使用频率最高、最实用的引入方式，它将HTML代码与CSS代码分离为两个或多个文件，实现了结构与样式分离。

同一个CSS文件可以被不同的HTML页面链接使用，同时一个HTML页面也可以通过多个<link>标签链接多个CSS样式表，提高了网页开发的工作效率。

4.导入式

导入式与外链式相同，都是通过引入外部样式表文件来实现的。

导入式，在<style>标签的开头使用@import语句。

<style type="text/css">
@import url(CSS文件路径); <!--@import “CSS文件路径”;-->
...
</style>

例：

<style type="text/css">
@import "style.css";
</style>

<style type="text/css">
@import url(style.css);
</style>

导入式加载较慢，大多数网站更偏向采用外链式CSS。

CSS选择器

选择器：筛选具有相似特征的元素。

1.通配符选择器

* {
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}

2.基本选择器

  • 元素选择器
    如果多个相同的元素设置相同的样式，使用此种方式最为合适。
元素名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
  • 类选择器
    对多个元素设置相同的样式，此时使用类选择器比较合适。
.类名{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
  • id 选择器
    id 要保证唯一。
#id {
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>

    <style type="text/css">
        /*通配符选择器*/
        *{
            font-size: 30px;
            color: antiquewhite;
        }

        /*元素选择器*/
        div{
            font-size: 30px;
            color: aqua;
        }

        /*id选择器,注意，id要唯一*/
        #div1{
            font-size: 50px;
        }

        /*类选择器*/
        .div2{
            color: brown;
        }
    </style>

</head>
<body>
    <div id="div1">css1</div>
    <div class="div2" >css2</div>
    <p>css3</p>


</body>
</html>

在这里插入图片描述

3.其他选择器

  • 层级选择器
    父标签 后代标签{属性1:属性值1; 属性2:属性值2;}
  • 属性选择器
    标签名[标签属性=’标签属性值’] {属性1:属性值1; 属性2:属性值2;}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他选择器</title>
  <style>
    /*层级选择器*/
    /*父标签 后代标签{属性1:属性值1; 属性2:属性值2;}*/
    div p {
      color: red;
    }

    /*属性选择器*/
    /*标签名[标签属性=’标签属性值’] {属性1:属性值1; 属性2:属性值2;}*/
    input[type='text']{
      background-color: red;
    }

    input[type='password']{
      background-color: green;
    }

  </style>

</head>
<body>

  <div>
    css1,我来了。
    <p>css2,我来了。</p>
  </div>

  <p>css3,我来了。</p>

  用户名：<input type="text" name="username"><br>
  密码：<input type="password" name="pwd">

</body>
</html>

在这里插入图片描述

CSS常用属性

文本、字体

  • font-size：字体大小
  • color：颜色
  • text-align：对齐方式
  • line-height：行高
  • …

background背景

  • background-color：背景颜色
  • background-size：背景大小
  • background-image: url(“图像地址”) 背景图片
  • …

border边框

在这里插入图片描述

  • border-radius：边框圆角
  • …

尺寸

  • width：宽度
  • height：高度

盒子模型

在这里插入图片描述

  • Margin - 清除边框区域。Margin没有背景颜色，它是完全透明的。

    • 可能的值
      • auto
      • length
      • %
    • margin：简写属性
    • margin-top：上外边距
    • margin-bottom:下外边距
    • margin-left：左外边距
    • margin-right：右外边距

  • Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

  • Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

    • 可能的值
      • length
      • %
    • padding：简写属性
    • padding-top：上填充
    • padding-bottom：下填充
    • padding-right：右填充
    • padding-left：左填充

  • element - 盒子的内容，显示文本和图像

`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>
        div{
            border: 2px solid red;
            width: 200px;
        }

        .div1{
            width: 100px;
            height: 100px;
            margin: 40px;
        }

        .div2{
            width: 200px;
            height: 20px;
            padding: 70px;
        }

    </style>

</head>
<body>
    <div  class="div2">
      2222
      <div class="div1">1111</div>
    </div>

</body>
</html>`

在这里插入图片描述

浮动-float

元素可以围绕其他元素向左或向右被推动，对元素的布局有影响。

属性：

  • clear --> 清除浮动
    值：

    • left
    • right
    • both
    • none
    • inherit

  • float --> 浮动
    值：

    • left
    • right
    • none
    • inherit
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>

    <style>
        div{
            border: 2px solid red;
            width: 200px;
        }

        .div1{
            float: left;
        }
        .div2{
            float: left;
        }
        .div3{
            float: right;
        }

    </style>

</head>
<body>

<div class="div1">aaaa</div>
<div class="div2">bbbbb</div>
<div class="div3">cccc</div>

</body>
</html>

在这里插入图片描述

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" >

</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p id="left_re1">新用户注册</p>
        <p id="left_re2">USER REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码">
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期">
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>

</div>
</body>
</html>

/*设置背景图片*/
body{
    background: url("../img/register_bg.png") no-repeat center;/* 居中 */
    padding-top: 25px;
}

/*设置表单大小和居中*/
.rg_layout {
    width: 900px;
    height: 500px;
    border: 8px solid #EEEEEE;
    background-color: white;

    /*    设置居中*/
    margin: auto;
}

/*    设置浮动*/
    .rg_left{
        float: left;
        margin: 15px;
    }
    .rg_center{
        float: left;
    }
    .rg_right{
        float: right;
        margin: 15px;
    }

/*    设置左边的字体*/
#left_re1{
    color: #FFD026;
    font-size: 20px;
}
#left_re2{
    color: #A6A6A6;
    font-size: 20px;
}

/*设置右侧字体*/
.rg_right p{
    font-size:15px;
}
.rg_right p a{
    color: pink;
}

/*设置中间表单*/
.td_left{
    width: 100px;
    text-align: right;
    height: 45px;
}
.td_right{
    padding-left: 50px;
}

/*设置输入框*/
#username,#password,#email,#name,#tel,#birthday,#checkcode{
    width: 251px;
    height: 32px;
    border: 1px solid #A6A6A6;
/*    设置圆角*/
    border-radius: 5px;
    padding-left: 10px;
}

/*设置验证码*/
#checkcode{
    width: 110px;
}
#img_check{
    height: 32px;
    /*设置上下居中*/
    vertical-align: middle;
}

/*设置注册按钮*/
#btn_sub{
    width: 150px;
    height: 40px;
    background-color: #FFD026;
    border: 1px solid #FFD026;
}

兵马俑
验证码

Audery867
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Java Web开发入门很简单源代码
01-30
第2篇为基础篇，主要介绍HTML、CSS、JavaScript、Servlet、JSP和JavaBean等Java Web开发所需的基础知识，并对这些基础知识进行练习和领悟；第3篇为提高篇，介绍当前流行的SSH开发框架，并带领读者对SSH框架进行整合...
Java CSS
等,一起的博客
03-09 512
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
【JAVA】CSS
haoyu__的博客
07-06 526
【概述】：CSS是一门语言，用于控制网页表现CSS(Cascading Style Sheet):层叠样式表在标签内部使用style属性，属性值是css属性键值对例： 2、内部样式 定义标签，在标签内部定义css样式例： 3、外部样式 定义link标签，引入外部的css文件demo.css例： 【CSS选择器】 【概述】：选择器是选取需设置样式的元素(标签)【分类】1、元素选择器例： 2、id选择器例： 3、类选择器例： CSS属性 参考：http://...
【JAVAWEB】CSS
m0_57248752的博客
05-30 1161
层叠样式表(Cascading Style Sheets).作用：CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化效果，能够做到页面的样式和结构分离。
【JavaWeb】前端开发三剑客之CSS(上)
冲击大厂之路!!!
01-20 2540
前端开发三剑客学习之CSS(上)。
JavaWeb学习总结（二）CSS详解
long3359的博客
03-11 772
JavaWeb（二）CSS详解
javastarter:BridgePhase Java Web 应用程序入门项目
05-29
这将创建一个 Gradle 构建驱动的 Java 项目，以快速创建新的 Spring 驱动的 Java Web 应用程序。 前端由 AngularJS 使用 webjars 提供支持。 主要的 CSS 框架是 Pure CSS。 随意修改项目以满足您的需要。 更新什么...
HTML5+CSS3 快速入门 前端 源代码.rar
10-06
Java web前端开发常用技术之一，可快速构建极具客户体验度的应用。本课程由有着多年实战开发的资深web前端开发工程师朱朝兵老师为大家录制，从html5+css3基础知识，到实战案例分析，实际操作，均有详细讲解。 1.课程...
Web前端CSS视频教程课堂笔记
12-17
本套CSS基础视频教程详细讲解了什么是css 。层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅...
浅入浅出Java Web
04-26
建议先对Java、HTML、CSS、JS、ajax、HTTP、Firebug等有所了解。 推荐一下“菜鸟教程”（http://www.runoob.com/）中的相关教程（利 益无关～），很适 合入门。 linux下编写程序。 文件均是UTF-8编码。
java css 的介绍
10-13
CSS历史 使用CSS+DIV的优点　但随着HTML的成长，为了满足设计师的要求，HTML增加了很多显示功能。随着这些功能的增加，外来定义样式的语言越来越没有意义了。
java css样式
03-13
java css 样式，静态页面图片，项目素材。。。
JAVA用css样式布局的写法
09-21
css样式布局写法,css样式布局例子程序
JavaWeb CSS样式
qq_38557784的博客
03-19 2042
css基本使用 1、使用css的好处 css样式， 就是用来美化网页(美颜)。非常方便，维护性好。 层叠: 一层一层:强调的是优先级. 样式表: 很多的属性和属性值 回顾: html使用标签把要操作的数据包裹起来，通过修改标签的属性值，来实现标签内数据的变化 2、css将网页内容和显示样式 进行分离，提高了显示功能 3.提取出html标签中的大部分属性，进行统- -的管理。简化html网页代码结构,同时还可以对多个html网页进 行统- -管理 2、css基本使用 1、内嵌样式 1)需要在head标
一个后端人员的前端笔记之CSS
qq_34800986的博客
09-30 527
文章目录1. CSS 简介1.1 HTML 的局限性1.2 CSS-网页的美容师1.3 CSS 语法规范1.4 CSS 代码风格1.4.1 样式格式书写1.4.2 样式大小写1.4.3 空格规范2. CSS 选择器2.1 CSS 选择器的作用2.2 选择器分类2.2.1 标签选择器2.2.2 类选择器2.2.3 id 选择器 1. CSS 简介 1.1 HTML 的局限性 说起 HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如 h1 表明这是一个大标题，p 表明这是一个段落img 表明这儿有一
【JAVAWEB】javaweb5之CSS
2301_79585673的博客
09-21 129
【JAVAWEB】javaweb5之CSS
JAVA CSS
qq_43349542的博客
04-02 1721
HTML+CSS+JavaScript 结构 + 表现+ 交互 CSS基础 如何学习？ 1.什么是CSS? css:cascading style sheets 层叠 样式 表 百度百科： 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位
Java之CSS全纲
xiaoxiaobaie的博客
01-23 840
CSS 的简单介绍 如何学习 是什么 怎么用? 选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变…) 盒子模型 浮动 定位 网页动画(特效效果) 什么是CSS Cascading Style Sheet 层叠级联样式表 CSS : 表现:(美化网页) 字体,颜色,边距,宽度,高度,背景图片,网页定位,网页浮动 发展史 CSS 1.0 CSS 2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO CSS 2.1 浮动,定位 CSS3.0 圆角,阴
Java学习 --- CSS
qq_46093575的博客
04-15 793
目录 一、CSS语法 1.1、css文件 二、盒子模型 三、css布局 四、练习 一、CSS语法 1.1、css文件 /*p标签样式表*/ p{ color: red; } /* 类样式 */ .f20{ font-size: 50px; } /*ID样式*/ #p4{ background-color: p..
java web开发实战宝典 王国辉
最新发布
02-01
《Java Web开发实战宝典》是由王国辉所著，是一本适用于Java Web开发初学者和进阶者的实践指南。本书内容详实且实用，旨在帮助读者快速入门Java Web开发，并提供一系列实战项目供读者实践。 本书首先介绍了Java Web开发的基础知识，包括Web开发的概述、Java EE平台的组成部分以及常用的Web开发框架和工具。接着，书中通过构建一个完整的Java Web应用程序的实例来介绍和讲解各种技术和工具的使用，包括HTML、CSS、JavaScript、Servlet、JSP、数据库操作、MVC模式、Spring框架等等。 《Java Web开发实战宝典》采用了循序渐进的方式，以真实的项目案例作为基础，讲解了从简单页面开发到数据库操作再到整个系统架构的搭建等整个开发流程。通过跟随书中的步骤和教程，读者可以快速掌握Java Web开发的主要技能和流程，具备独立进行Web开发的能力。 此外，书中还涉及了一些高级的主题，如文件上传下载、安全性、性能优化等，对进阶者来说也是非常有益的。同时，书中的示例代码也非常丰富和实用，读者可以通过实际操作来加深理解和巩固所学知识。 总而言之，《Java Web开发实战宝典》是一本内容全面、结构合理、适合初学者和进阶者的Java Web开发实践指南。通过阅读本书，读者可以系统性地学习和掌握Java Web开发的知识和技能，并通过实战项目提升自己的实践能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Audery867

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值