当前位置: 首页 > ai >正文

JAVA EE(进阶)_CSS

人与人之间总是渐渐疏离                                           

                                       ——陳長生.


 ❀主页:陳長生.-CSDN博客❀

📕上一篇:JAVA EE(进阶)_HTML-CSDN博客


1.CSS

1.1.介绍

如果说HTML是前端的骨架,那么CSS就是前端的外表

可以做到美化网页的效果

1.2.语法

<style>  

        p{

           

        }

</style>

style:用于定义元素的外观与格式

p:被改变的元素

style一般在head中设置

2.CSS选择器

2.1.标签选择器

css中自带的标签,将它原本的样式改变

<html lang="en">
<head><title>CSS</title><style>p{color: aqua;}</style>
</head>
<body><p>我是自带的p标签</p>
</body>
</html>

将p标签中添加一个颜色为青色的数值

结果:

2.2.class选择器

自定义变量,用于标签中的class类

创建时,变量前面要有个“.”

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{color: aqua;            }</style>
</head>
<body><p class="ccs">我是自定义的class变量</p>
</body>
</html>

将p标签中类中给一个自定义变量,该变量为一个颜色为青色的数值

结果:

2.3.id选择器

自定义变量,用于标签中的id属性

创建时,变量前面要有个“#”

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>#ccs{color: aquamarine;}</style></head>
<body><p id="ccs">我是自定义的id变量</p>
</body>
</html>

将p标签中类中给一个自定义变量,该变量为一个颜色为青色的数值

结果:

2.4.复合选择器

适用于表格标签,用于找寻列级别标签并设置样式

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>ul li{color: aquamarine;}    ul li a{    color: rgb(255, 0, 0);}</style>
</head>
<body><ul><li>第一行第一列</li><li>第一行第二列</li></ul><ul><li>第二行第一列</li><li> <a href="#">第二行第二列</a> </li><li>第二行第三列</li></ul>
</body>
</html>

将ul行li列的元素都赋为青色

将ul行li列a链接的元素赋为红色

2.5.通配符选择器

        上述列举的都是给单个属性才能使用的,例如class选择器只能在class中使用,id选择器只能在id中使用,而通配符可以给全局使用

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>*{color: aqua;}</style>
</head>
<body><p>1</p><p>2</p><p>3</p>
</body>
</html>

将全局的颜色都赋为青色

3.CSS样式

3.1.color

设置字体颜色

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.color{color: aqua;}</style>
</head>
<body><p class="color">颜色</p>
</body>
</html>

将颜色设置为青色

结果:

3.2.font-size

设置字体大小

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.font{font-size: 100px;}</style>
</head>
<body><p class="font">字体</p>
</body>
</html>

将字体设置为100像素大小

结果:

3.3.border

设置边框

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.border{border-width: 10px;border-style: solid;border-color:aquamarine}</style>
</head>
<body><p class="border">边框</p>
</body>
</html>

border-width:边框粗细

border-style:边框样式

border-color:边框颜色

结果:

也可以单独为边框的一遍设置粗细

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.border{border-top: 10px;border-bottom: 20px;border-left: 30px;border-right: 40px;border-style: solid;border-color: aquamarine;}</style>
</head>
<body><p class="border">边框</p>
</body>
</html>

结果:

3.4.width/height

设置宽和高

只适用于块级引用(“div” “h1-h6” “p”)

不适用于行级引用(“a” "span")

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{height: 100px;width: 100px;}</style>
</head>
<body><p class="ccs">1</p>
</body>
</html>

结果(按F12并移动到对应语句即可出现如图中效果):

3.5.margin

设置外边距

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{margin: 10px;    }</style>
</head>
<body><p class="ccs">外边距</p>
</body>
</html>

设置外边距为10像素

同理,外边距也可以像边框一样,单个给上下左右设置像素大小

结果(F12)

3.6.padding

设置内边距

<!DOCTYPE html>
<html lang="en">
<head><title>CSS</title><style>.ccs{padding: 10px;   }</style>
</head>
<body><p class="ccs">内边距</p>
</body>
</html>

设置外边距为10像素

同理,外边距也可以像边框一样,单个给上下左右设置像素大小

结果:

http://www.xdnf.cn/news/7953.html

相关文章:

  • 如何排查服务器 CPU 温度过高的问题并解决?
  • C++ 前缀和数组
  • C++STL(二)类模板
  • YCKC【二分查找专题】题解
  • 《对话记忆的进化史:智能体大模型如何实现跨轮次的深度交互》
  • 国酒华夏实业酒水供应链:全品类覆盖打造一站式购销平台
  • 第四十三节:人脸检测与识别-人脸识别基础 (Eigenfaces, Fisherfaces, LBPH)
  • Selenium自动化测试终极指南:从原理到实战
  • 【Python生成器全解析】从基础到高阶应用实战
  • C语言—Linux环境下CMake设置库(动态/静态)
  • 借助IEDA ,Git版本管理工具快速入门
  • 多线程(七)
  • 开疆智能Profinet转RS485网关连接工业型土壤水分温度传感器 配置案例
  • 如何在 Windows 10 或 11 上安装 Adminer?
  • 非欧空间计算加速:图神经网络与微分几何计算的GPU优化(流形数据的内存布局优化策略)
  • MEMO数据DID与ZK技术:赋能RWA代币化与可信流通的新基石
  • BI 大屏是什么意思?具体应用在哪些方面?
  • 全球气体压力调节器市场深度洞察:技术演进、区域竞争与可持续发展路径(2025-2031)
  • 洛谷P1226 【模板】快速幂
  • VRRP 协议
  • SQL优化学习笔记
  • 微店平台店铺商品接口开发指南
  • 【JavaScript异步编程终极指南】从回调地狱到Async/Await的实战突围
  • 动态库和静态库
  • NHANES最新指标推荐:α-Klotho
  • BUUCTF——Web1
  • 第十节第四部分:常见API:秒杀案例、Calendar
  • 学习黑客了解5分钟了解中间人攻击(MITM)
  • 软件的技术架构、应用架构、业务架构、数据架构、部署架构
  • Nginx核心功能深度解析与实战指南