在html中加入外部css样式,如何引入CSS样式表?

CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表。引入样式表的常用方式有三种,即行内式、内嵌式、外链式,具体介绍如下。

e701c7178d69d11a6431318fc9b94db8.png

1.行内式

行内式也称内联样式,是通过标记的 Istyle属性来设置标记的样式,其基本语法格式如下:内容标记名>

上述语法中,style是标记的属性,实际上任何HTML标记都拥有 style属性,用来设置行内式。属性和属性值的书写规范与Cs样式规则一样,行内式只对其所在的标记及嵌套在其中的子标记起作用。

通常CSS的书写位置是在

头部标记中,行内式却是写在根标记中,例如下面的示例代码,即为行内式CS样式的写法。

使用CSS行内式修饰一级标题的字体大小和颜色

在上述代码中,使用

标记的style属性设置行内式CSS样式,用来修饰一级标题的字体大小和颜色。效果如下图所示。

071567679c2a2d14c184ebe90f898fcc.png

需要注意的是,行内式是通过标记的属性来控制样式的,这样并没有做到结构与样式分离,所以一般很少使用。

2. 内嵌式

内嵌式是将CSS代码集中写在HTML文档的

头部标记中,并且用< style>标记定义,其基本语法格式如下:

选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

/style>

上述语法中,

3.外链式

外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文档中,其基本语法格式如下:

<1ink href="css文件的路径" type="text/css" re1="stylesheet"  />

上述语法中, 标记需要放在

头部标记中,并且必须指定标记的个属性,具体介绍如下。

●href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

●type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CS样式表。

●rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

外链式是使用频率最高是最实用的CSS样式表,因为它将HTML代码与CSS代码分离为两个或多个文件,实现了将结构和样式完全分离,使得网页的前期制作和后期维护都十分方便。

1577370495235_%E5%AD%A6IT%E5%B0%B1%E5%88%B0%E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
EMlog博客古典式模板 v1.1 更新介绍 2014年8月15** 一、新增功能 1、侧边栏细节完善,增加了广告、微信等CSS样式,方便大家自定义。 2、添加了EM博客最强、最完整的“网站统计”。 3、侧边栏添加了12个flash小动画、小宠物,让你有更多的选择。 4、侧边栏所有栏目边框鼠标停留样式。 5、添加了“微语”头像随机化10张图片。一共做了4套头像。男女都有,包括:古典帅气文人武将、现代高富帅、古代千金贵族美女、现代白富美。 6、底部“high一下”改成了网络调用音乐和本地CSS,修改footer.php可更换音乐地址,默认是“黑客帝国”的片头音乐,调用的是其他外链mp3网站。 二、修正地方 1、如果首页“文章标题”太长怎么办?还会导致变成两排的难看局面,于是我给“文章标题”加了文字溢出剪切功能,过长的文字统统剪切掉,永远是一排。 2、给内容页的“上一篇”、“下一篇”做了自适应处理,不管标题再怎么长,都会以省略号代替溢出文字。 3、修正了侧边栏“个人资料”头像宽高不均导致撑破边框问题。 4、修正首页、内容页底部“站长”在“微语页”不显示的问题,感谢“EM群”的“老独头”和“沉默着继续”的帮助。 5、修正“微语”页的回复错位的问题,添加了一些细致漂亮的鼠标停留样式。 6、修改了一些图标的颜色,以前的不好看。如:置顶、二级置顶等图标。 7、修改了首页“阅读全文”错位问题。 2014年8月8**: 1、更新了一些细节问题。 2、如果你在后台应用里安装本模板失败,可能是服务器限制的附件不能超过2M,而本模板有4.4M多,所以最好是把模板下载到本地,然后用FTP上传到模板文件夹里,再到后台模板去激活。 模板介绍 介绍:古典大气、响应式、智能化设计,兼容IE6-11和各种现代浏览器。在手机、**板、PC上都能完美显示。 支持EMlog版本:5.31 模板兼容:此模版兼容IE6、7、8、9和IE 内核的浏览器,并支持以下浏览器。 模版特色 一、响应式设计,兼容PC 手机。哪怕是在240×320的分辨率下效果也不错。 二、采用1200px宽度设计。抛弃N年前流行的960px设计,现在全球分辨率用的最多是1366、1440、1024、1920,所以我采用了前2种分辨率的间宽度1200px,而1024下又是自适应宽度,所以不用担心1024。1200px阅读面积更宽,更大气。 三、纸质风格,良好阅读体验。博客正文默认采用16PX字体,阅读体验更加良好,字号有14px、16px、18px可供访客选择。背景为什么不用白色,白色黑字长久阅读会很累,白色是高光,反光度高,而用低光度的纸质背景对眼睛有适当的保护作用,长时间看不会觉得累。 四、网页元素都动起来。加载了国外高手制作的CSS3动画库,可以让网页任何元素都动起来,特别是文字。这样浏览者会发现你的网页比较有趣味,而且还能体现某些文字的重要性。 五、侧边栏美化。侧边栏用了黄金包边的宝石做标题,看起来更美观。默认宽度为276px,分辨率在小于880px时自动隐藏。 六、鼠标指针动静结合,组合丰富。在IE浏览器下鼠标指针是动态的ani,而在其他浏览器下鼠标指针则是静态的,指针样式都不一样。如果你看腻了这些鼠标指针,images里面还有2个备选的供你使用。 七、扩展性强,模板素材多多。设计本模版,光按钮和捐赠就设计了好多个,最终都没采用,以下是演示。 八、丰富多彩的顶部、底部横幅,全部随机显示。边欣赏博文,边欣赏世界名胜风景。每次打开网站都会给你带来新鲜的感觉。 九、双击网页空白区域自动滚屏。可以不用拉滚动条,让屏幕缓慢的滚动,慢慢阅读博文。 十、返回顶部不再单一。可以上、可以下。放在上下按钮上,屏幕自动滚屏。间按钮点击一下滚动三分之一的屏幕,再点击一下再次滚动,不断点击可以快速浏览整个网站。進入内容也后,点击即可查看评论。 十一、JS控制GIF动画播放。如果你的页面GIF加载的太多,就可以用这个功能控制GIF不自动播放,点击再播放。 十二、在浏览器低于800分辨率下,顶部、底部横幅将不显示。在手机低分辨率下,页面的图标、按钮几乎和PC的显示有许多地方不一样。更干净、更容易操作、更方便。 一十三:视频、图片、框架都支持自适应,但必须按照模板使用文档的css格式来写,不然无效,具体看模板使用文档。 一十四:分享、版权信息、二维码地址都集成在模板了,你无需安装插件,更省心。 一十五:自定义侧边栏的许多样式都是现成的,你只要复制、粘贴html代码在你的后台侧边栏就行了。去看看 一十六:使用本模板,你不再需要手机版本了。因为本模板是响应式设计的,既是手机版,也是**板、笔记本、PC版。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值