JAVAEE之CSS

1.CSS 是什么?

层叠样式表 (Cascading Style Sheets). 
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 

1.1 CSS和HTML的区别

CSS,全称为层叠样式表(Cascading Style Sheets),是一种标记语言。

它和HTML一样,常用于网页制作。

CSS的主要功能是为HTML(或 XML )文档添加样式规则,从而控制显示效果,例如布局、颜色、字体等等。

相比于通过HTML码来设置样式,使用CSS可以更方便精确地控制网页的样式,同时提高网页的可维护性、可扩展性和重用性。CSS可以通过内联式、内部样式表和外部样式表三种方式引入文档。目前,CSS3是最新版本,它增加了许多新特性,例如过渡动画、圆角边框等,让网页制作变得更加丰富和精美。

HTML,全称为超文本标记语言(HyperText Markup Language),是用于创建网页和其他类似的可在浏览器中显示的文档的标准标记语言。HTML使用标记标签来描述网页的结构和内容,这些标签可以用于添加文字、图像、音频、视频等多媒体元素,并且可以定义链接、表格、列表等结构性元素。HTML文档可以在网页服务器中存储,也可以通过网络传输和浏览器进行访问。HTML是网页制作的基础,是网站和网页的载体,所有在网页上显示的内容都是通过HTML标记来实现的。

主要区别:

1. HTML用于定义网页的内容和结构,而CSS用于控制网页的样式和布局。HTML定义了网页中各种元素的基本结构,例如标题、段落、图像和链接。CSS则用于定义这些元素的外观,例如字体、颜色、大小和对齐方式。

2. HTML是一种标记语言,它是由标签组成的。标签指示浏览器如何显示内容。CSS是一种样式表语言,它用样式规则指定如何呈现HTML或其他XML文档的元素。

3. HTML与CSS在网页开发中的作用不同。HTML是网页的骨架,它决定了页面内容的表示方式。CSS控制了样式和布局,使得页面呈现出更多的美感和清晰度。

2.基本语法规范

选择器 + {一条/N条声明}

  1. 选择器决定针对谁修改 (找谁)
  2. 声明决定修改啥. (干啥)
  3. 声明的属性是键值对.          使用 ; 区分键值对,          使用 : 区分键和值. 
<style>
    p {
        /* 设置字体颜色 */
        color: red;
        /* 设置字体大小 */
        font-size: 30px;
   }
</style>
<p>hello</p>

注意: 
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. 一般放到 head 标签内. 
CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

3.引入方式

3.1 内部样式表

写在 style 标签中. 嵌入到 html 内部. 
理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中. 

例如留言板的html文件,<style></style>标签内即就是CSS。

优点: 这样做能够让样式和页面结构分离. 
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候. 

3.2 行内样式表 

通过 style 属性, 来指定某个标签的样式. 

只适合于写简单样式. 只针对某个标签生效. 

缺点: 不能写太复杂的样式. 

这种写法优先级较高, 会覆盖其他的样式. 

<style>
    div {
        color: red;
   }
</style>
<div style="color:green">想要生活过的去, 头上总得带点绿</div>

//行内的优先级高于标签内

//此时, red 颜色被覆盖了.

3.3 外部样式

实际开发中最常用的方式. 
1. 创建一个 css 文件. 
2. 使用 link 标签引入 css

<link rel="stylesheet" href="[CSS文件路径]">

我们来看我们图书管理系统的前端

1.专门有一个CSS文件,里面放了很多.CSS 

 2.使用 link 标签引入 css

注意: 不要忘记 link 标签调用 CSS, 否则不生效. 

优点: 样式和结构彻底分离了. 

缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效.  

关于缓存:
这是计算机中一种常见的提升性能的技术手段. 
网页依赖的资源(图片/CSS/JS等)通常是从服务器上获取的. 如果频繁访问该网站, 那么这些外部资源就没必要反复从服务器获取. 就可以使用缓存先存起来(就是存在本地磁盘上了). 从而提高访问效率. 
可以通过 ctrl + F5 强制刷新页面, 强制浏览器重新获取 css 文件. 

4.代码风格 

4.1 样式大小写

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母

4.2 空格规范

冒号后面带空格
选择器和 { 之间也有一个空格. 

p {
    color: red;
    font-size: 30px;
}

5.选择器

5.1 选择器的功能

选中页面中指定的标签元素. 

要先选中元素, 才能设置元素的属性. 

就好比 SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位行动.

5.2 选择器的种类

1. 基础选择器: 单个选择器构成的
标签选择器
类选择器
id 选择器
通配符选择器

2. 复合选择器: 把多种基础选择器综合运用起来. 
后代选择器
子选择器
并集选择器
伪类选择器

https://www.w3school.com.cn/cssref/css_selectors.asp 

在前后端交互时常见的:

6.基础选择器

6.1 标签选择器 

特点: 

能快速为同一类型的标签都选择出来. 

但是不能差异化选择

我们通过标签定义了不同的颜色

6.2 类选择器

特点: 
差异化表示不同的标签
可以让多个标签的都使用同一个标签. 

//我们添加了这段代码,class内部的咬人猫,被定义为蓝色。而div标签内仍是上述的绿色。

语法细节:

类名用 . 开头的

下方的标签使用 class 属性来调用.

一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)

如果是长的类名, 可以使用 - 分割. 

不要使用纯数字, 或者中文, 以及标签名来命名类名. 

代码示例: 使用多个类名
注意: 一个标签可以同时使用多个类名
这样做可以把相同的属性提取出来, 达到简化代码的效果. 

6.3 id 选择器

和类选择器类似. 
CSS 中使用 # 开头表示 id 选择器
id 选择器的值和 html 中某个元素的 id 值相同
html 的元素 id 不必带 #
id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

<style>
    #ha {
        color: red;
   }
</style>
<div id="ha">蛤蛤蛤</div>

6.4 通配符选择器

使用 * 的定义, 选取所有的标签 

* {
 color: red;
}

页面的所有内容都会被改成 红色 . 
不需要被页面结构调用. 

6.5 基础选择器小结

//#id,点(.)class 

后端程序员不需要特别了解前端知识,随用随查即可!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/505879.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Spring Boot 源码学习】ConditionEvaluationReport 日志记录上下文初始化器

《Spring Boot 源码学习系列》 ConditionEvaluationReport 日志记录上下文初始化器 一、引言二、往期内容三、主要内容3.1 源码初识3.2 ConditionEvaluationReport 监听器3.3 onApplicationEvent 方法3.4 条件评估报告的打印展示 四、总结 一、引言 上篇博文《共享 MetadataRe…

redis和数据库数据不一直问题,缓存常见的三大问题

文章目录 数据一致性缓存常见问题缓存穿透缓存击穿缓存雪崩 数据一致性 1 思路 查询数据的时候&#xff0c;如果缓存未命中&#xff0c;则查询数据库&#xff0c;将数据写入缓存设置超时时间修改数据时&#xff0c;先修改数据库&#xff0c;在删除缓存。 2 代码实现 修改更…

【原创】基于分位数回归的卷积长短期结合注意力机制的神经网络(CNN-QRLSTM-Attention)回归预测的MATLAB实现

基于分位数回归的卷积长短期结合注意力机制的神经网络&#xff08;CNN-QRLSTM-Attention&#xff09;是一种用于时间序列数据预测的深度学习模型。该模型结合了卷积神经网络&#xff08;CNN&#xff09;、长短期记忆网络&#xff08;LSTM&#xff09;和注意力机制&#xff08;A…

P1803 凌乱的yyy / 线段覆盖(贪心)

思路&#xff1a; 这道题让求区间覆盖&#xff0c;它要求只能一个一个的区间&#xff0c;先对n个区间进行排序&#xff0c;按照区间的结束点前后进行排序。所以从后往前看结束时间点&#xff0c;如果下一个的起点在前一个的结束点之后&#xff0c;则数量加1。 代码&#xff1a…

Python进阶编程 --- 1.类和对象

文章目录 第一章&#xff1a;1.初始对象1.1 使用对象组织数据1.2 类的成员方法1.2.1 类的定义和使用1.2.2 创建类对象1.2.3 成员变量和成员方法1.2.4 成员方法的定义语法1.2.5 注意事项 1.3 类和对象1.3.1 基于类创建对象 1.4 构造方法1.5 其他内置方法1.5.1 魔术方法str字符串…

鸿蒙OS开发实战:【网络管理HTTP数据请求】

一、场景介绍 应用通过HTTP发起一个数据请求&#xff0c;支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。 二、 接口说明 HTTP数据请求功能主要由http模块提供。 使用该功能需要申请ohos.permission.INTERNET权限。 涉及的接口如下表&#xff0c;…

python爬取B站视频

参考&#xff1a;https://cloud.tencent.com/developer/article/1768680 参考的代码有点问题&#xff0c;请求头需要修改&#xff0c;上代码&#xff1a; import requests import re # 正则表达式 import pprint import json from moviepy.editor import AudioFileClip, Vid…

QT初识(2)

QT初识&#xff08;2&#xff09; 创建好项目之后&#xff0c;多了些什么东西&#xff1f;main.cppwidget.hwidget.cppwidget.ui.pro项目工程文件 我们今天来继续了解QT。如果没看过上一次QT初识的小伙伴可以点击这里&#xff1a; https://blog.csdn.net/qq_67693066/article/d…

STM32的DMA

DMA(Direct memory access)直接存储器存取,用来提供在外设和存储器之间或者存储 器和存储器之间的高速数据传输&#xff0c;无须CPU干预&#xff0c;数据可以通过DMA快速地移动&#xff0c;这就节 省了CPU的资源来做其他操作。 STM32有两个DMA控制器共12个通道(DMA1有7个通道…

基于YOLOV8+Pyqt5光伏太阳能电池板目标检测系统

1、YOLOV8算法 YOLOv8 是当前效果较好的目标检测 算法&#xff0c;它的核心网络来源于 DarkNet-53&#xff0c;该网络初次在 YOLOv3[11] 中被引入&#xff0c;并深受 ResNet[12] 的影响。DarkNet-53 使用了残差机制&#xff0c;并连续添加了卷积模块来加强其功能性。 这 53 层…

Cortex‐M3/M4/M7内核的操作模式和特权等级介绍

0 前言 如果我们是基于MCU的裸机编程&#xff0c;是不需要关心内核的操作模式和特权等级的。如果是进行RTOS的开发编程&#xff0c;我们就要必要了解一下Cortex‐M3/M4/M7内核的操作模式和特权等级&#xff0c;这在RTOS的线程切换等场合会使用到。 1 Cortex‐M3/M4/M7内核的操…

栈————顺序栈和链式栈

目录 栈 顺序栈 1、初始化顺序栈 2、判栈空 3、进栈 4、出栈 5、读栈顶元素 6、遍历 链式栈 1、初始化链式栈 2、断链式栈是否为空判 3、入栈(插入) ​编辑​编辑 4、出栈(删除) 5、读取栈顶元素 6、输出链式栈中各个节点的值&#xff08;遍历&#xff09; 栈 …

Golang | Leetcode Golang题解之第2题两数相加

题目&#xff1a; 题解&#xff1a; func addTwoNumbers(l1, l2 *ListNode) (head *ListNode) {var tail *ListNodecarry : 0for l1 ! nil || l2 ! nil {n1, n2 : 0, 0if l1 ! nil {n1 l1.Vall1 l1.Next}if l2 ! nil {n2 l2.Vall2 l2.Next}sum : n1 n2 carrysum, carry …

(React组件基础)前端八股文Day6

一 类组件与函数组件有什么异同 在React中&#xff0c;类组件和函数组件是创建组件的两种主要方式。随着React的发展&#xff0c;尤其是自Hooks在React 16.8中引入以来&#xff0c;函数组件的功能变得更加强大&#xff0c;使得它们能够更加方便地与类组件相竞争。下面是类组件…

MySQL数据库(高级)

文章目录 1.MySQL约束1.主键细节说明演示复合主键 2.not null&#xff08;非空&#xff09;3.unique&#xff08;唯一&#xff09;细节说明演示 4.外键外键示意图使用细节演示 5.check演示 6.创建表练习答案 7.自增长演示细节 2.索引1.索引机制2.创建索引演示细节 3.删除索引4.…

【苹果MAC】苹果电脑 LOGI罗技鼠标设置左右切换全屏页面快捷键

首先键盘设置->键盘快捷键 调度中心 设置 f1 f2 为移动一个空间&#xff08;就可以快捷移动了&#xff09; 想要鼠标直接控制&#xff0c;就需要下载官方驱动&#xff0c;来设置按键快捷键&#xff0c;触发 F1 F2 安装 LOGI OPTIONS Logi Options 是一款功能强大且便于使用…

Yarn的安装和使用(2):使用及问题解决

Yarn是JavaScript的依赖管理工具&#xff0c;它与npm类似&#xff0c;但提供了一些额外的性能优化和一致性保证。 Yarn的使用&#xff1a; 初始化项目&#xff1a; yarn init 此命令会引导您创建一个新的package.json文件&#xff0c;用于记录项目的元信息和依赖。 添加依赖&…

38.HarmonyOS鸿蒙系统 App(ArkUI)堆叠布局结合弹性布局

层叠布局用于在屏幕上预留一块区域来显示组件中的元素&#xff0c;提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠&#xff0c;容器中的子元素&#xff08;子组件&#xff09;依次入栈&#xff0c;后一个子元素覆盖前一个子元素&#xff0c;子元素…

神经网络与深度学习(一)误差反传BP算法

误差反传BP算法 1多层感知机1.1XOR问题1.2多层感知机 2.BP算法2.1简述2.2详解2.2.1输入输出模型2.2.2梯度下降算法迭代2.2.3前向传播在输出端计算误差2.2.4误差反传--输出层2.2.5误差反传--隐含层2.2.6误差反传--总结 1多层感知机 1.1XOR问题 线性不可分问题&#xff1a; 无法…

正弦实时数据库(SinRTDB)的使用(10)-数据文件的无损压缩

前文已经将正弦实时数据库的使用进行了介绍&#xff0c;需要了解的可以先看下面的博客&#xff1a; 正弦实时数据库(SinRTDB)的安装 正弦实时数据库(SinRTDB)的使用(1)-使用数据发生器写入数据 正弦实时数据库(SinRTDB)的使用(2)-接入OPC DA的数据 正弦实时数据库(SinRTDB)…