章节
问答
课签
笔记
评论
占位
占位

全局样式

在制作Web页面时,前端人员都习惯为网站设置一个全局样式(reset.css)。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是轻量的CSS基础代码库,他并没有一味的重置样式,而是注重各浏览器基础表现,降低开发难度。大部分前端人员都具有归零的思想,但实际你会发现,归零之后的样式在开发过程中会存在着潜在的问题,例如,在全局样式表中将em变成一个普通标记,明明应该是斜体,怎么就没效果了呢?

Bootstrap框架在这一部分做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下:

  • 移除body的margin声明
  • 设置body的背景色为白色
  • 为排版设置了基本的字体、字号和行高
  • 设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式

小伙伴们,你们可以单击查看右侧“style.css”文件,来查看上面所说的全局样式(这个是从下载的boostrap.css中摘取出来的)。

其实Bootstrap的全局样式采用了normalize.css,但并没有一味的全部使用此重置样式,而是在此基础上进行了一些改良,让其更适合Bootstrap的设计思想。

你可以通过“normalize.less”(LESS版本)或“_normalize.scss”(Sass版本)进行深入的了解。

 

任务

我来试试:查看style.css中的全局样式代码,感受它的设计思想。

?不会了怎么办
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
html {
font-family:
      sans
      -serif;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / 慕移动8305337
页面自带的样式是用link引入,如果需要微调,可以在head里面使用<style></style>进行调节。

最新回答 / 土土的星
老师已经在html中引入了bootsrap 其中就定义有这个类标签 后面的style.css只是其中的一部分

最新回答 / 慕斯5209270
比如说 在css中某样式默认 margin :10px ; 那么在引用的bootstrap.css中 设置margin :20px  !important;就是重置样式 ,注意后面的“!important”这代表最高级别。多看看源代码

最新回答 / 慕函数5297628
记得把该导入的库都导入,       <link href="css/bootstrap.min.css" rel="stylesheet">        <!--你自己的样式文件 -->        <link href="css/your-style.css" rel="stylesheet">                <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->        ...

最新回答 / McgregorVon
慕课网的两种教学模式:视频编码很多的课程当中,是穿插着使用这两种模式的。放过一集的话,就应该不是浏览器或插件的问题,其他情况,需要详细描述情况判断。

最新回答 / 慕移动9181930
可以先看一下“搭建可靠的mongoDB集群”嗯,加个空格更好看,但不加也不为错啊。

最新回答 / 知音1005
直接作为静态页面放在web工程里,然后运行服务器访问就行了

最新回答 / s深海i
<...图片...>我的是这样

已采纳回答 / qq_夏木_4
a href=# 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP

最新回答 / 慕粉4383214
比如说你在在做一个页面,开始之前先定义好这个页面的字体、字体大小、行高等等这些页面所有元素都能通用的样式,叫全局样式,通常将这些通用的样式放在一个单独的CSS文件中。好处是不需要在每个元素中再次设置同样的样式,而且也可以去除元素本身自带的样式。举例:*{margin:0;padding:0;font-family:"微软雅黑";font-size:14px;color:#000;}

最新回答 / 灬诺诺
DW软件可以看外部引用的文件

已采纳回答 / 左忆
和编辑器并没有什么关系

已采纳回答 / fz_Chris
其实本质上bootstrap就是一个现成的css框架,里边有现成的样式,组件给你调用,但是前提是你要弄懂具体的用法,在什么情况下用什么样式,类似于你使用java\python的系统库一样,先熟悉各个API的用法,才知道在什么情况下用什么API
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言