【CSS】基本用法

一、CSS简介

层叠样式表(CSS)是一种用来表现HTML或XML文档样式的计算机语言,可以对网页中元素位置进行像素级精确控制。CSS的中文名称为层叠样式表,外文全称为Cascading Style Sheets,是计算机科学领域的一种技术。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

二、CSS的使用方式

CSS的使用方式主要包括内联样式、内部样式表和外部引用三种方法。内联样式是在HTML元素中直接使用style属性定义的,这种方法简单直接,但无法重用,通常仅用于快速测试或小规模的样式修改。内部样式表则是在HTML文档的<head>区域内使用<style>标签定义的。这种方式使得样式局限于当前文档,适用于单个页面需要独特样式的情况。而外部引用是将CSS代码单独写在一个文件中,然后在HTML中使用<link>标签引入这个外部样式表文件,这是最推荐的方式,因为它可以实现样式的重用,同时便于维护和管理多个页面的样式。

1、在元素中指定 style 属性

<td style="border: solid 2px red; background-color: white; font-size: 20px">\</td>;

 2、在页面中嵌入style样式块

1.<style>
2.td {
3.background-color: #7fffd4; /*颜色的RGB编码*/
4.width: 25%;
5.text-align: center;
6.font-size: 30px;
7.}
8.</style>

3、在页面中引入外部CSS文件

<link rel="stylesheet" type="text/css" href="/page/css/bootstrap.css" />

1、标签选择器

/* 为当前页面中所有的单元格设计统一的样式 */ 
td{background-color:#7fffd4;width:25%;text-align:center; font-size:30px; 
}

 2、类选择器

/* 类选择器,以.开头,对元素中指定class="title"的元素设计样式*/
.title {
color: white; /文字的颜色/
font-size: 22px; /文字的大小/
float: right; /设置容器为向右浮动/
margin-right: 10px; /设置容器距离右边10px/
}

3、ID选择器

/* ID选择器,以#开头,对元素中指定id="title"的元素设计样式*/
#title {}color: white;font-size: 22px;float: right;margin-right: 10px;
}


4、组合选择器
可以将标签选择器、ID选择器、类选择器和属性选择器等,组合成不同的选择器类型来构成更复杂的选择器。

/* 组合使用 ID 和 标签 选择器,并实现了层次关系 */
#button {td}font-size: 32px;font-family: 微软雅黑;text-align: center;
}

5、属性选择器

/*为DIV元素下拥有type="button"属性的元素设计样式*/div [type="button"] {color: white;font-size: 22px;
}

6、伪类选择器
设计伪类和伪元素可以实现其中的一些效果。使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。

/* 使用 hover 伪类设置鼠标划过时的变换效果 *//
#button td:hover {background-color: red; /* 当鼠标滑动时,变换背景颜色 *//
}
/*后代选择器*/
div>div>div{color:red
}

三、DIV盒模型 

盒模型(Box Model)
盒模型(也可称之为盒子模型)是CSS中一个重要的概念,理解了盒模型才能更好的排版。我们先来相像一下一个盒子,它有:外边距(margin, 与其他盒子之间的距离)、边框(border)、内间距(padding,盒子边框与内容之间的填充距离)、内容(content)四个属性;让我们俯视这个盒子,它有上下左右四条边,所以每个属性都包括四个部分:上下左右;这四部分可同时设置,也可分别设置;内间距可以理解为盒子里装的东西和边框的距离,而边框有厚薄和颜色之分,内容就是盒子中间装的东西,外边距就是边框外面自动留出的一段空白。
我们换种方式来理解这个盒模型:

  1. 内容区域(content):这是实际显示的内容,可以是文本、图片或其他HTML元素。
  2. 内边距(padding):围绕内容区域的空白区域,用于控制内容与边框之间的间距。
  3. 边框(border):包围内边距和内容的区域,可以设置宽度、样式和颜色。
  4. 外边距(margin):围绕整个div元素的空白区域,用于控制与其他元素之间的距离。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>盒模型基础</title>
<style>
body {
padding: 0;
margin: 0;
background-image: url("image/black-star.jpg");
}
div {
width: 450px; /* DIV必须明确设置高度与宽度 */
height: 200px;
margin: 40px auto; /* 上下外边距50px,左右水平居中*/
padding: 30px; /* 边框距离内容上下间距为40px */
border: solid 5px #ff7448;
color: #ffffff; /* 内容字体颜色为白色 */
font-size: 30px;
text-align: center; /* 让内容水平居中 */
line-height: 200px; /* 设置行高与高度相同,模拟垂直居中*/
}
</style>
</head>
<body>
<div>hell,world</div>
</body>
</html>

每篇一言:唯有前进,才能享受这被诅咒的疯狂。

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

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

相关文章

大学生跨保计算机--学习规划分享

写在前面 目标 绩点达到前三&#xff0c;修计算机双学位丰富简历&#xff0c;积极参与科研竞赛&#xff0c;提前为保研铺路 暑假 一个月时间&#xff0c;自学Python语言的基础语法&#xff0c;去B站找视频&#xff0c;为以后参加比赛打下一定的基础 开学后可能没有太多时间…

C语言函数:编程世界的魔法钥匙(2)-学习笔记

引言 注&#xff1a;由于这部分内容比较抽象&#xff0c;而小编我又是一个刚刚进入编程世界的计算机小白&#xff0c;所以我的介绍可能会有点让人啼笑皆非。希望大家多多包涵&#xff01;万分感谢&#xff01;待到小编我学有所成&#xff0c;一定会把这块知识点重新介绍一遍&a…

[Day 32] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

AI中的神經網絡技術 神經網絡&#xff08;Neural Networks&#xff09;是人工智能&#xff08;AI&#xff09;領域的一個重要分支&#xff0c;靈感來自於生物神經系統。本文將深入探討神經網絡的基本概念、結構、工作原理及其在AI中的應用&#xff0c;並通過Python代碼詳細解釋…

HarmonyOS Web组件(二)

1. HarmonyOS Web组件 官方文档 1.1. 混合开发的背景和好处 混合开发&#xff08;Hybrid Development&#xff09;是一种结合原生应用和Web应用的开发模式&#xff0c;旨在同时利用两者的优势。随着移动应用需求的多样化和复杂化&#xff0c;单一的开发方式往往难以满足所有…

sass版本更新,不推荐使用嵌套规则后的声明

目前在 Sass 中不推荐使用嵌套规则后的声明&#xff0c;在 为了通知用户即将进行的更改&#xff0c;并给他们时间进行更改 与之兼容的样式表。在未来的版本中&#xff0c;Dart Sass 将更改为 匹配纯 CSS 嵌套生成的顺序。Deprecation Warning: Sasss behavior for declarations…

对androidTestDebug 产物进行重新签名

在 Gradle 中&#xff0c;你可以通过以下步骤对子模块中的 androidTestDebug 产物进行重新签名操作&#xff1a; 1. 创建一个自定义的 Sign 任务 在主项目的 build.gradle 文件中&#xff0c;创建一个自定义任务来执行重新签名操作&#xff1a; task reSignAndroidTestDebug…

Pytorch学习笔记【B站:小土堆】

文章目录 1 基础环境配置&#xff08;CPU版&#xff09;2 PyTorch学习2.1 Dataset和DataLoader2.1.1 Dataset2.1.2 DataLoader 2.2 Tensorboardadd_scalaradd_imageadd_graph 2.3 Transforms2.3.1 ToTensor2.3.2 Normalize2.3.3 Resize2.3.4 Compose 2.4 torchvision中的数据集…

pnpm build打包时占内溢出

这两天在打包H5网页的时候失败&#xff0c;总是提示下方错误 FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 严重错误&#xff1a;堆限制附近标记压缩无效分配失败 - JavaScript 堆内存不足 尝试了多种方法&…

Linux源码安装的Redis如何配置systemd管理并设置开机启动

文章目录 实验前提实验 实验前提 已完成源码安装并能正常启动redis /usr/local/bin/redis-server能正常启动redis 实验 vim /etc/systemd/system/redis.service内容如下&#xff1a; [unit] Descriptionredis-server Afternetwork.target[Service] Typeforking ExecStart/…

【Blockly图形化积木编程二次开发学习笔记】5.自动保存与恢复

文章目录 引用使用 引用 <script src"./blockly/appengine/storage.js"></script>使用 <script>window.setTimeout(BlocklyStorage.restoreBlocks, 0); // 从本地存储中恢复块BlocklyStorage.backupOnUnload(); // 用户离开页面时自动将块备份到…

基于radix4的booth乘法器设计

下述乘法器是基于radix 4的booth乘法器&#xff0c;常用于集成电路IC的乘法器设计。 支持位宽可设置支持signsign、signunsign、unsignsign、unsignunsign; // FHDR------------------------------------------------------------ …

降雨量预测 | Matlab基于ARIMA-RBF降雨量预测

目录 效果一览基本介绍程序设计参考资料 效果一览 基本介绍 降雨量预测 | Matlab基于ARIMA-RBF降雨量预测 注&#xff1a;程序和数据放在一个文件夹。 程序语言为matlab&#xff0c;程序可出预测效果图&#xff0c;指标图; 代码特点&#xff1a;参数化编程、参数可方便更改、代…

web前端学习笔记Day02

web学习Day02 一、页面布局 盒子模型 盒子将页面的所有标签都包含在了一个矩形区域content(内容区域)->padding(内边距区域)->border(边框区域)->margin(外边距区域) div标签: 一行只能显示一个&#xff08;独占一行&#xff09;width默认为父元素宽度&#xff0c…

Docker核心技术:Docker原理之Namespace

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 Docker核心技术 系列文章&#xff1a;Docker原理之Namespace&#xff0c;其他文章快捷链接如下&#xff1a; 应用架构演进容器技术要解决哪些问题Docker的基本使用Docker是如何实现的 Docker核心技术&#xff1…

多模态AI:概念、用例、优势、挑战及发展未来

多模态实际上是在尝试复制人类的感知方式&#xff1a;我们将视觉、声音和触觉等感官输入结合起来&#xff0c;形成对现实的更细致入微的感知&#xff0c;并利用这些数据来做出决定或采取行动。多模态模式也在尝试做同样的事情。 多模态AI的应用范围正在不断扩大&#xff0c;那么…

【Spring】深入理解了IOC(控制反转)和DI(依赖注入)

学习时间&#xff1a;09&#xff1a;XX--10&#xff1a;28&#xff0c;50min 微信读书 今日学习Spring框架&#xff0c;有很大的收获&#xff0c;感觉是学习SpringBoot以来的一个里程碑&#xff0c;因为今天上午这50min理解了Spring框架的核心基础&#xff0c;控制反转&#x…

使用 useLazyAsyncData 提升数据加载体验

title: 使用 useLazyAsyncData 提升数据加载体验 date: 2024/7/19 updated: 2024/7/19 author: cmdragon excerpt: 摘要&#xff1a;本文介绍useLazyAsyncData函数在Nuxt 3中的使用&#xff0c;以提升数据加载体验。此函数支持异步获取数据并在组件中处理挂起与错误状态&…

生成式AI在IT领域的应用中,对产品,UI设计师,前端开发。后端开发,运维的影响?

生成式AI在IT领域的应用将对产品、UI设计师、前端开发、后端开发和运维等多个角色产生深远影响。 以下是对这些角色的具体影响、技术对比以及未来展望的分析&#xff1a; 产品经理 影响革新&#xff1a; 精准需求洞察&#xff1a;生成式AI深度挖掘市场数据与用户反馈&#xff0…

IOCTLance:一款针对x64 WDM驱动程序的漏洞检测工具

关于IOCTLance IOCTLance是一款针对x64 WDM驱动程序的漏洞检测工具&#xff0c;该工具来源于CODE BLUE 2023上展示的一个名为“使用符号执行和污点分析增强 WDM 驱动程序漏洞检测 ”的项目。该工具能够有效增强检测Windows驱动程序模型&#xff08;WDM&#xff09;驱动程序中各…

Redis之List列表

目录 一.列表讲解 二.列表命令 三.内部编码 四.应用场景 Redis的学习专栏&#xff1a;http://t.csdnimg.cn/a8cvV 一.列表讲解 列表类型是用来存储多个有序的字符串&#xff0c;如下所示&#xff0c;a、b、c、d、e五个元素从左到右组成了一个有序的列表&#xff0c;列表中的…