07_Bootstrap 全局 css 样式_排版2|学习笔记

简介: 快速学习07_Bootstrap 全局 css 样式_排版2

开发者学堂课程【前端开发框架 Bootstrap 使用教程07_Bootstrap 全局 css 样式_排版2】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4226


07_Bootstrap 全局 css 样式_排版2


目录

一、内联文本元素使用标签

二、对齐,改变大小写,缩略语,地址


一、内联文本元素使用标签

Marked text:

For highlighting a run of text due to its revevance in another context,use the <mark> tag

举例:<p>欢迎来到<mark>尚学堂</mark>,希望您能通过本套课程以及 Bootstrap 中文网来深入学习Bootstrap 开源框架</p>

被删除的文本:

对于被删除的文本使用<del>标签

举例:<p><del>欢迎</del>来到尚学堂,希望您能通过本套课程以及 Bootstrap 中文网来深入学习 Bootstrap 开源框架<br>

无用文本:

对于没用的文本使用<s>标签

举例:<p><s>欢迎</s>来到尚学堂,希望您能通过本套课程以及  Bootstrap 中 文网来深入学习 Bootstrap 开源框架<br>

注:<del>和<s>效果一样,分开写是为了使代码可读性更强

插入文本:

额外插入的文本使用<ins>标签

举例:<p><s>欢迎</s><ins>来到尚学堂</ins>,希望您能通过本套课程以及 Bootstrap 中文网来深入学习Bootstrap 开源框架<br>

带下划线的文本:

为文本添加下划线,使用<u>标签

举例:<p><s>欢迎</s><u>来到尚学堂</u>,希望您能通过本套课程以及 Bootstrap 中文网来深入学习Bootstrap 开源框架<br>

小号文本:

对于不需要强调的 inline 或 block 类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的 font-size。

还可以为行内元素赋予 .small 类以代替任何<small>元素。

举例:欢迎来到尚学堂,<small>希望您能通过本套课程以及 Bootstrap 中文网来深入学习 Bootstrap 开源框架</small>

着重:

通过增加 font-weight 值强调一段文本

举例:<p><strong>欢迎</strong><u>来到尚学堂</u>,希望您能通过本套课程以及 Bootstrap 中文网来深入学习Bootstrap开源框架<br>

斜体:

用斜体强调一段文本

举例:<p><em>欢迎</em><u>来到尚学堂</u>,希望您能通过本套课程以 及 Bootstrap 中文网来深入学习Bootstrap开源框架<br>


二、对齐,改变大小写,缩略语,地址

对齐

通过文本对齐类,可以简单方便的将文字重新对齐。

标签:<p class=”text-left">Left aligned text.</p>  

<p class ="text-center">Center aligned text.</p>

<p class=“text-right">Right aligned text.</p>

<p class=”text-justify">Justified text.</p>

<p.class=”text-nowrap">No.wrap text.</p>

改变大小写

通过这几个类可以改变文本的大小写

标签:<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalic">Capitalized text.</p>

缩略语

当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr>素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针,如想看完整的内容可把鼠|标悬停在缩略语上(对使用辅助技术的用户也可见),但需要包含 title 属性。

基本缩略语标签:<abbr title>=”attribute”>attr</abbr>

首字母缩略语:

为缩略语添加.initialism 类,可以让 font-size 变得稍微小些。

代码:<abbr title="HyperText Harkup Language” class="initialism”>HTHL</abbr>

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。

标签:<address>

相关文章
|
8天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
7天前
|
前端开发
Bootstrap5 文字排版3
Bootstrap 5 默认字体大小为 16px,行高 1.5,字体族为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素默认上边距为 0,下边距为 1rem (16px)。HTML 标题(h1 至 h6)和代码元素(code、kbd、pre)均有预设样式,方便快速开发和一致的视觉效果。
|
7天前
|
前端开发
Bootstrap5 文字排版2
Bootstrap 5 默认字体大小为 16px,行高 1.5,字体系列为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有 HTML 标题(h1 至 h6)均有预设样式,段落默认上下间距为 16px。此外,Bootstrap 5 还提供了高亮文本、缩写、引用块和描述列表等元素的样式定义。
|
14天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
91 1
|
22天前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
33 2
|
2天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过&lt;head&gt;部分的&lt;style&gt;标签定义;外部样式表适用于多个页面,通过&lt;link&gt;标签引用外部CSS文件;&lt;style&gt;定义样式,&lt;link&gt;引用资源;已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;,属性有color和bgcolor。
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
2天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
7天前
|
移动开发 前端开发
Bootstrap5 文字排版1
Bootstrap 5 的默认文字排版设置包括:font-size 为 16px,line-height 为 1.5,font-family 为 &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif。所有元素的 margin-top 为 0,margin-bottom 为 1rem。HTML 标题(h1 至 h6)和 .h1 至 .h6 类均定义了样式,还有 .display-1 至 .display-4 类用于更大的标题样式。small 元素用于创建更小且颜色更浅的文本。