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

javaEE-10.CSS入门

news 2025/12/27 14:09:34

一.什么是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…...

编程日记 2025/2/11 13:20:03

eclipse配置Spring

1、从eclipse下载Spring工具进入 help – install new software… ，如下图： 点击 add ，按以下方式输入： Name : Spring Location : http://dist.springsource.com/release/TOOLS/update/e4.10/ 之后点击 add ，等待…...

编程日记 2025/2/11 13:16:58

爬虫技巧汇总

一、UA大列表 USER_AGENT_LIST 是一个包含多个用户代理字符串的列表，用于模拟不同浏览器和设备的请求。以下是一些常见的用户代理字符串： USER_AGENT_LIST [Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; Hot Lingo 2.0),Mozilla…...

编程日记 2025/2/11 13:07:47

基于UVM搭验证环境

基于UVM搭验证环境基本思路： 首先，我们搭建环境时一般都有一个目标的DUT。此时，我们可以结合所要验证的的模块、是否需要VIP、验证侧重点等在典型的UVM验证环境的基础上做适当调整后形成一个大体的环境架构。比如，需要一个ahb_vip…...

编程日记 2025/2/11 13:06:45

【JavaWeb10】服务器渲染技术 --- JSP

文章目录 🌍一. JSP❄️1.JSP介绍❄️2.JSP 运行原理❄️3.page 指令(常用的)❄️ 4.JSP 三种常用脚本1.声明脚本2.表达式脚本3.代码脚本 ❄️5.JSP 内置对象❄️6.JSP 域对象 🌍二. EL❄️1.EL 表达式介绍❄️2.EL 运算操作❄️3.EL 的 11 个隐含对象 &…...

编程日记 2025/2/11 13:04:42

【Hadoop】大数据权限管理工具Ranger2.1.0编译

目录编辑一、下载 ranger源码并编译二、报错信息报错1 报错2 报错3 报错4 一、下载 ranger源码并编译 ranger官网 https://ranger.apache.org/download.html 由于Ranger不提供二进制安装包，故需要maven编译。安装其它依赖： yum install gcc …...

编程日记 2025/2/11 12:59:35

微软AI研究团队推出LLaVA-Rad：轻量级开源基础模型，助力先进临床放射学报告生成

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/2/11 12:54:30

06排序 + 查找（D2_查找（D1_基础学习））

目录温故而知新 -------------------------------- 讲解一：基础理论一、什么是查找二、为什么需要查找 -------------------------------- 讲解二：代码学习一、顺序查找 1. 算法原理 2. 算法步骤 3. Java代码实现 4. 适用场景 5. 知识小…...

编程日记 2025/2/11 12:51:22

网站快速收录的秘诀：关键词布局与优化

本文转自：百万收录网原文链接：https://www.baiwanshoulu.com/107.html 网站快速收录的秘诀中，关键词布局与优化是至关重要的环节。以下是一些关于关键词布局与优化的建议，旨在帮助网站快速被搜索引擎收录并提高排名：…...

编程日记 2025/2/11 12:50:16

AI大语言模型

一、AIGC和生成式AI的概念 1-1、AIGC Al Generated Content：AI生成内容 1-2、生成式AI：generative ai AIGC是生成式 AI 技术在内容创作领域的具体应用成果。目前有许多知名的生成式 AI： 文本生成领域 OpenAI GPT 系列百度文心一言阿里通…...

编程日记 2025/2/11 12:49:15

03-DevOps-安装并初始化Gitlab

Gitlab可以理解为是自己搭建的GitHub，也就是自己的代码仓库。开启macvlan 在192.168.1.10服务器上，构建Macvlan网络，这种网络模式可以为每个容器独立分配ip。 docker network create -d macvlan \--subnet192.168.1.0/24 \--ip-range192.16…...

编程日记 2025/2/11 12:48:13

Mac重复文件，一键查找并清理的工具

不知果粉们，你们有没有过这样的经历：在翻找重要文件时，突然发现一大堆“孪生兄弟”——Mac重复文件？别担心，你不是一个人！今天，我们就来聊聊“Mac重复文件”，以及如何用几招轻松搞…...

编程日记 2025/2/11 12:45:09

Unity Mesh 切割算法详解

Mesh切割是游戏开发中实现物体断裂、破坏效果的核心技术。本教程将深入解析实时Mesh切割的数学原理，并提供完整的Unity实现方案。一、切割原理分析 1.1 几何基础切割平面方程：Ax By Cz D 0 顶点分类：每个顶点到平面的距离决定其位置…...

编程日记 2025/2/11 12:44:06

ASUS/华硕天选1 FA506I 原厂Win10 专业版系统工厂文件带ASUS Recovery恢复教程

华硕工厂文件恢复系统 ，安装结束后带隐藏分区，带一键恢复，以及机器所有的驱动和软件。支持型号：FA506IV FA506II FA506IU FA506IH 系统版本：Windows 10 专业版文件: ycoemxt.cn/1205.html 文件格式：工…...

编程日记 2025/2/11 12:41:02

【计算机中级职称信息安全工程师备考】密码学知识，经典题目

2022年信息安全工程师下午题题目密码学技术也可以用于实现隐私保护,利用加密技术阻止非法用户对隐私数据的未授权访问和滥用。若某员工的用户名为“admin”，计划用RSA 对用户名进行加密，假设选取的两个素数 p47，q71，公钥加密指…...

编程日记 2025/2/11 12:40:01

期权帮｜初识股指期货：股指期货的交割结算价是怎么来的？

锦鲤三三每日分享期权知识，帮助期权新手及时有效地掌握即市趋势与新资讯！ 初识股指期货：股指期货的交割结算价是怎么来的？ 股指期货的交割结算价是通过特定时间段内现货指数的算术平均价来确定的。这一价格作为现金交割的基准…...

编程日记 2025/2/11 12:37:59

伺服使能的含义解析

前言： 大家好，我是上位机马工，硕士毕业4年年入40万，目前在一家自动化公司担任软件经理，从事C#上位机软件开发8年以上！我们在开发C#的运动控制程序的时候，一个必要的步骤就是对伺服上使能&#…...

编程日记 2025/2/11 12:35:57

数据集成实例分享：金蝶云星空对接旺店通实现库存管理自动化

拆卸父项出库：金蝶云星空数据集成到旺店通企业奇门在现代企业的运营过程中，数据的高效流动和准确处理至关重要。本文将分享一个实际案例，展示如何通过轻易云数据集成平台，将金蝶云星空的数据无缝对接到旺店通企业奇门&#xff0…...

编程日记 2025/2/11 12:34:55

Android 常用设计模式和实例

一、什么是设计模式？ 设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块…...

编程日记 2025/2/11 12:33:54

模拟（典型算法思想）—— OJ例题算法解析思路

目录一、1576. 替换所有的问号 - 力扣（LeetCode）运行代码： 1. 输入和输出 2. 变量初始化 3. 遍历字符串 4. 替换逻辑 5. 返回结果整体分析 1. 思路总结 2. 为什么要这样设计 3. 时间复杂度与空间复杂度 4. 边界情况二、495. 提莫攻击 - 力扣（LeetCode） …...

编程日记 2025/2/11 12:31:52

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/9/8 13:50:07

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/12/17 2:10:10

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用一、背景与挑战大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/12/26 0:05:09

蓝桥杯 2024 15届国赛 A组儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐题目描述五彩斑斓的气球在蓝天下悠然飘荡，轻快的音乐在耳边持续回荡，小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下，六一来了。今天是六一儿童节，小蓝老师为了让大家在节…...

编程新知 2025/12/5 2:40:04

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/12/21 1:00:15

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务三、…...

编程新知 2025/11/13 13:42:14

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/12/15 22:07:34

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2025/12/14 14:08:57

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中，附加包含目录、附加库目录和附加依赖项是三个至关重要的设置，它们相互配合，确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中，这些概念容易让人混淆，但深入理解它们的作用和联…...

编程新知 2025/12/19 23:17:48

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/12/27 12:31:23

一.什么是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:设置外边距

相关文章：