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

相关文章

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

从入门到精通MySQL联合查询

《从入门到精通MySQL联合查询》:本文主要介绍从入门到精通MySQL联合查询,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下... 目录摘要1. 多表联合查询时mysql内部原理2. 内连接3. 外连接4. 自连接5. 子查询6. 合并查询7. 插入查询结果摘要前面我们学习了数据库设计时要满

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一