【KOS学习】HTML 引入CSS

于 2021-04-20 10:45:41 发布
阅读量193 收藏 3
点赞数
分类专栏： KOS学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46211029/article/details/115862956
版权

目录

一、CSS 简介

  • CSS 是一种描述 HTML 文档样式的语言。
  • CSS 指的是层叠样式表 (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局

二、CSS 语法

CSS 规则集（rule-set）由选择器和声明块组成（内部 CSS）：
在这里插入图片描述

  • 选择器指向需要设置样式的 HTML 元素。
  • 声明块包含一条或多条用分号分隔的声明。
  • 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
  • 多条 CSS 声明用分号分隔，声明块用花括号括起来。

三、如何添加 CSS

当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。

1、外部 CSS

  • 通过使用外部样式表，只需修改一个文件即可改变整个网站的外观
  • 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

"mystyle.css"

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  margin-left: 20px;
}

2、内部 CSS

  • 当单个文件需要特别样式时，就可以使用内部样式表。
  • 可以在 head 部分通过 <style> 标签定义内部样式表。
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

3、行内 CSS

  • 当特殊的样式需要应用到个别元素时，就可以使用内联样式。
  • 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

四、CSS 选择器

CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。

1、CSS id 选择器

  • id 选择器使用 HTML 元素的 id 属性来选择特定元素
  • 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素
  • 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id

实例
这条 CSS 规则将应用于 id=“para1” 的 HTML 元素：

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>

</body>
</html>

2、CSS 类选择器

  • 类选择器选择有特定 class 属性的 HTML 元素
  • 如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名

实例
在此例中，所有带有 class=“center” 的 HTML 元素将为红色且居中对齐：

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> 

</body>
</html>

3、CSS 元素选择器

  • 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
  • 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身

实例

<html>
<head>
<style type="text/css">
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
</style>
</head>

<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落。</p>
</body>
</html>

4、CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素。
实例
h1、h2 和 p 元素具有相同的样式定义：

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p>

</body>
</html>

五、CSS 属性

1、背景属性

属性描述
background-color设置元素的背景色
background-image设置元素的背景图像

2、CSS 边框

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

属性描述
border在一条声明中设置所有边框属性
border-style设置四条边框的样式.
可以设置一到四个值（用于上边框、右边框、下边框和左边框）
可设置border-*-style属性
border-width设置四条边框的宽度。
可以设置一到四个值（用于上边框、右边框、下边框和左边框）
可设置border-*-width属性
border-color设置四条边框的颜色。
可以设置一到四个值（用于上边框、右边框、下边框和左边框）
可设置border-*-color属性
border-radius设置圆角边框。可设置圆角的所有四个 border-*-radius 属性
border-style值描述
dotted定义点线边框
dashed定义虚线边框
solid定义实线边框
double定义双边框
groove定义 3D 坡口边框。效果取决于 border-color 值
ridge定义 3D 脊线边框。效果取决于 border-color 值
inset定义 3D inset 边框。效果取决于 border-color 值
outset定义 3D outset 边框。效果取决于 border-color 值
none定义无边框
hidden定义隐藏边框

除非设置了 border-style 属性，否则其他 CSS 边框属性都不会有任何作用
如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;
  • 上边框是虚线
  • 右边框是实线
  • 下边框是双线
  • 左边框是虚线

如果 border-style 属性设置三个值：

border-style: dotted solid double;
  • 上边框是虚线
  • 右和左边框是实线
  • 下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;
  • 上和下边框是虚线
  • 右和左边框是实线

如果 border-style 属性设置一个值：

border-style: dotted;
  • 四条边均为虚线

（border-width 和 border-color 也同样适用）

3、CSS 布局 - display 属性

  • display 属性是用于控制布局的最重要的 CSS 属性。
  • display 属性规定是否/如何显示元素。

display属性

  • none：此元素不会被显示。不占页面空间。
  • block：此元素将显示为块级元素，此元素前后会带有换行符。
  • inline：默认。此元素会被显示为内联元素，元素前后没有换行符。
  • inline-block：行内块元素。
  • flex：意为"弹性布局"，用来为盒状模型提供最大的灵活性。

隐藏一个元素可以通过display属性设置为"none"，或把visibility属性设置为"hidden"
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。

m0_46211029
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2023薪酬指南KOS.pdf
11-08
《2023薪酬指南KOS》是一份针对2023年度的薪酬标准与行业趋势的专业报告，主要关注KOS领域（可能是Knowledge, Operations, or Skills的缩写）的薪资水平和职业发展。这份指南提供了全面的数据分析，旨在帮助个人了解...
kos本地固件V4.zip
09-30
kos本地固件V4
Html与Css基础知识整合
tianynnb的博客
04-08 280
HTML5基础 2.1 HTML5基本结构 **HTML5****文档的基本结构如下： <!DOCTYPE html> <html> <head> <title>网页标题</title> </head> <body> 主体内容 </body> </html> 2.1.1 文档类型声明**<!DOCTYPE> 就是HTML5的DOCTYPE声明 —**在HT
CSS 初学 （二）使用、注释
weixin_42646630的博客
03-17 402
如何添加 CSS 当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。 三种使用 CSS 的方法 有三种插入样式表的方法： 外部 CSS 内部 CSS 行内 CSS 外部 CSS 通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！ 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。 外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。 外部 .css 文件不应包含任何 HTML 标签
KOS系统与服务器通信接口.docx
09-30
KOS 系统与服务器通信接口 KOS 系统是一种基于 OpenWRT 的路由器操作系统，旨在为用户提供稳定、高速的网络连接体验。为了实现这个目标，KOS 系统需要与服务器进行通信，以获取最新的软件更新、配置信息和安全 ...
kos.rar_KOS_时间片
09-24
接着，我们引入队列数据结构来组织这些进程。在操作系统中，通常使用链表或数组来实现队列，以便进行进程的添加、删除和调度。在这个项目中，"kos.c"文件可能包含了队列的实现，如FIFO（先进先出）队列，用于存储...
kos
03-28
7. **学习资源**： 对于想要深入理解和开发C语言操作系统的人来说，可以从经典的《现代操作系统》(Andrew S. Tanenbaum)和《C语言程序设计》(Brian W. Kernighan & Dennis M. Ritchie)开始。 8. **调试和测试**： ...
PPO算法，即Proximal Policy Optimization（近端策略优化）.pdf
08-05
PPO算法，即Proximal Policy Optimization（近端策略优化），是一种在强化学习领域中广泛应用的策略梯度方法。由OpenAI在2017年提出，PPO旨在解决传统策略梯度方法中策略更新过大导致的训练不稳定问题。它通过引入限制策略更新范围的机制，在保证收敛性的同时提高了算法的稳定性和效率。 一、PPO算法简介 PPO算法的核心思想是通过优化一个特定的目标函数来更新策略，但在这个过程中严格限制策略变化的幅度。具体来说，PPO引入了裁剪（Clipping）和信赖域（Trust Region）的概念，以确保策略在更新过程中不会偏离太远，从而保持训练的稳定性。 二、PPO算法的主要变体 PPO算法主要有两种变体：裁剪版（Clipped PPO）和信赖域版（Adaptive KL Penalty PPO）。其中，裁剪版PPO更为常见，它通过裁剪概率比率来限制策略更新的幅度，而信赖域版PPO则使用KL散度作为约束条件，并通过自适应调整惩罚系数来保持策略的稳定更新。PPO算法，即Proximal Policy Optimization（近端策略优化），是一种在强化学习领域中广
GC032A datasheet（侵删）
08-05
GC032A datasheet（侵删）
opencv的概要介绍与分析
08-05
OpenCV (Open Source Computer Vision Library) 是一个开源的计算机视觉和机器学习软件库。它提供了大量的算法和函数，可用于图像处理、视频分析、特征检测、对象识别等多种应用。下面是一些关于 OpenCV 的资源描述，帮助您学习和使用这项强大的技术。 ### OpenCV 资源描述 #### 1. **官方文档和GitHub仓库** - **GitHub 仓库**：OpenCV 的官方 GitHub 仓库是获取最新代码、预训练模型、开发指南和示例代码的地方。这是了解 OpenCV 最新进展和功能的最佳起点。 - **官方文档**：OpenCV 的官方文档包含了详细的使用说明、API 参考和常见问题解答。 #### 2. **在线教程和课程** - **Codecademy**：Codecademy 提供了互动式的 OpenCV 课程，适合完全的新手。 - **freeCodeCamp**：freeCodeCamp 是一个非营利性组织，提供免费的编码课程，包括 OpenCV 基础。 #### 3. **书籍** - **《Learning
基于python3+opencv3做的中国车牌识别源码+文档说明+使用说明
08-05
<项目介绍> 算法思想来自于网上资源，先使用图像边缘和车牌颜色定位车牌，再识别字符。车牌定位在predict方法中，为说明清楚，完成代码和测试后，加了很多注释，请参看源码。车牌字符识别也在predict方法中，请参看源码中的注释，需要说明的是，车牌字符识别使用的算法是opencv的SVM， opencv的SVM使用代码来自于opencv附带的sample，Stat - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
不同版本yolo介绍大全.pdf
08-05
YOLO（You Only Look Once）是一种流行的目标检测算法系列，自2016年由Joseph Redmon等人提出以来，已经发展出多个版本，每个版本都在性能、速度和准确性上进行了不同程度的优化和改进。以下是对不同版本YOLO的详细介绍： 1. YOLOv1 核心特点：提出了一个统一的模型，能够在单次传递中直接从完整图像预测边界框和类别概率。 优点：速度快，可以达到实时检测；在大型目标上表现较好；利用卷积神经网络提取特征并直接预测边界框和类别；损失函数简单，易于训练和调整。 缺点：精度不高，特别是对小型物体的检测能力较弱；对于相互重叠的物体，只能检测其中一个；定位误差较大；无法检测长形物体。 2. YOLOv2（也称为Darknet-19） 改进：通过使用批量归一化、多尺度锚定框以及其他优化技术，对YOLOv1进行了改进。 优点：精度和速度均有所提升，检测准确率比YOLOv1更高；使用了batch normalization技术，有助于减轻过拟合问题。 缺点：一个分类器只能检测固定数量的物体，无法处理可变数量的物体；训练和调整模型需要更多的计算资源和时间。 3.
数模数学建模数学模型下料问题数模数学建模数学模型下料问题
最新发布
08-05
数模数学建模数学模型下料问题数模数学建模数学模型下料问题
埃森哲埃森哲市场洞察分析.pdf
08-05
【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析.pdf【埃森哲】埃森哲市场洞察分析
校园闲置物品微信公众号交易平台的设计与实现(论文+源码)_kaic.zip
08-05
校园闲置物品微信公众号交易平台的设计与实现(论文+源码)_kaic
销售员业绩统计表.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
销售指标完成对比图.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
1111111111111111111111111111111111111111111111
08-05
1111111111111111111111111111111111111111111111
基于MATLAB谷物计数系统.zip
08-05
MATLAB可以使用形态学操作来进行图像计数。形态学操作是一种基于图像形状和结构特征的图像处理方法。 在MATLAB中，可以使用以下函数进行形态学计数： 1. imerode函数：用于图像的腐蚀操作。腐蚀可以用来检测物体的边界或减小物体的大小。 语法：B = imerode(A, se)，其中A是输入图像，se是结构元素（定义腐蚀的形状和尺寸），B是输出图像。 2. imdilate函数：用于图像的膨胀操作。膨胀可以增大物体的大小或连接物体的间隙。 语法：B = imdilate(A, se)，其中A是输入图像，se是结构元素，B是输出图像。 3. bwmorph函数：用于对二值图像进行形态学变换。 语法：B = bwmorph(A, operation)，其中A是输入图像，operation是形态学操作（如open、close、dilate等），B是输出图像。 使用这些函数可以进行一系列形态学操作，如开操作（先腐蚀后膨胀，用于去除小的物体），闭操作（先膨胀后腐蚀，用于填充物体间的空隙），连通组件分析等，从而实现图像的计数。 以下是一个示例代码，演示了如何
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值