【03】全局 CSS 样式
一、全局CSS样式——概述
1、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种容器类不能互相嵌套。
container类 用于固定宽度并支持响应式布局的容器
container-fluid类 用于100%宽度,占据全部视口(viewport)的容器
(1)container类
二、全局CSS样式——排版
1、标题
HTML 中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。
在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。
<div class="container">
<h1>
一级标题
<small>西安邮电大学</small>
</h1>
<h2>
二级标题
<small>计算机科学与技术专业</small>
</h2>
</div>
2、页面主体
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。
3、内联文本元素
被删除的文本 <del>HTML5删除文本</del>
插入的文件 <ins>插入文本</ins>
下划线的文本 <u>下划线文本</u>
小号文本 <small></small> 或 .small
着重文本 <strong></strong>
斜体文本 <em></em>
4、文本对齐
class = “text-left” 文本左对齐
class = “text-right” 文本右对齐
class = “text-center” 文本中对齐
class = “text-justify ” 文本两端对齐
class = “text-nowrap” 禁止文本换行
<p class="text-right">大雁塔</p>
<p class="text-center">西安邮电大学</p>
5、改变大小写
class =“text-lowercase” 转成小写
class = “text-uppercase” 转成大写
class = “text-capitalize” 首字母大写
<p class="text-lowercase">This is a Pencil</p>
<p class="text-capitalize">student java python go</p>
6、列表
(1)无样式列表
(2)内联列表
通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。
三、全局CSS样式——表格
<body>
<div class="container">
<table >
<thead>
<tr>
<th width="50">学号</th>
<th width="100">姓名</th>
<th width="50">性别</th>
<th width="50">年龄</th>
<th width="150">地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>刘备</td>
<td>男</td>
<td>36</td>
<td>小沛</td>
</tr>
<tr>
<td>1002</td>
<td>诸葛亮</td>
<td>男</td>
<td>26</td>
<td>襄阳</td>
</tr>
<tr>
<td>1003</td>
<td>曹操</td>
<td>男</td>
<td>38</td>
<td>许昌</td>
</tr>
<tr>
<td>1004</td>
<td>孙权</td>
<td>男</td>
<td>32</td>
<td>江油</td>
</tr>
</tbody>
</table>
</div>
</body>
1、表格全局类样式
描述:为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。
<table class="table" >
2、条纹状表格——表格隔行变色
描述:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。
<table class="table table-bordered table-striped" >
3、带边框的表格
描述:添加 .table-bordered 类为表格和其中的每个单元格增加边框。
4、鼠标悬停
通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
5、紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
<table class="table table-bordered table-striped table-hover table-condensed" >
6、状态类
通过这些状态类可以为行或单元格设置颜色。
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
(1)<tr class="success" >
(2)<tr class="info">
(3)<tr class="warning">
(4)<tr class="danger">
7、响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
垂直方向的内容截断:响应式表格使用了 overflow-y: hidden 属性,这样就能将超出表格底部和顶部的内容截断。
————————————————
版权声明:本文为CSDN博主「陛下,再来一杯娃哈哈」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_46420078/article/details/122644126
- 上一篇 »13 CSS样式权重问题
- 下一篇 »css去除苹果默认样式