javaweb学习day02（CSS）

一、CSS介绍

1 官方文档

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • 地址: https://www.w3school.com.cn/css/index.asp
  • 离线文档: W3School 离线手册(2017.03.11 版).chm

2 为什么需要 CSS 

  • 在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力。所以 CSS 就出现了。
  • 使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发)
  • CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面

3 CSS 快速入门 

应用实例 simple_css.html 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css 快速入门</title><!-- 老师解读1. 在 head 标签内，出现了 <style type="text/css"></style>2. 表示要写 css 内容3. div{} 表示对 div 元素进行样式的指定4. width: 300px(属性); 表示对 div 样式的具体指定, 可以有多个5. 如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上6. 当运行页面时，div 就会被 div{} 渲染，修饰
--><style type="text/css" >div{width: 300px;height: 100px;background-color: beige;}</style>
</head>
<body><div>hello, 北京</div><br/><div >hello, 上海</div><br/><div>hello, 天津</div><br/><div>hello, 深圳</div><br/>
</body>
</html>

 4 CSS 语法

  • CSS 语法可以分为两部分： (1)选择器 (2)声明 
  • 声明由属性和值组成，多个声明之间用分号分隔 
  •  最后一条声明可以不加分号(建议加上)
  • 一般每行只描述一个属性
  • . CSS 注释：/*注释内容*/, 类似 java 

二、常用样式

1 字体颜色

  • 颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>颜色</title><!--    说明:颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090color: rgb(255, 222, 1); //color: #ff7d44; //color: red;--><style type="text/css">/*有三种方式，指定颜色1. 英文2. 16 进制 #ff7d44 [使用最多]3. 三原色 rgb(1,1,1)*/div{color: #ff7d44;}</style>
</head>
<body><div>林然</div>
</body>
</html>

2 边框 border

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框</title><style type="text/css">div{width: 300px;height: 100px;border: 6px solid blue ;}</style>
</head>
<body><div>林然</div>
</body>
</html>

3 宽度 width/高度 height 

宽度/高度像素值：100px； 也可以是百分比值：50%； 

4 背景颜色 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景</title><style type="text/css">div{background-color: #ff7d44;width: 200px;height: 100px;}</style>
</head>
<body><div>Linran</div>
</body>
</html>

 5 字体样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>字体样式</title>/*说明:1. font-size: 指定大小，可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型*/<style type="text/css">div{border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏;}</style>
</head>
<body><div>林然</div>
</body>
</html>

6 DIV 居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div 居中</title>/*说明:1. font-size: 指定大小，可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型4.margin-left和margin-right设置为auto，则为左右居中*/<style type="text/css">div{border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏;margin-left: auto;margin-right: auto;}</style>
</head>
<body><div>林然</div>
</body>
</html>

 7 文本居中

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本 居中</title>/*说明:1. font-size: 指定大小，可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型4.margin-left和margin-right设置为auto，则为左右居中*/<style type="text/css">div{border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏;margin-left: auto;margin-right: auto;text-align: center;}</style>
</head>
<body><div>林然</div>
</body>
</html>

 8 超链接去下划线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接去掉下划线</title><!-- 1. decoration 修饰--><style type="text/css">a {text-decoration: none;}</style>
</head>
<body><a href="http://www.baidu.com">点击到百度</a>
</body>
</html>

 9 表格细线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格细线</title><style type="text/css">/*设置边框 : border: 1px solid black将边框合并: border-collapse: collapse;指定宽度： width设置边框： 给 td, th 指定即可 border: 1px solid black;1. table, tr, td 表示组合选择器2. 就是 table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性*/table, tr, td {width: 300px;border: 1px solid black;border-collapse: collapse;}</style>
</head>
<body>
<table><tr><td align=center colspan="3">星期一菜谱</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小葱豆腐</td><td>炒白菜</td></tr><tr><td rowspan=2>荤菜</td><td>油闷大虾</td><td>海参鱼翅</td></tr><tr><td>红烧肉</td><td>烤全羊</td></tr>
</table>
</body>
</html>

10 列表去修饰

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表去修饰</title><style type="text/css">ul {/*说明:list-style:none 表示去掉默认的修饰*/list-style: none;}</style>
</head>
<body><ul><li>三国演义</li><li>红楼梦</li><li>西游记</li><li>水浒传</li></ul>
</body>
</html>

三、CSS 使用三种方式

1 在标签的 style 属性上设置 CSS 样式 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>在标签的 style 属性上设置 CSS 样式</title></head>
<body><div style="width: 300px;height: 100px;background-color: beige">hello, 北京</div><br/><div style="width: 300px;height: 100px;background-color: beige" >hello, 上海</div><br/><div style="width: 300px;height: 100px;background-color: beige">hello, 天津</div><br/><div style="width: 300px;height: 100px;background-color: beige">hello, 深圳</div><br/>
</body>
</html>

 

2 在 head 标签中，使用 style 标签来定义需要的 CSS 样式 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>在 head 标签中，使用 style 标签来定义需要的 CSS 样式</title><style type="text/css">div{width: 300px;height: 100px;background-color: beige;}span{border: 1px solid red;}</style></head>
<body><div >hello, 北京</div><br/><div >hello, 上海</div><br/><div >hello, 天津</div><br/><div>hello, 深圳</div><br/><span>hello, span</span>
</body>
</html>

 

3 把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入</title><!--link 标签专门用来引入 css 样式代码--><!-- rel:relation 关联href 表示要引入的css文件的位置，可以是完整的web的路径--><link rel="stylesheet" type="text/css" href="./css/my.css">
</head>
<body><div>hello, 北京~</div><br/><div>hello, 上海</div><br/><span>hello, span</span>
</body>
</html>
div{width: 200px;height: 100px;background-color: brown;
}
span{border: 2px dashed blue;
}

四、CSS 选择器

1 元素 选择器

 2 ID 选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式 
  • id 选择器以 "#" 来定义
  • id选择器只能特定选择一个

3 class 选择器 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>类选择器</title><!-- 为了讲课方便，我们就在这里写 css 样式
老韩解读
1. 使用 class 选择器，需要在被修饰的元素上，设置 class 属性,属性值程序员指
定
2. class 属性的值，可以重复
3. 需要在 <style></style> 指定类选择器的具体样式, 前面需要是 .类选择器名
称
--><style type="text/css">.css1 {color: red;}.css2 {color: sandybrown;}</style>
</head>
<body><div class="css1">教育</div><div class="css1">教育 8</div><p class="css2">hello, world~</p>
</body>
</html>

 4 组合选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器</title><style type="text/css">/*组合选择器的基本语法:选择器 1，选择器 2，选择器 n{ 属性：值; }*/.class01,#id01{width: 300px;height: 100px;border: 2px solid red;}</style>
</head>
<body><div class="class01">教育</div><p id="id01">hello, world~</p>
</body>
</html>

5 优先级说明

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【评论送书】AIGC重塑教育：AI大模型驱动的教育变革与实践

【评论送书】AIGC重塑教育：AI大模型驱动的教育变革与实践

作者&#xff1a;刘文勇 来源&#xff1a;IT阅读排行榜 本文摘编自《AIGC重塑教育&#xff1a;AI大模型驱动的教育变革与实践》&#xff0c;机械工业出版社出版 这次&#xff0c;狼真的来了。 AI正迅猛地改变着我们的生活。根据高盛发布的一份报告&#xff0c;AI有可能取代…
阅读更多...
原型模式-Prototype Pattern

原型模式-Prototype Pattern

原文地址：https://jaune162.blog/design-pattern/prototype-pattern/ 引言 在Java中如果我们想要拷贝一个对象应该怎么做？第一种方法是使用 getter和setter方法一个字段一个字段设置。或者使用 BeanUtils.copyProperties() 方法。这种方式不仅能实现相同类型之间对象的拷贝，…
阅读更多...
嵌入式——Flash（W25Q64）

嵌入式——Flash（W25Q64）

目录 一、初识W25Q64 1. 基本认识 2. 引脚介绍 ​编辑 二、W25Q64特性 1. SPI模式 2. 双输出SPI方式 三、状态寄存器 1. BUSY位 2. WEL位 3. BP2、BP1、 BP0位 4. TB位 5. 保留位 6. SRP位 四、常用操作指令 1. 写使能指令&#xff08;06h&#xff09; 2. 写禁…
阅读更多...
《区块链公链数据分析简易速速上手小册》第1章：区块链基础（2024 最新版）

《区块链公链数据分析简易速速上手小册》第1章：区块链基础（2024 最新版）

文章目录 1.1 区块链技术概览&#xff1a;深入探究与实用案例1.1.1 区块链的核心概念1.1.2 重点案例&#xff1a;供应链管理1.1.3 拓展案例 1&#xff1a;数字身份验证1.1.4 拓展案例 2&#xff1a;智能合约在房地产交易中的应用 1.2 主流公链介绍1.2.1 公链的核心概念1.2.2 重…
阅读更多...
【复现】大华 DSS SQL 注入漏洞_46

【复现】大华 DSS SQL 注入漏洞_46

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 大华DSS是大华的大型监控管理应用平台&#xff0c;支持几乎所有涉及监控等方面的操作&#xff0c;支持多级跨平台联网等操作。 可…
阅读更多...
人工智能学习与实训笔记（一）：零基础理解神经网络

人工智能学习与实训笔记（一）：零基础理解神经网络

目录 一、什么是神经网络模型 二、机器学习的类型 2.1 监督学习 2.2 无监督学习 2.3 半监督学习 2.4 强化学习 三、网络模型结构基础 3.1 单层网络 ​编辑 3.2 多层网络 3.3 非线性多层网络 四、 回归问题实操&#xff1a;使用Python和NumPy实现波士顿房价预测任务 一…
阅读更多...
深度学习基础之《TensorFlow框架（4）—Operation》

深度学习基础之《TensorFlow框架（4）—Operation》

一、常见的OP 1、举例 类型实例标量运算add&#xff0c;sub&#xff0c;mul&#xff0c;div&#xff0c;exp&#xff0c;log&#xff0c;greater&#xff0c;less&#xff0c;equal向量运算concat&#xff0c;slice&#xff0c;splot&#xff0c;canstant&#xff0c;rank&am…
阅读更多...
【汇总】解决IndexedDB报Failed to execute ‘transaction‘ on ‘IDBDatabase‘

【汇总】解决IndexedDB报Failed to execute ‘transaction‘ on ‘IDBDatabase‘

问题发现 再学习HTML5中&#xff0c;有介绍到 Web 存储&#xff0c;当代码编写完成后&#xff0c;运行报错 Failed to execute ‘transaction’ on ‘IDBDatabase’: One of the specified object stores was not found. 示例代码如下&#xff1a; <!DOCTYPE html> <…
阅读更多...
迷失在前端框架中的初级开发者，总觉得大厦要从二层开始建

迷失在前端框架中的初级开发者，总觉得大厦要从二层开始建

知乎有人提问&#xff1a;现在是框架主导前端时代&#xff0c;还有必要学习Html&#xff0c;CSS和JavaScript吗&#xff1f;我看很愕然&#xff0c;框架可以节省力气&#xff0c;难道都可以替代前端基础了吗&#xff1f; 一、起因 因为贝格前端工场的主营业务就是前端开发&…
阅读更多...
Linux桌面

Linux桌面

系统信息的截图 登录界面右下角可以切换 Ubuntu on Wayland &#xff0c;虽然还是测试版&#xff0c;不过体验已经比之前的 Xorg 好多了&#xff0c;最笔记本上使用最影响体验的高分屏适配功能&#xff0c;在 wayland 中也是几乎完美支持的。 卸载 snap 这个 snap 是 Ubuntu …
阅读更多...
TIM（Timer）定时中断 P1

TIM（Timer）定时中断 P1

难点&#xff1a;定时器级联、主从模式 一、简介&#xff1a; 1.TIM&#xff08;Timer&#xff09;定时器 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断 补充&#xff1a; { 定时器本质上是一个计数器&#xff0c;可以工作在定时或计数模式&…
阅读更多...
⭐北邮复试刷题429. N 叉树的层序遍历（按层入队出队BFS）

⭐北邮复试刷题429. N 叉树的层序遍历（按层入队出队BFS）

429. N 叉树的层序遍历 给定一个 N 叉树&#xff0c;返回其节点值的层序遍历。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;。 树的序列化输入是用层序遍历&#xff0c;每组子节点都由 null 值分隔&#xff08;参见示例&#xff09;。 示例 1&#xff1a;输入&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023