开发者学堂课程【前端开发框架 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>