【Java Web学习笔记】 2 - CSS入门

项目代码

零、 CSS引出

CSS 教程 官方教学文档

1.在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，费心费力。所以CSS就出现了。

2.使用CSS将HTML页面的内容与样式分离提高web开发的工作效率（针对前端开发）

3.CSS可以让html元素 + 样式 分离

一、CSS快速入门

1.引入案例

<!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元素进行样式的指定, div就是一个选择器(元素/标签选择器)4. width: 300px(属性); 表示对div样式的具体指定, 可以有多个5. 如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上6. 当运行页面时，div就会被 div{} 渲染，修饰7. 小经验：在调试css时，可以通过修改颜色，或者大小来看8. css的注释是 /* */ ,快捷键 ctrl+/--><style type="text/css">div {width: 200px;height: 100px;background-color: red;}</style>
</head>
<body>
<!--先使用传统的方法-->
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<div>hello, 天津</div>
<br/>
<div>hello, 深圳</div>
<br/>
</body>
</html>

2.基本语法

1. CSS语法可以分为两部分: (1)选择器 (2)声明

2.声明由属性和值组成，多个声明之间用分号分隔选择器

3.最后一条声明可以不加分号(建议加上)

4.一般每行只描述一个属性

5. CSS注释: /*注释内容*/

二、CSS常用样式

1.颜色color

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>颜色</title><!-- 为了讲课方便，我们就在这里写css样式 --><style type="text/css">/*说明:颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090color: rgb(255, 222, 1); //color: #ff7d44; //color: red;*/div {/*有三种方式，指定颜色1. 英文  //color: red2. 16进制 #ff7d44 [使用最多]  //color: #ff7d44;3. 三原色 rgb(1,1,1)  //color: rgb(255, 222, 1);*/color: rgb(255, 222, 1);}</style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

2.边框border widht height

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框</title><style type="text/css">div {/*width: 300px; 具体的像素*/width: 50%; /*百分比*/height: 100px;border: 1px dashed blue;}</style></head>
<body>
<div>韩顺平教育</div>
</body>
</html>

3.背景颜色background-color

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>背景</title><style>div {width: 200px;height: 100px;background-color: #ff7d44;}</style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

4.字体样式font-family

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

5.div居中 margin-left/right:auto;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div居中显示</title><style type="text/css">/*说明:1. font-size: 指定大小，可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型4. margin-left margin-right 如果设置为auto, 表示左右居中*/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>

6.文本居中text-align:center;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本居中显示</title><style type="text/css">/*说明:1. font-size: 指定大小，可以按照像素大小2. font-weight : 指定是否是粗体3. font-family : 指定字体类型4. margin-left margin-right 如果设置为auto, 表示左右居中5. 表示文本居中*/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>

7.超链接去下划线text-decoration:none;

<!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>

8.表格细线border-collapse:

<!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>

9.列表去修饰list-style:

<!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: red">hello, 北京</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 上海</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">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/>
<span>hello, span</span>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引入外部的css文件</title><!--1. rel : relation 关联2. href 表示要引入的css文件的位置，可以是web的完整路径3. type="text/css" 可以有，也可以不写4. 推荐使用第3种--><link rel="stylesheet" href="./css/my.css" />
</head>
<body>
<div>hello, 北京~</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

四、CSS选择器

1.元素选择器（作用全部）

1.最常见的CSS选择器是元素选择器。换句话说，文档的元系就是最基本的选择器。

2. CSS元素/标签选择器通常是某个HTML元素，比如p、 h1、a等

3.比如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>元素选择器</title><!-- 为了讲课方便，我们就在这里写css样式说明：元素选择器会修饰所有的对应的元素--><style type="text/css">h1{color: beige;}p {color: blue;}</style>
</head>
<body>
<h1>韩顺平教育</h1>
<h1>韩顺平教育2</h1>
<h1>韩顺平教育3</h1>
<p>hello, world~</p>
</body>
</html>

2.ID选择器（作用一个）

1. id选择器可以为标有特定id的HTML元素指定特定的样式。

2. id选择器以"#"来定义。

3.比如:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>id 选择器</title><!-- 为了讲课方便，我们就在这里写css样式1. 使用id选择器，需要先在要修饰元素指定id属性, id值是程序员自己指定2. id是唯一的，不能重复3. 在<style> 标签中指定id选择器时，前面需要有 #id值--><style type="text/css">#hsp1 {color: gold;}#css2 {color: green;}</style>
</head>
<body>
<h1 id="hsp1">韩顺平教育</h1>
<p id="css2">hello, world~</p>
</body>
</html>

3.class选择器（作用部分）

1. class类选择器，可以通过class属性选择去使用这个样式

2.基本语法

三个里面用两个

<!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</title><!-- 为了讲课方便，我们就在这里写css样式 --><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.优先级说明

优先级 行内样式 > id选择器 > class选择器 > 元素选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>选择器的优先级说明</title><!--1. 优先级 行内样式 > id选择器 > class选择器 > 元素选择器--><style type="text/css">.cls1 {color: green;}div {color: brown;}#id1 {color: yellow;}p {width: 400px;height: 100px;border: solid red;/*border-width 按照 上右下左 顺时针方向指定*/border-width: 20px 2px 8px 8px;}</style>
</head>
<body>
<h1>选择器的优先级说明</h1>
<div style="color: red" id="id1" class="cls1">韩顺平教育</div>
<p>p段落</p>
</body>
</html>

五、课堂练习

CSS 测验

 /*border-width 按照 上右下左 顺时针方向指定*/

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

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

相关文章

UE小计：Unreal Engine 中 Actor 数据的 JSON 序列化

UE小计：Unreal Engine 中 Actor 数据的 JSON 序列化

Unreal Engine 中 Actor 数据的 JSON 序列化 在游戏开发过程中&#xff0c;经常需要将游戏世界中的实体&#xff08;Actors&#xff09;信息导出到其他格式以便于分析、存储或交互。在Unreal Engine中&#xff0c;我们可以通过序列化这些实体的数据为JSON格式来实现这一目的。…
阅读更多...
一篇短文让你彻底理解什么是逻辑门电路

一篇短文让你彻底理解什么是逻辑门电路

一、门电路概述 门电路&#xff1a;实现基本运算、复合运算的单元电路&#xff0c;如与门、与非门、或门… 注意&#xff1a;门电路中以高/低电平表示逻辑状态的1/0 正逻辑与负逻辑&#xff1a; 正逻辑&#xff1a;高电平表示1、低电平表示0 负逻辑&#xff1a;高电平表示0、低…
阅读更多...
k8s ingress 无法找到端点

k8s ingress 无法找到端点

文章目录 ingress rule无法找到端点这个注解是什么意思呢&#xff1f;为何不生效呢&#xff1f;端点无法更新&#xff1f;如何确认ingressclass呢&#xff1f;修复端点无法发现的问题多个ingress controller 架构 ingress rule无法找到端点 在vnnox-cn集群创建ingress&#xf…
阅读更多...
数据结构（三）——算法和算法分析

数据结构（三）——算法和算法分析

&#x1f600;前言 数据结构和算法是计算机科学领域中至关重要的概念。它们为解决实际问题提供了有效的方法和步骤。算法作为解决问题的方法和步骤&#xff0c;在计算机中以指令的有限序列的形式表达。本文将介绍算法的定义、描述和程序设计等方面的内容&#xff0c;帮助您深入…
阅读更多...
【FPGA图像处理实战】- 图像基础知识

【FPGA图像处理实战】- 图像基础知识

视频图像处理是FPGA主要应用方向之一&#xff0c;很多FPGA从事或准备进入这一领域&#xff0c;我们现在开始发布新的FPGA实战专栏——FPGA图像处理。 FPGA处理视频图像处理的主要优势是流水线和并行处理运算&#xff0c;特别是现在视频分辨率越来越大&#xff0c;从720p到1080…
阅读更多...
二维A*算法

二维A*算法

MATLAB2016b可以正常运行 function bidirectional_ASTAR clc; clear; %% 初始化界面 n 11; % field size n x n tiles 20*20的界面 %wallpercent 0.3; % this percent of field is walls 15%的界面作为阻碍物&#xff08;墙&#xff09; cmap [1 1 1; ...% 1 - whit…
阅读更多...
RPC之GRPC：什么是GRPC、GRPC的优缺点、GRPC使用场景

RPC之GRPC：什么是GRPC、GRPC的优缺点、GRPC使用场景

简介 gRPC是一个现代的开源高性能远程过程调用(RPC)框架&#xff0c;可以在任何环境中运行。它可以高效地连接数据中心内和跨数据中心的服务&#xff0c;支持负载平衡、跟踪、运行状况检查和身份验证。它也适用于分布式计算的最后一英里&#xff0c;将设备、移动应用程序和浏览…
阅读更多...
linux特殊权限_suid_chattr_umask

linux特殊权限_suid_chattr_umask

3.3 特殊权限 如果一个文件很重要&#xff0c;需要依赖特殊权限避免其被删除。 由于特殊权限会拥有一些“特权”&#xff0c;因而用户若无特殊需要&#xff0c;不应该去打开这些权限&#xff0c;避免安全方面出现严重漏洞&#xff0c;甚至摧毁系统。3个权限是对了执行文件或目…
阅读更多...
软件使用-stm32入门

软件使用-stm32入门

这节主要是介绍大家使用两个软件。这两个软件也是比较常用的&#xff0c;里面也有很多有意思的功能&#xff0c;可以给大家介绍一下。 1. FlyMcu 软件 这个软件可以通过串口给 STM32 下载程序&#xff0c;如果你没有 STLINK&#xff0c;就可以用这个软件通过串口下载程序。 …
阅读更多...
FPGA串口接收解帧、并逐帧发送有效数据-2

FPGA串口接收解帧、并逐帧发送有效数据-2

FPGA串口接收解帧、并逐帧发送有效数据 工程实现的功能&#xff1a;FPGA串口接收到串口调试助手发来的数据&#xff0c;将其数据解帧。判断到正确的帧头和帧尾之后&#xff0c;将有效数据存入rx_data中&#xff1b;另一方面发送端将有效数据逐帧发送出去。 参考&#xff1a;正…
阅读更多...
差分数组相关知识点以及刷题

差分数组相关知识点以及刷题

差分数组 差分数组是什么&#xff1f; **举例&#xff1a;**对于数组考虑数组 a[1,3,3,5,8]&#xff0c;对其中的相邻元素两两作差&#xff08;右边减左边&#xff09;&#xff0c;得到数组 [2,0,2,3]。然后在开头补上 a[0]&#xff0c;得到差分数组&#xff1a; ​ d[1,2,0…
阅读更多...
【电路笔记】-串联和并联电阻

【电路笔记】-串联和并联电阻

串联和并联电阻 文章目录 串联和并联电阻1、概述2、串联和并联电阻示例13、串联和并联电阻示例2 电阻器可以无限数量的串联和并联组合连接在一起&#xff0c;形成复杂的电阻电路。 1、概述 在之前的教程中&#xff0c;我们学习了如何将各个电阻器连接在一起以形成串联电阻器网…
阅读更多...
编程和系统架构设计中性能优化等相关问题及解决方案

编程和系统架构设计中性能优化等相关问题及解决方案

在编程和系统架构设计中，性能优化、大并发编程、异步补偿以及分布式事务控制等问题是经常面临的挑战。要优雅地解决这些问题。 常见的技术难题： 编程中常见的技术难题有很多，以下列举了一些常见的技术难题： 1. 性能优化：如何提高程序的执行效率，优化算法和数据结构，减少…
阅读更多...
什么是Ros(四) - ros1和ros2的区别

什么是Ros(四) - ros1和ros2的区别

参考&#xff1a;【ros/ros2】ros1和ros2的区别-要点记录_shuaixio的博客-CSDN博客
阅读更多...
linux设置权限_setfacl_getfacl

linux设置权限_setfacl_getfacl

3.2 设置权限ACL&#xff08;access control list&#xff09; 假设&#xff1a;/data所有者与所属组均为root&#xff0c;在不改变所有者的前提下&#xff0c;要求用户tom对该目录有完全访问权限&#xff08;rwx&#xff09;。只能考虑&#xff1a; 方法一&#xff1a;给/dat…
阅读更多...
超详细实现【贪吃蛇】（1）

超详细实现【贪吃蛇】（1）

目录 技术要点介绍 &#x1f642;Win32 API &#x1f642;控制台程序 &#x1f387;标题 &#x1f387;大小 在Windows终端上&#xff1a; 在VS上&#xff1a; &#x1f387;坐标 &#x1f642;光标 &#x1f636;‍&#x1f32b;️GetStdHandle &#x1f636;‍&am…
阅读更多...
基于STM32 + TIM _定时器的基本机构和工作原理详解

基于STM32 + TIM _定时器的基本机构和工作原理详解

前言 本篇博客主要学习了解定时器的基本结构和工作原理&#xff0c;掌握定时器的驱动程序和设计。本篇博客大部分是自己收集和整理&#xff0c;如有侵权请联系我删除。 本次博客板子使用的是正点原子精英版&#xff0c;芯片是STM32F103ZET6,需要资料可以我拿取。 本博客内容原…
阅读更多...
多个模版结构特征提取

多个模版结构特征提取

HhsearchHitFeaturizer和HmmsearchHitFeaturizer类的get_templates方法返回TemplateSearchResult。TemplateSearchResult含有features&#xff08;TEMPLATE_FEATURES字典类型&#xff09;以及errors&#xff08;列表类型&#xff09; 和 warnings &#xff08;列表类型&#xf…
阅读更多...
【PyTorch】（四）损失函数与优化器

【PyTorch】（四）损失函数与优化器

文章目录 1. 损失函数2. 优化器 1. 损失函数 2. 优化器
阅读更多...
[数据结构]红黑树的定义以及添加原则

[数据结构]红黑树的定义以及添加原则

红黑树是一种自平衡的二叉查找树&#xff0c;是一种常用的数据结构 1972年出现&#xff0c;在当时被称为平衡二叉B树。后来1978年被修改为如今的“红黑树” 它是一个特殊的二叉查找树&#xff0c;红黑树的每一个节点上都有储存位表示节点的颜色 每一个节点可以是红或者黑&#…
阅读更多...
最新文章

Copyright @ 2022~2023