怎么引入css的样式,方法有哪些?

2020-07-05 10:30:15网站建设

CSS层叠样式表是用来控制网页样式和布局的,那么怎么引入CSS的样式,引用的方法有哪些呢?要知道使用不同的方法来引用css样式表,达到的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。

怎么引入css的样式,方法有哪些?

一、在行内标签元素中引入CSS

这种引入方法的写法为:<div style="background:red;color:#fff;">这是行内引入CSS方式</div>

这种方法只能改变当前标签的样式,这种方法一般适用于修改个别特别标签需要的样式。

二、嵌入方式引用CSS内部样式表

这种引入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。

这种方式引入写法为:<style> .content { background: #fff; } </style>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。

三、链接引入CSS样式方法

这类型方法有两种,一种是使用@import引入外部CSS文件,另一种是我们常见的<link>标签。

我们常用的方式是使用<link>标签来引入CSS样式表,它是属于XHTML,它会优先加载CSS文件到页面。而@import是属于CSS2,它会先加载HTML结构,然后再加载CSS文件。

link标签引入CSS样式写法为:<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

@import引入CSS写法为:<style type="text/css"> @import url("CSS文件路径"); </style>

在这里建议在网站建设时,使用link来引用css,它有利于SEO,这种方法使得蜘蛛爬行更快,处理更少,有利于排名。同时也节约html使得浏览器下载网页时候分开线程了,更重要的一点是在修改网页样式的时候会很方便。

怎么引入css的样式,方法有哪些?相关

css滚动条样式怎么设置

css滚动条样式怎么设置

为了做出更好的视觉效果,有时候需要用css改变浏览器或版块中滚动条的样式,那么应该怎么实现自定义滚动条样式呢?

2019-12-17

CSS图片居中代码怎么写

在很多时候,为了内容布局效果,需要通过css让图片居中,那么要怎么让图片在div内水平居中呢,代码怎么写?一起来看看吧。

2019-12-17
CSS鼠标样式cursor属性怎么设置

CSS鼠标样式cursor属性怎么设置

CSS鼠标样式可以通过设置cursorg属性,从而达到鼠标在对象上移动的鼠标样式。比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。

2019-12-09