Java-day19 学习笔记

最新推荐文章于 2024-05-31 14:59:34 发布

ChangeNone

最新推荐文章于 2024-05-31 14:59:34 发布

阅读量129

点赞数

分类专栏： Java学习笔记文章标签： css java html5

本文链接：https://blog.csdn.net/ChangeNone/article/details/112997280

版权

Java学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

day18复习

在这里插入图片描述

day19

一、div和span标签

div是html中一个普通的标签，主要用来当做容器，一般用于配合css完成网页的基本布局,
span是html中一个普通的标签，一般作为文本容器

1.1 区别

div是一个块级标签，独占一行，能存放所有内容（除了html、head和body）
span是一个行级标签，内容会在一行内追加，只能嵌套像文本、图片、超链接

二、CSS

Cascading Style Sheets 层叠样式表

层叠：一层套一层

样式表：样式的集合

注意：学习html就是学习标签, 学习CSS主要学习样式(属性),选择器

1.1 作用

1. 美化页面,修饰页面  
2. 之前是html自己完成内容和样式，而现在我们可以通过css来完成样式的内容，并且可以批量的完成的样式的添加和修改

html当做毛坯房, CSS当做装修。

1.2 为什么要用CSS

之前的问题：
    1. 之前用html属性完成样式的时候有很多问题，比如字体的大小只能在1和7之前选择，不能设置更大的字体，还有超链接的下换线不能去除等
    2. 我们给标签设置属性之前需要先记忆标签是否有此属性，如果没有的话，写上也没有效果。
    3. 有些效果需要嵌套好几层标签才能实现
    
而CSS可以解决如上问题
	1. css不用记忆哪些属性属于哪个标签
	2. 当需求变更时我们不需要修改大量的代码就可以满足需求

1.3 如何使用

① 格式

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

注意事项：
1. 属性名和属性值之间通过英文状态的 : 连接
2. 大括号中可以放多对属性名和属性值，但是它们之间要通过分号 ; 分隔
3. 最后一个属性名和属性值的后面可以不加 ;

② 将css放在哪里去使用【引入方式】

HTML是一种语言；CSS也是一种语言。如果想要CSS能够修饰HTML的样式，就必须把CSS引入到HTML中。即：要解决把CSS代码写在什么地方的问题

行内样式
内部样式
外部样式

1.4 引入方式

① 第一种：行内样式【内联样式】【了解】

把CSS代码内嵌到HTML代码里，直接通过标签的style属性进行设置

<p style="color: green;">我是文字</p>

② 第二种：内部样式【掌握】

把CSS代码写在HTML文档内部,通过style标签来结合
1. 需要在head标签中写一个style标签
2. 在style标签中统一写css相关的样式设置

注意：
	1. style标签中，可以写上type="text/css"，也可以不写
	2. style标签，一定要放在head标签中

<style type="text/css">

        p {
            color: pink;
            font-size: 50px
        }
</style>

③ 第三种：外部样式【掌握】

把CSS代码写在独立的CSS文件里,通过link标签结合
1. 将css样式写在一个后缀为css的文件中
2. 在html文件中引入css文件

注意：引入外部css文件，是在head标签中写一个link标签引入的

<link rel="stylesheet" href="../css/bb.css">

④ 三种引入方式的优先级

就近原则，也就是距离要修饰的标签最近的引入方式产生效果

1.5 选择器

选择器：用于选择HTML元素(标签)，进行样式修饰

① 基本选择器

选择器	描述	语法	示例
标签选择器	根据HTML标签名称选择标签	`标签名称{}`	`div{ color:red; }`
ID选择器	根据id属性值选择标签	`#id值{}`	`#d1 { color:blue; }`
类选择器	根据class属性值（类名）选择标签	`.类名{}`	`.c1 { color:yellow; }`
通用选择器	选取所有标签	`*{}`	`*{ color: pink;}`

② 选择器优先级

ID选择器 > 类选择器 > 标签选择器 > 通用选择器

注意：如果优先级相同，那么就满足就近原则

③ 扩展选择器

多个基本选择器的组合，可以更灵活的选取标签

选择器	描述	语法	示例
层级选择器	根据HTML标签名称选择标签	`祖先后代`	`div a{ }`
属性选择器	根据指定属性的值筛选元素	`[属性='值']`	`input[type='text'] { }`
并集选择器	多个选择器的结果进行合并	`选择器1,选择器2,...`	`.c1, span { }`

④ 伪类选择器【了解】

选择器	描述	示例
`:link`	选择正常状态的超链接	`a:link{}`
`:visited`	选择被访问过的超链接	`a:visited{}`
`:hover`	选择鼠标悬停的超链接	`a:hover{}`
`:active`	选择鼠标按下的超链接	`a:active{}`

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

    <style>

        /*超链接默认的颜色*/
        a:link{

            color: blueviolet;
        }
        /*超链接被访问之后的颜色*/
        a:visited{

            color: mediumvioletred;
        }
        /*鼠标悬浮在超链接上方显示的颜色*/
        a:hover{

            color: green;
        }
        /*鼠标点击不松开的颜色*/
        a:active{

            color: pink;
        }

        /*注意：一定要确保顺序为lvha*/

    </style>

</head>
<body>

<a href="https://www.baidu.com">百度一下，你就知道</a>

</body>
</html>

超链接的伪类

1.6常见属性

CSS提供了大量的样式（属性）用于修饰HTML标签，我们需要了解的有：背景属性、文本样式、字体属性。

① 背景属性

功能	属性名	属性取值
背景色	`background-color`	1. 颜色常量，如：red 2. 使用十六进制，如：#ABC 3. 红绿蓝使用 rgb(红,绿,蓝)
背景图片	`background-image`	`url(图片的路径)`
平铺方式	`background-repeat`	`repeat` 默认。背景图像将在垂直方向和水平方向重复 `repeat-x` 背景图像将在水平方向重复。 `repeat-y` 背景图像将在垂直方向重复。 `no-repeat`背景图像将仅显示一次。

② 文本样式

功能	属性名	属性取值
颜色	`color`	颜色
设置行高	`line-height`	像素
文字修饰	`text-decoration`	`underline` 下划线 `overline` 上划线 `ine-through` 删除线 `none` 不要线条
文本缩进	`text-indent`	用于缩进文本，可以使用em单位。
文本对齐	`text-align`	`left` 把文本排列到左边。 `right` 把文本排列到右边。 `center` 把文本排列到中间。默认值：由浏览器决定。

③ 字体属性

功能	属性名	作用
字体名	`font-family`	设置字体，本机必须要有这种字体
设置大小	`font-size`	像素
设置样式	`font-style`	`italic` 斜体 `normal` 默认值。浏览器显示一个标准的字体样式。
设置粗细	`font-weight`	`bold`加粗

ChangeNone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Java-day19 学习笔记

day18复习Java-day19 学习笔记day19一、div和span标签1.1 区别二、CSS1.1 作用1.2 为什么要用CSS1.3 如何使用① 格式② 将css放在哪里去使用【引入方式】1.4 引入方式① 第一种：行内样式【内联样式】【了解】② 第二种：内部样式【掌握】③ 第三种：外部样式【掌握】④ 三种引入方式的优先级1.5 选择器① 基本选择器② 选择器优先级③ 扩展选择器④ 伪类选择器【了解】1.6常见属性① 背景属性② 文本样式③ 字体属性day19一、div和sp.
复制链接

扫一扫