2020-07-05 10:30:15
CSS层叠样式表是用来控制网页样式和布局的,那么怎么引入CSS的样式,引用的方法有哪些呢?要知道使用不同的方法来引用css样式表,达到的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率。
这种引入方法的写法为:<div style="background:red;color:#fff;">这是行内引入CSS方式</div>
这种方法只能改变当前标签的样式,这种方法一般适用于修改个别特别标签需要的样式。
这种引入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
这种方式引入写法为:<style> .content { background: #fff; } </style>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 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鼠标样式可以通过设置cursorg属性,从而达到鼠标在对象上移动的鼠标样式。比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制。