Java基础入门day34

2024-04-18 12:44
文章标签 java 基础 入门 day34

本文主要是介绍Java基础入门day34，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

day34

CSS

基本概念

cascade style sheet： 层叠样式表

是一种用来表现html或xml等文件样式的计算机语言，CSS可以修饰静态的网页，也可以配合各种动态脚本语言对网页元素进行格式化操作

多个层叠样式表可以覆盖或者叠加，如果不同的CSS样式对于同一个html元素进行修饰，不同属性兼顾，相同属性选择优先级最高的展示

作用：

  • 修饰美化html页面

  • 外部样式表可以提高代码的复用性从而提高工作效率

  • html可以实现内容和样式的分离，便于后期的维护

书写规范：

CSS规则由两个主要部分构成：

  • 选择器：同时是需要改变样式的html元素

  • 样式规则：由属性和属性值构成，用来设置选择器的样式效果的

基础语法：

选择器 {属性：属性值； 属性2： 属性值2; ....}

注意事项：

  • 使用花括号来包围属性属性值对

  • 如果有若干个单词，则要给值添加引号

  • 多个声明之间使用分号分隔

  • css对于大小写不敏感，如果涉及到与html文档一起使用，class和id名称对大小写敏感

三种方式

  • 行内方式

    • 把css样式嵌入到html标签中，用style属性来引入，类似于属性的用法

    • 行内样式表只对当前标签有效

          <div style="color: blue; font-size: 60px;">this is my div.</div>
      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="color: blue; font-size: 60px;">this is my div01.</div><div>this is my div02.</div>
</body>
</html>

  • 内部方式

    • 在页面的head中添加style标签来引入css

    • 使用选择器可以选择当前页面所有的符合选择器规则元素

    • 作用范围为当前整个页面

      <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{color: blue;font-size: 60px;}
​p{color: red;font-size: 60px;font-family: '楷体';}</style>
</head>
<body><div>this is my div01.</div><div>this is my div02.</div><p>this is p1</p><p>this is p2</p><p>this is p3</p>
</body>
</html>

  • 外部方式

    • 将css样式单独写一个css样式文件，使用者直接引入该文件来设置样式效果

    • 作用范围是任何引用了当前css文件的所有页面

    • 引入外部文件的方式有两种

      • link标签

      • style标签中使用@import导入样式文件

      • link与import区别：link支持所有浏览器，import是等待html加载完成才加载， import不支持js动态修改

body{background-color: gray;background-image: url('https://t7.baidu.com/it/u=1321325680,1874527231&fm=193&f=GIF');
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="css/all.css" />
</head>
<body><div style="color: blue; font-size: 60px;">this is my div01.</div><div>this is my div02.</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
​<style>@import url("css/all.css");div{color: blue;font-size: 60px;}
​p{color: red;font-size: 60px;font-family: '楷体';}</style>
</head>
<body><div>this is my div01.</div><div>this is my div02.</div><p>this is p1</p><p>this is p2</p><p>this is p3</p>
</body>
</html>

样式选择：

  • 如果同时存在行内样式表、内嵌样式表和外部样式表同时修饰同一个元素：

  • 如果属性不同，各自都会起作用

  • 如果属性相同，按照优先级顺序来显示，行内> 内嵌 > 外部

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
​<style>@import url("css/all.css");
​body{background-image: url("https://t7.baidu.com/it/u=698732052,3098959165&fm=193&f=GIF");}
​p{font-family: '楷体';}</style>
</head>
<body style="background-image: url('https://t7.baidu.com/it/u=1601818467,4473372&fm=193&f=GIF');">
​<p>this is a p1.</p><p style="color: brown;">this is a p2.</p><p>this is a p3.</p>this is default font.
</body>
</html>

css选择器

主要用作选择需要添加样式规则的元素

  • 基本选择器

    • 元素选择器/标签选择器，直接使用标签本身来选择元素

    • id选择器，元素添加id属性，样式选择使用#id值来进行选择，如果页面中有多个相同id的元素，也可以被选择渲染

    • 类选择器，让不同元素定义class属性，样式选择器使用.类样式名来进行元素的选择，可以实现跨标签选择不同的元素

  • 属性选择器

    • 根据元素的属性以及属性值来选择元素

    • html标签[属性]， 选择指定属性的html标签，input[type]，含有type属性的所有的input元素

    • html标签[属性='属性值']，选择指定属性为属性值的html标签，input[type="text"]，是选择type为text的所有的input元素

  • 伪元素选择器：主要针对于a标签元素

    • link

    • hover

    • visited

    • active

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
​<style>a:link{     /*未访问过的链接*/color: red;}       a:hover{    /*鼠标悬浮的链接*/color: blue;}a:visited{  /*访问过的链接*/color: green;}a:active{   /*鼠标点击的链接*/color: yellow;}</style>
</head>
<body><a href="#a1">this is a1</a><a href="#a2">this is a2</a><a href="#a3">this is a3</a><a href="#a4">this is a4</a>
</body>
</html>

CSSS属性

文字属性
属性名取值描述
font-size数值设置文字大小
font-family黑体，宋体，楷体设置字体样式
font-stylenormal，italic斜体设置斜体样式
font-weight100-900的取值，bold，bolder粗体样式
文本属性
属性名取值描述
color任何表示颜色的单词或者#rrggbb设置文本颜色
text-indent像素或者百分比设置文本缩进
text-decorationnone, underline;overline;blink设置装饰线
text-alignleft，center，right文本对齐方式
word-spacingnormal, 固定值单词之间的间隔
line-heightnormal,固定值设置文本的行高

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color: red;font-size: 48px;}#p2{text-indent: 20px;}#p3{text-indent: 20%;}#p4{text-indent: -20px;}</style>
</head>
<body><p id="p1">this is a p1.</p><p id="p2">this is a p2.</p><p id="p3">this is a p3.</p><p id="p4">this is a p4.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#a1{text-decoration: none;}#a2{text-decoration: underline;}#a3{text-decoration: overline;}#a4{text-decoration: line-through;}#a5{text-decoration: blink;}</style>
</head>
<body><a href="#a1" id="a1">this is a1</a><a href="#a2" id="a2">this is a2</a><a href="#a3" id="a3">this is a3</a><a href="#a4" id="a4">this is a4</a><a href="#a5" id="a4">this is a5</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 200px;}#div01{background-color: red;line-height: 0px;}#div02{background-color: blue;line-height: 200px;}#div03{background-color: green;line-height: 400px;}</style>
</head>
<body><div id="div01">this is div01</div><div id="div02">this is div02</div><div id="div03">this is div03</div>
</body>
</html>
背景属性
属性名取值描述
background-color#rrggbb或者颜色单词设置背景颜色
background-imageurl('图片路径')设置背景图片
background-repeatrepeat，repeat-x，repeat-y,no-repeat背景图片的平铺方向
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-image: url('https://t7.baidu.com/it/u=2291349828,4144427007&fm=193&f=GIF');background-repeat: repeat-y;}</style>
</head>
<body><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt=""><img src="https://t7.baidu.com/it/u=3712912701,3428856092&fm=193&f=GIF" alt="">
</body>
</html>

css盒子模型

三个属性

  • margin： 外边距

  • border： 边框

  • padding：内边距

四个方向：

默认按照上右下左的次序设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{border: 10px dashed gray;margin: 50px;}td{background-color: red;border: 10px dotted blue;padding: 100px 50px ;}#td04{padding-top: 10px;padding-left: 30px;padding-bottom: 20px;padding-right: 40px;}</style>
</head>
<body><table><tr><td>element01</td><td>element02</td></tr><tr><td>element03</td><td id="td04">element04</td></tr></table>
</body>
</html>

这篇关于Java基础入门day34的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/914819。

相关文章

如何在 Spring Boot 中实现 FreeMarker 模板

如何在 Spring Boot 中实现 FreeMarker 模板

《如何在SpringBoot中实现FreeMarker模板》FreeMarker是一种功能强大、轻量级的模板引擎,用于在Java应用中生成动态文本输出（如HTML、XML、邮件内容等）,本文... 目录什么是 FreeMarker 模板？在 Spring Boot 中实现 FreeMarker 模板1. 环
阅读更多...
SpringMVC 通过ajax 前后端数据交互的实现方法

SpringMVC 通过ajax 前后端数据交互的实现方法

《SpringMVC通过ajax前后端数据交互的实现方法》：本文主要介绍SpringMVC通过ajax前后端数据交互的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价... 在前端的开发过程中，经常在html页面通过AJAX进行前后端数据的交互，SpringMVC的controll
阅读更多...
Java中的工具类命名方法

Java中的工具类命名方法

《Java中的工具类命名方法》：本文主要介绍Java中的工具类究竟如何命名,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Java中的工具类究竟如何命名？先来几个例子几种命名方式的比较到底如何命名 ？总结Java中的工具类究竟如何命名？先来几个例子JD
阅读更多...
Java Stream流使用案例深入详解

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》：本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多
阅读更多...
Spring Security自定义身份认证的实现方法

Spring Security自定义身份认证的实现方法

《SpringSecurity自定义身份认证的实现方法》：本文主要介绍SpringSecurity自定义身份认证的实现方法,下面对SpringSecurity的这三种自定义身份认证进行详细讲解,... 目录1.内存身份认证（1）创建配置类（2）验证内存身份认证2.JDBC身份认证（1）数据准备 （2）配置依
阅读更多...
SpringBoot整合OpenFeign的完整指南

SpringBoot整合OpenFeign的完整指南

《SpringBoot整合OpenFeign的完整指南》OpenFeign是由Netflix开发的一个声明式Web服务客户端,它使得编写HTTP客户端变得更加简单,本文为大家介绍了SpringBoot... 目录什么是OpenFeign环境准备创建 Spring Boot 项目添加依赖启用 OpenFeig
阅读更多...
Java Spring 中 @PostConstruct 注解使用原理及常见场景

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代
阅读更多...
springboot使用Scheduling实现动态增删启停定时任务教程

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》：本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务，增加、删
阅读更多...
SpringBoot整合mybatisPlus实现批量插入并获取ID详解

SpringBoot整合mybatisPlus实现批量插入并获取ID详解

《SpringBoot整合mybatisPlus实现批量插入并获取ID详解》这篇文章主要为大家详细介绍了SpringBoot如何整合mybatisPlus实现批量插入并获取ID,文中的示例代码讲解详细... 目录【1】saveBATch(一万条数据总耗时：2478ms)【2】集合方式foreach(一万条数
阅读更多...
IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》：本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1：创建 Maven Web 项目步骤 2：添加 Spring MVC 依赖1、保存后执行2、将新的依赖
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2