当前位置： 首页 > article >正文

javaEE-10.CSS入门

article 2026/4/27 13:16:06

目录

一.什么是CSS

​编辑二.语法规则:

三.使用方式

1.行内样式:

2.内部样式:

3.外部样式:

空格规范 :

四.CSS选择器类型

1.标签选择器

2.类选择器

3.ID选择器

4.通配符选择器

5.复合选择器

五.常用的CSS样式

1.color:设置字体颜色

2.font-size:设置字体大小

3.border:边框

4.width:设置宽度,height:设置高度

改变显⽰模式

5.padding:设置内边距

6.margin:设置外边距

一.什么是CSS

CSS：Cascading Style Sheet 层叠样式表,⽤于控制⻚⾯的样式.

CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离。

CSS前->CSS 后:

二.语法规则:

选择器{声明内容}

选择器:决定针对哪块修改(找谁)

声明内容:决定修改成什么(干什么)

声明的属性是 键值对,用分号 " ; " 来分隔键值对，用冒号" : "来区分键和值.

注意:

CSS要写在style标签中;

style标签可以放到⻚⾯任意位置.⼀般放到head标签内.

 CSS使⽤ /**/作为注释.(使⽤ctrl+/快速切换)

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>h1{color:red;width:500px;}</style>
</head>
<body><h1>好好学习</h1>
</body>

三.使用方式

CSS有三种使用方式:

1.行内样式:

在标签内 使⽤style属性，属性值是css属性键 值对

  <!-- 行内样式 --><div style="color:red">好好学习</div>

特点:行内样式会引入大量的代码,使代码看起来很乱,因此不常用 

2.内部样式:

定义style标签,在标签内部定义CSS样式.

<style>h1{...}</style>

特点:适用于简单的样式实现, 只针对某个标签⽣效.缺点是不能写太复杂的样式.

3.外部样式:

定义标签<link>，通过 href属性引⼊外部css ⽂件

特点:html和CSS实现完全分离,常用于企业开发中.

样式不区分大小写,常用于小写.

空格规范 :

冒号后⾯带空格

选择器和 { 之间也有⼀个空格.

四.CSS选择器类型

1.标签选择器

根据标签对所选内容进行样式设置。

2.类选择器

通过在标签中添加属性class=" 类名",通过.类名 进行选择设置属性.

类选择器可以同名,是用来对一类标签进行样式设置的;类名不能是单独的数字,不能是标签名等特殊字符.

3.ID选择器

通过在标签中添加属性 id=" ID名",通过  #ID名 进行选择设置属性.

id 是唯⼀的,不能被多个标签使⽤，ID名不允许同名,不能是标签名等特殊字符.

4.通配符选择器

使用 * 用来设置页面的所有内容.

5.复合选择器

通过空格分隔进行多重选择,选择到要设置的内容

1. 以上三个标签选择器ul li h1 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选 择器的组合,也可以是任意数量选择器的组合

2. 不⼀定是相邻的标签,也可以是"孙⼦"标签

 3. 如果需要选择多种标签,可以使⽤ , 分割,如p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.

五.常用的CSS样式

1.color:设置字体颜色

颜色表达方式:

1>.直接写颜色英文单词:

2>.rgb代码的颜色: 

rgb代表红绿蓝三原色,通过比例的设置选择颜色.

3>.16进制表示:

16进制表示的原理还是rgb,每两个16进制代表一个rgb颜色.

2.font-size:设置字体大小

3.border:边框

border是一个符合属性,可同时设置多个属性,边框宽度,边框颜色,边框形状,不分先后顺序,浏览器可以自己识别.

也可以拆开来设置:

样式作用取值
border-width设置边框粗细数值
border-color设置边框颜色同color
border-style设置边框形状

dotted:点状

solid:实线

double:双线

dashed:虚线

上面的代码,等同于下面的代码:

4.width:设置宽度,height:设置高度

注意:只有块级元素才能设置宽度和高度.

块级元素是HTML标签的⼀种显⽰模式,对应的还有⾏内元素

常⻅块级元素:h1-h6,p,div等

 常⻅⾏内元素:a span

改变显⽰模式

使⽤display属性可以修改元素的显⽰模式.

display: block 改成块级元素

display: inline 改成⾏内元素

5.padding:设置内边距

padding用来设置内容和边距的距离，内容默认是顶着边框来放置的.⽤padding来控制这个距离

padding也是一个复合样式,可以对四个边分别设置:

padding-top:上边距

padding-left:左边距

padding-right:右边距

padding-bottom:下边距

6.margin:设置外边距

margin:设置元素和元素之间的距离.

margin也是⼀个复合样式,可以给四个⽅向都加上外边距

 margin-top

margin-bottom

 margin-left

margin-right

上面的内边距和外边距都是相对的,要根据所设置的对象来确认内外边距.

相关文章：

javaEE-10.CSS入门

目录 一.什么是CSS ​编辑二.语法规则: 三.使用方式 1.行内样式: 2.内部样式: 3.外部样式: 空格规范 : 四.CSS选择器类型 1.标签选择器 2.类选择器 3.ID选择器 4.通配符选择器 5.复合选择器 五.常用的CSS样式 1.color:设置字体颜色 2.font-size:设置字体大小 3…...

编程日记 2026/4/11 21:20:54

Spring Boot牵手Redisson：分布式锁实战秘籍

一、引言 在当今的分布式系统架构中，随着业务规模的不断扩大和系统复杂度的日益增加，如何确保多个服务节点之间的数据一致性和操作的原子性成为了一个至关重要的问题。在单机环境下，我们可以轻松地使用线程锁或进程锁来控制对共享资源的访问，但在分布式系统中，由于各个服务…...

编程日记 2026/4/11 21:19:26

制药行业 BI 可视化数据分析方案

一、行业背景 随着医药行业数字化转型的深入&#xff0c;企业积累了海量的数据&#xff0c;包括销售数据、生产数据、研发数据、市场数据等。如何利用这些数据&#xff0c;挖掘其价值&#xff0c;为企业决策提供支持&#xff0c;成为医药企业面临的重大挑战。在当今竞争激烈的…...

编程日记 2026/4/11 21:19:24

[学习笔记] Kotlin Compose-Multiplatform

Compose-Multiplatform 原文&#xff1a;https://github.com/zimoyin/StudyNotes-master/blob/master/compose-multiplatform/compose.md Compose Multiplatform 是 JetBrains 为桌面平台&#xff08;macOS&#xff0c;Linux&#xff0c;Windows&#xff09;和Web编写Kotlin UI…...

编程日记 2026/4/11 16:18:22

ubutun系统常用配置

目录 1. 更新系统 2. 安装 vim 文本编辑器 3. 扩展文件系统 4. 设置静态IP地址&#xff08;可选&#xff09; 5. 安装图形驱动 6. 安装常用软件 7. 调整启动项 8. 清理系统 9. 配置SSH 10. 安装VNC服务器&#xff08;可选&#xff09; 11. 安装桌面环境&#xff08;…...

编程日记 2025/6/29 23:54:41

PHP函数介绍—get_headers(): 获取URL的响应头信息

概述&#xff1a;在PHP开发中&#xff0c;我们经常需要获取网页或远程资源的响应头信息。PHP函数get_headers()能够方便地获取目标URL的响应头信息&#xff0c;并以数组形式返回。本文将介绍get_headers()函数的用法&#xff0c;以及提供一些相关的代码示例。 get_headers()函…...

编程日记 2026/3/23 22:57:31

web前端录制canvas视频和video的声音，并合并成一个文件进行下载

一、captureStream ‌captureStream‌是一个Web API方法&#xff0c;用于捕获指定元素的媒体流。该方法通常用于从<video>、<audio>或<canvas>元素中捕获实时视频流或音频流&#xff0c;以便进行进一步的处理&#xff0c;如直播、录制或分析‌。 captureStr…...

编程日记 2025/6/21 16:30:28

Golang 并发机制-7：sync.Once实战应用指南

Go的并发模型是其突出的特性之一&#xff0c;但强大的功能也带来了巨大的责任。sync.Once是由Go的sync包提供的同步原语。它的目的是确保一段代码只执行一次&#xff0c;而不管有多少协程试图执行它。这听起来可能很简单&#xff0c;但它改变了并发环境中管理一次性操作的规则。…...

编程日记 2026/4/21 7:21:45

【AI实践】Cursor上手-跑通Hello World和时间管理功能

背景 学习目的&#xff1a;熟悉Cursor使用环境&#xff0c;跑通基本开发链路。 本人背景&#xff1a;安卓开发不熟悉&#xff0c;了解科技软硬件常识 实践 基础操作 1&#xff0c;下载安装安卓Android Studio 创建一个empty project 工程&#xff0c;名称为helloworld 2&am…...

编程日记 2026/4/24 5:38:03

深度学习 视频推荐

以下为你呈现一个基于深度学习实现视频推荐的简化代码示例。这里我们使用的是协同过滤思想结合神经网络的方式，借助 TensorFlow 和 Keras 库来构建模型。在这个示例中，假设已有用户对视频的评分数据，目标是预测用户对未评分视频的评分，进而为用户推荐可能感兴趣的视频。 1…...

编程日记 2026/2/20 1:19:22

缓存组件＜keep-alive＞

缓存组件<keep-alive> 1.组件作用 组件, 默认会缓存内部的所有组件实例&#xff0c;当组件需要缓存时首先考虑使用此组件。 2.使用场景 场景1&#xff1a;tab切换时&#xff0c;对应的组件保持原状态&#xff0c;使用keep-alive组件 使用&#xff1a;KeepAlive | Vu…...

编程日记 2025/6/9 10:44:05

SpringBoot单机模式的极限是什么？为什么会引入分布式？

Spring Boot 单机模式的极限 Spring Boot 单机模式的极限主要体现在以下几个方面&#xff1a; 硬件资源限制&#xff1a; CPU&#xff1a;单机性能受限于 CPU 核心数和主频&#xff0c;无法无限扩展。内存&#xff1a;内存容量有限&#xff0c;无法应对大规模数据处理或高并发…...

编程日记 2025/11/30 6:01:13

【多模态大模型】系列4：目标检测（ViLD、GLIP）

目录 1 ViLD2 GLIP 1 ViLD OPEN-VOCABULARY OBJECT DETECTION VIA VISION AND LANGUAGE KNOWLEDGE DISTILLATION 从标题就能看出来&#xff0c;作者是把CLIP模型当成一个Teacher&#xff0c;去蒸馏他自己的网络&#xff0c;从而能Zero Shot去做目标检测。 现在的目标检测数据…...

编程日记 2026/4/25 1:09:28

计算机网络结课设计：通过思科Cisco进行中小型校园网搭建

上学期计算机网络课程的结课设计是使用思科模拟器搭建一个中小型校园网&#xff0c;当时花了几天时间查阅相关博客总算是做出来了&#xff0c;在验收后一直没管&#xff0c;在寒假想起来了简单分享一下&#xff0c;希望可以给有需求的小伙伴一些帮助 目录 一、设计要求 二、…...

编程日记 2026/4/11 21:19:34

从零到一：基于Rook构建云原生Ceph存储的全面指南（下）

接上篇&#xff1a;《从零到一&#xff1a;基于Rook构建云原生Ceph存储的全面指南&#xff08;上&#xff09;》 链接: link 六.Rook部署云原生CephFS文件系统 6.1 部署cephfs storageclass cephfs文件系统与RBD服务类似&#xff0c;要想在kubernetes pod里使用cephfs&#…...

编程日记 2026/4/24 10:10:09

mysql的语句备份详解

使用mysqldump工具备份&#xff08;适用于逻辑备份&#xff09; mysqldump是 MySQL 自带的一个非常实用的逻辑备份工具&#xff0c;它可以将数据库中的数据和结构以 SQL 语句的形式导出到文件中。 1. 备份整个数据库 mysqldump -u [用户名] -p [数据库名] > [备份文件名].…...

编程日记 2026/2/22 0:11:05

AutoMQ 如何实现没有写性能劣化的极致冷读效率

前言 追赶读&#xff08;Catch-up Read&#xff0c;冷读&#xff09;是消息和流系统常见和重要的场景。 削峰填谷&#xff1a;对于消息来说&#xff0c;消息通常用作业务间的解耦和削峰填谷。削峰填谷要求消息队列能将上游发送的数据堆积住&#xff0c;让下游在容量范围内消费…...

编程日记 2026/4/24 12:05:50

【Rabbitmq篇】高级特性----TTL，死信队列，延迟队列

目录 一.TTL ???1.设置消息的TTL 2.设置队列的TTL 3.俩者区别? 二.死信队列 定义&#xff1a; 消息成为死信的原因&#xff1a; 1.消息被拒绝&#xff08;basic.reject 或 basic.nack&#xff09; 2.消息过期&#xff08;TTL&#xff09; 3.队列达到最大长度? …...

编程日记 2026/4/11 21:19:34

【Java】多线程和高并发编程（三）：锁（中）深入ReentrantLock

文章目录 3、深入ReentrantLock3.1 ReentrantLock和synchronized的区别3.2 AQS概述3.3 加锁流程源码剖析3.3.1 加锁流程概述3.3.2 三种加锁源码分析3.3.2.1 lock方法3.3.2.2 tryLock方法3.3.2.3 lockInterruptibly方法 3.4 释放锁流程源码剖析3.4.1 释放锁流程概述3.4.2 释放锁…...

编程日记 2026/4/24 2:41:14

Unity 高度可扩展的技能与多 Buff 框架详解

一、框架设计 1.1 核心思想 组件化设计: 将技能和 Buff 抽象为可复用的组件&#xff0c;通过组合不同的组件实现复杂的效果。 数据驱动: 使用 ScriptableObject 或 JSON 等数据格式定义技能和 Buff 的属性&#xff0c;方便配置和修改。 事件驱动: 利用 Unity 的事件系统或自…...

编程日记 2025/6/1 7:19:05

电路笔记(元器件)：AD 5263数字电位计(暂记)

AD5263 是四通道、15 V、256位数字电位计&#xff0c;可通过SPI/I2C配置具体电平值。 配置模式&#xff1a; W引脚作为电位器的抽头&#xff0c;可在A-B之间调整任意位置的电阻值。也可将W与A(或B)引脚短接&#xff0c;A-W间的电阻总是0欧姆&#xff0c;通过数字接口调整电位器…...

编程日记 2026/4/27 8:16:12

《大规模动画优化（一）：GPU 顶点动画的生成》

GPU 顶点动画&#xff08;Vertex Animation Texture, VAT&#xff09; GPU 顶点动画&#xff08;Vertex Animation Texture, VAT&#xff09;烘焙的核心思想是&#xff1a; 在 CPU 端预先计算动画顶点数据&#xff0c;并存储到纹理&#xff08;Texture2D&#xff09;中&#xf…...

编程日记 2025/6/3 3:01:36

webpack【初体验】使用 webpack 打包一个程序

打包前 共 3 个文件 dist\index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Webpack 示例&…...

编程日记 2026/4/14 2:15:46

VMware安装CentOS 7（全网超详细图文保姆版教程）

文章目录 一、下载及安装 VMware1.1 VMware下载1.2 CentOS下载 二、搭建虚拟机环境2.1 创建新虚拟机2.2 选择自定义2.3 选择虚拟机硬件兼容性2.4 选择稍后安装操作系统2.5 选择Linux系统 版本选择 centos 7 64位2.6 设备你虚拟机的名字和保存位置&#xff08;保存位置建议在编辑…...

编程日记 2026/4/11 21:19:30

mysql BUG 导致 show processlist 有大量的show slave stauts 处于init状态

一、详细报错信息&#xff1a; 1、执行show slave status\G 卡住 && stop slave也卡住 2、show processlist 发现 Waiting for commit lock NULL 锁 3、错误日志报错主备同步用户认证失败 二、报错原因&#xff08;分析过程&#xff09;&#xff1a; 1、排查备库日志…...

编程日记 2026/4/24 18:42:35

机器学习在癌症分子亚型分类中的应用

学习笔记&#xff1a;机器学习在癌症分子亚型分类中的应用——Cancer Cell 研究解析 1. 文章基本信息 标题&#xff1a;Classification of non-TCGA cancer samples to TCGA molecular subtypes using machine learning发表期刊&#xff1a;Cancer Cell发表时间&#xff1a;20…...

编程日记 2026/4/24 12:20:08

从MySQL优化到脑力健康：技术人与效率的双重提升

文章目录 零&#xff1a;前言一&#xff1a;MySQL性能优化的核心知识点1. 索引优化的最佳实践实战案例&#xff1a; 2. 高并发事务的处理机制实战案例&#xff1a; 3. 查询性能调优实战案例&#xff1a; 4. 缓存与连接池的优化实战案例&#xff1a; 二&#xff1a;技术工作者的…...

编程日记 2026/4/22 20:35:31

Qt：项目文件解析

目录 QWidget基础项目文件解析 .pro文件解析 widget.h文件解析 widget.cpp文件解析 widget.ui文件解析 main.cpp文件解析 认识对象模型 窗口坐标系 QWidget基础项目文件解析 .pro文件解析 工程新建好之后&#xff0c;在工程目录列表中有⼀个后缀为 ".pro" …...

编程日记 2026/4/24 0:05:08

react使用if判断

1、第一种 function Dade(req:any){console.log(req)if(req.data.id 1){return <span>66666</span>}return <span style{{color:"red"}}>8888</span>}2、使用 {win.map((req,index) > ( <> <Dade data{req}/>{req.id 1 ?…...

编程日记 2026/4/24 2:41:04

conda 修复 libstdc++.so.6: version `GLIBCXX_3.4.30‘ not found 简便方法

ImportError: /data/home/hum/anaconda3/envs/ipc/bin/../lib/libstdc.so.6: version GLIBCXX_3.4.30 not found (required by /home/hum/anaconda3/envs/ipc/lib/python3.11/site-packages/paddle/base/libpaddle.so) 1. 检查版本 strings /data/home/hum/anaconda3/envs/ipc/…...

编程日记 2026/4/11 22:57:42