【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，一经查实，立即删除！

相关文章

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

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

一、门电路概述 门电路&#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…
阅读更多...
linux特殊权限_suid_chattr_umask

linux特殊权限_suid_chattr_umask

3.3 特殊权限 如果一个文件很重要&#xff0c;需要依赖特殊权限避免其被删除。 由于特殊权限会拥有一些“特权”&#xff0c;因而用户若无特殊需要&#xff0c;不应该去打开这些权限&#xff0c;避免安全方面出现严重漏洞&#xff0c;甚至摧毁系统。3个权限是对了执行文件或目…
阅读更多...
FPGA串口接收解帧、并逐帧发送有效数据-2

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

FPGA串口接收解帧、并逐帧发送有效数据 工程实现的功能&#xff1a;FPGA串口接收到串口调试助手发来的数据&#xff0c;将其数据解帧。判断到正确的帧头和帧尾之后&#xff0c;将有效数据存入rx_data中&#xff1b;另一方面发送端将有效数据逐帧发送出去。 参考&#xff1a;正…
阅读更多...
【电路笔记】-串联和并联电阻

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

串联和并联电阻 文章目录 串联和并联电阻1、概述2、串联和并联电阻示例13、串联和并联电阻示例2 电阻器可以无限数量的串联和并联组合连接在一起&#xff0c;形成复杂的电阻电路。 1、概述 在之前的教程中&#xff0c;我们学习了如何将各个电阻器连接在一起以形成串联电阻器网…
阅读更多...
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,需要资料可以我拿取。 本博客内容原…
阅读更多...
[数据结构]红黑树的定义以及添加原则

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

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

代码生成器——MyBatisX插件

MyBatisX插件 MyBatis-Plus为我们提供了强大的mapper和service模板&#xff0c;能够大大的提高开发效率。 但是在真正开发过程中&#xff0c;MyBatis-Plus并不能为我们解决所有问题&#xff0c;例如一些复杂的SQL&#xff0c;多表联查&#xff0c;我们就需要自己去编写代码和SQ…
阅读更多...
密码学实验三

密码学实验三

第一题&#xff1a; 寻找满足特定条件的 e&#xff1b; 第一步&#xff1a; 第二步&#xff1a; 由式1.7知&#xff0c;给定e,p,q&#xff0c;就可计算出相应的RSA不动点的数目。因此设计算法步骤如下&#xff1a; 枚举找出所有与φ(n)互素的e。枚举所有满足条件的e&#xff…
阅读更多...
为XiunoBBS4.0开启redis缓存且支持密码验证

为XiunoBBS4.0开启redis缓存且支持密码验证

修改模块文件1 xiunoPHP/cache_redis.class.php: <?phpclass cache_redis {public $conf array();public $link NULL;public $cachepre ;public $errno 0;public $errstr ;public function __construct($conf array()) {if(!extension_loaded(Redis)) {return $thi…
阅读更多...
HTTP 基本概念(计算机网络)

HTTP 基本概念(计算机网络)

一、HTTP 是什么&#xff1f; HTTP(HyperText Transfer Protocol) &#xff1a;超文本传输协议。 HTTP 是一个在计算机世界里专门在「两点」之间「传输」文字、图片、音频、视频等「超文本」数据的「约定和规范」。 「HTTP 是用于从互联网服务器传输超文本到本地浏览器的协议…
阅读更多...
Linux部分基础指令讲解

Linux部分基础指令讲解

目录 1.echo指令 2.more指令 3.less指令&#xff08;重要&#xff09; 4.head指令 5.tail指令 6.管道| 7.时间相关的指令 8.cal指令 9.find指令 10.grep指令 1.echo指令 我们先看效果 如图所示我们可以看到显示器显示出了hellow world和hellow这两句话&#xff0c;我们的echo的…
阅读更多...
51单片机对SHT30的驱动，读取温湿度

51单片机对SHT30的驱动，读取温湿度

一、SHT30简介 SHT30温湿度传感器是一种数字式温湿度传感器&#xff0c;由Sensirion公司开发和生产。它具有高精度、快速响应和稳定性强的特点&#xff0c;被广泛用于气象观测、室内环境监测、智能家居和工业自动化等领域。 以下是SHT30温湿度传感器的主要特点&#xff1a; 高精…
阅读更多...
简单句子成分、阅读技巧

简单句子成分、阅读技巧

四、段落的主旨题&#xff1a;问这一段讲了什么&#xff08;一般都在段落的第一句话或最后一句话&#xff09; 词汇题的答案一般都在生词的上一句或者下一句 做题步骤&#xff1a; 1、先标段落 2、看题&#xff0c;划出关键词 3、去原文定位&#xff0c;标注中文意思 4、第一遍…
阅读更多...
Dart编程基础 - 一种新的编程语言

Dart编程基础 - 一种新的编程语言

Dart编程基础 – 一种新的编程语言 Dart Programming Essentials - A New Type of Programming Language By JacksonML Dart is a client-optimized language for fast apps on any platform From dart.dev 在1999年之前&#xff0c;和我一样对计算机技术感兴趣的伙伴们&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023