使用 CSS（样式表）的 class

最新推荐文章于 2024-04-24 17:58:49 发布
最新推荐文章于 2024-04-24 17:58:49 发布
阅读量1.9k 收藏 1
点赞数
文章标签： class css stylesheet javascript html 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l12345678/article/details/1838719
版权
class 是类，用来定义 style 属性。
在使用 CSS（样式表）时用 class 可以更方便。
举例：
文件1:C1.CSS
.Bar
{
border-right: 2px outset;
border-top: 2px outset;
overflow: auto;
border-left: 2px outset;
border-bottom: 2px outset;
}
.BCap
{
color: graytext;
}

.BDroper
{
border-right: 2px outset;
border-top: 2px outset;
border-left: 2px outset;
width: 1px;
cursor: move;
border-bottom: 2px outset;
position: static;
height: 100%;
}

这个文件定义了三个类(class):
Bar 工具栏的样式
BCap 工具栏标题的样式
BDroper 工具栏拖动按钮的样式

文件2:Main.HTM (HTML)
<HTML>
<HEAD>
<LINK href="C1.CSS" type=text/css rel=stylesheet> <!--样式表的路径-->
</HEAD>
<BODY>
<DIV class="Bar">
<a class="BDroper"></a>
<a class="BDroper"></a>
  
<a class="BCap">浏览</a>
<a href="javascript:history.back(1)">返回</a>
<a href="javascript:history.forward(1)">前进</a>
</DIV>
<BODY>
</HTML>

如果不是用样式表，文件2的内容如下：
<HTML>
<HEAD>
<!--没有样式表-->
</HEAD>
<BODY>
<DIV style="border-right: 2px outset; border-top: 2px outset; overflow: auto; border-left: 2px outset; border-bottom: 2px outset;">
<a style="border-right: 2px outset; border-top: 2px outset; border-left: 2px outset; width: 1px; cursor: move; border-bottom: 2px outset; position: static; height: 100%;"></a>
<a style="border-right: 2px outset; border-top: 2px outset; border-left: 2px outset; width: 1px; cursor: move; border-bottom: 2px outset; position: static; height: 100%;"></a>
  
<a style="color: graytext;">浏览</a>
<a href="javascript:history.back(1)">返回</a>
<a href="javascript:history.forward(1)">前进</a>
</DIV>
<BODY>
</HTML>

可见，如果使用样式表以及 class 属性，则对于样式的定义就能简单的多。
<a href="index.jsp" class="atop">
这定义了一个超链接，它的类为 atop。如果你能找到这个网页的样式表，你会找到这个类的定义。也许是这样的：
.atop
{
.....
}

当然，一个网页也可以使用多个样式表：
...
<HEAD>
<LINK href="C1.CSS" type=text/css rel=stylesheet> <!--样式表1的路径-->
<LINK href="../C2.CSS" type=text/css rel=stylesheet> <!--样式表2的路径-->
<LINK href="DD1/S1/Main.CSS" type=text/css rel=stylesheet> <!--样式表3的路径-->
</HEAD>
... 
欢乐未央
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
div+css样式表的id和class常用命名规则
09-25
用div+css样式表写页面有一段时间了，起初写div+css样式表的时候，最让我头疼的不是怎么写样式，而是给div+css样式起名，怎么样起才合适呢？
CSS学习笔记（1）
前端很杂，故名前端杂货铺 —— coderkey
06-17 94
一，基础选择器 1，标签选择器 （1）含义： 指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一CSS样式。 （2）语法： 标签名 { 属性1：属性值1； 属性1：属性值1； 属性1：属性值1； … } 2，类选择器 （1）含义： 在HTML元素中以class属性表示，在CSS中以一个点 “.” 号表示。 （2）语法： .类名 { 属性1：属性值1； 属性1：属性值1； 属性1：属性值1
如何引用外部样式表中定义的class
weixin_42593130的博客
12-25 113
如果要在 HTML 文档中使用外部样式表中定义的 class，需要在 HTML 中的元素上使用 class 属性。 例如，假设外部样式表中有一个名为 "warning" 的 class，它被定义为红色的文本，则可以这样使用它： <pclass="warning">这是一条警告信息。</p> ...
前端学习——样式绑定，外部样式表Class与内联样式Style
Wby_Nju的博客
02-07 977
文章目录一 样式表，绑定HTML Class1.1 v-bind和CSS复习1.2 简单绑定多个样式1.3 逐一判断样式-单个样式1.4 逐一判断样式-多个样式1.5 数组语法（有误）二 内联样式2.1 使用方式三 总结3.1 不使用vue，样式表a 单个属性b 多个属性3.2 不使用vue，内联样式a 单个属性b 多个属性3.3 使用vue，非逐个判断a 单个属性b 多个属性3.4 使用vue ...
重拾CSS（必看）
weixin_42107718的博客
12-09 902
重拾CSS@[TOC](重拾CSS)课程目标:CSS样式规则CSS字体样式属性font-size:字号大小font-family:字体CSS Unicode字体font-weight:字体粗细font-style:字体风格font:综合设置字体样式 (重点)开发者工具（chrome）选择器（重点）标签选择器（元素选择器）类选择器多类名选择器id选择器id选择器和类选择器区别通配符选择器伪类选择器链...
CSS样式和class应用
weixin_30512089的博客
07-30 161
style：样式属性有三种 1. 内联属性样式：元素内部使用style属性，如图： 复制到元素内部，便叫做内联样式。 2.内部标签形式 上面第一种办法只能使一个标签具备了某种属性样式，但是使用内部标签形式的方法，可以是一组标签具备某种样式。操作步骤如下： 　　a.添加style标签，并在该标签内部定义好class名（如linkstyle）及该class的内容...
CSS样式大全（网络收集整理）
02-08 1165
CSS样式大全（网络收集整理 字体属性：(font) 大小{font-size:x-large;}(特大)xx-small;(极小)一般中文用不到，只要用数值就可以，单位：PX、PD 样式{font-style:oblique;}(偏斜体)italic;(斜体)normal;(正常) 行高{line-height:nor...
css实例 css中id/class 详解样式表（外部样式表 内部样式表 内联样式 7种基础选择器 多重样式优先级 错误理解）[第一天]
PBitW的博客
08-03 6577
css实例 css中的id css中的class 样式表 外部样式表 内部样式表 内联样式 7种基础选择器 5种组合选择器 后代选择和子代选择注意 多重样式优先级 选择器错误理解
CSS样式表
全栈攻城狮JSON的博客
05-02 4126
目录 一、基础概念 二、CSS使用 1、行内样式 2、内部样式 3、外部样式 4、CSS语法 5、CSS注释 三、基本选择器 1、id选择器 2、class选择器 3、元素选择器/标签选择器 4、选择器优先级 5、样式表的优先级 四、CSS常用样式 1、color：字体颜色 2、width height：宽高 3、背景样式 4、文本样式 5、列表样式 6、边框样式 6、HTML&&CSS调试器 五、盒子模型 1、盒子的宽高 2、设置宽度=.
CSS 总结
weixin_56732056的博客
06-23 1131
一条CSS样式由选择器和两部分构成，在中包含了一条或多条声明。 内联样式 级联的优先级 CSS 基础知识总结 颜色，尺寸，对齐 颜色 尺寸 对齐 盒子模型 边框和边距 边框 边距 定位 static 静态 relative 相对 fixed 固定 absolute 绝对 溢出 浮动 不透明度 组合选择器 后代选择器 子选择器 伪类和伪元素 语法： 常用的伪类/伪元素的简单使用：...
JS 控制CSS样式表
01-19
使用javascript更改某个css class的属性… <style type=”text/css”> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline。 解决办法： 在IE里： document.styleSheets[0...
html css中id和class的区别比较
12-13
1，在css样式表中书写时，id选择符前面应该加前缀符号‘#’，而class选择符前面应该加前缀符号‘.’。 2，id属性一般在一个页面中只可以使用一次，而class可以被多次引用。 3，id作为元素的标签，用于区分不同结构...
markdown.css:优雅的样式表，用于呈现Markdown内容
04-28
优雅的样式表，用于呈现Markdown内容 入门 Markdown.css是一个基于大型Web和应用程序项目CSS开发工作多年的附带项目。 Markdown.css仅包含标题，段落，文本元素，列表，图像，blockquote，表格和代码CSS样式。 ...
关于css溢出
最新发布
weixin_44283589的博客
04-24 170
当四个元素之间存在空白字符时，这些空白字符会占据一定的宽度，导致元素超出了父容器的宽度，从而换行或掉下来。文字溢出：如果四个元素中的文本内容过长，并且没有设置溢出处理方式（如使用 ellipsis），文本内容可能会导致元素宽度超出父容器的宽度，从而换行或掉下来。边框和内边距：如果四个元素设置了边框或内边距，这些边框和内边距会增加元素的实际宽度，导致元素超出了父容器的宽度，从而换行或掉下来。浮动元素：如果四个元素的前面或后面存在浮动元素，浮动元素会影响到后续元素的布局，导致元素换行或掉下来。
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
weixin_49256908的博客
04-24 94
tailwindcss在使用cdn引入静态html的时候，vscode默认不会提示问题
CSS引入的三种方式
weixin_59272777的博客
04-24 434
样式引入方式特点优点缺点适用场景内联样式（Inline Styles）在HTML元素内部使用style属性定义样式直观、快速，无需额外编写CSS代码不利于样式统一管理和复用，增加HTML文档复杂性对单个元素进行临时或快速样式调整，无需多页面复用内部样式表（Internal Stylesheets）在HTML文档的部分使用标签定义样式样式集中管理，HTML文档结构更清晰需在每个页面部分重复编写样式，不利于样式复用和共享。
css中设置元素大小的属性block-size
qwguo
04-18 475
的逻辑组合，允许你同时设置元素的最小和最大高度。这些属性旨在让布局不再依赖于传统的物理方向（如上下左右），而是基于逻辑方向（如开始、结束、之前、之后）。这有助于在水平和垂直方向都能更好地控制布局，特别是在多语言环境中，其中文本可能从右到左或从下到上流动。因此，在使用此属性时，建议查阅最新的 CSS 规范并测试不同浏览器的兼容性。属性一起使用，以控制元素的盒模型（包括内容、内边距和边框）如何计算其总大小。是 CSS 中的一个属性，它用于设置元素的块级尺寸（即元素的高度）。
CSS基础——2.CSS选择器
weixin_66370632的博客
04-24 869
1. 通用选择器 通用选择器用星号*表示，它不匹配某个特定的 HTML 元素，而是匹配 HTML 文档中的每个元素,开发中通常使用通用选择器来清除 HTML元素中默认的内外边距
CSS简介与CSS选择器
小何代码咖啡馆
04-17 954
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 是也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
css内部样式表怎么添加
04-20
你可以在HTML文件中使用<style>标签来定义CSS样式。在<style>标签内部，你可以使用CSS语法来定义内部样式表。例如： <style> body { background-color: white; } h1 { color: red; } </style> 在上面的例子中，我定义了body标签的背景颜色为白色，h1标签的文字颜色为红色。在HTML文档中，可以通过使用class或id属性来引用这些样式。例如： <body class="my-page"> <h1 id="my-header">Hello, world!</h1> </body> 在上面的例子中，我定义了一个名为"my-page"的class和一个名为"my-header"的id。可以在CSS样式表中使用这些class和id来匹配HTML标签。例如： <style> .my-page { background-color: blue; } #my-header { font-size: 24px; } </style> 在上面的例子中，我将"my-page"类匹配到了body标签，并将其背景颜色设置为蓝色。将"my-header" ID匹配到了h1标签，并将其字体大小设置为24像素。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值