CSS——CSS样式的几种写法

CSS概念：Cascading Style Sheet，简称为css，中文名称层叠样式表或者级联样式表，主要指的是用来装饰HTML页面的一种技术。

在页面开发的时候，一般CSS有如下几种写法：

-->在标签的属性style中编写

-->在页面中的style标签中编写

-->在页面外的XX.css文件中编写，使用link标签引入

-->使用@import导入需要的css文件

一、行内样式

行内样式，又叫做标签样式，主要是写在标签的style属性上，好处是优先级别较高，坏处是只

能渲染一个标签。

二、内嵌样式

内嵌样式，又叫做页面样式，是将 CSS 写在网页源文件的头部，即在head间，通过使用HTML标签中的style标签将其包围，其特点是该样式只能在此页使用，解决行内样式多次书写的弊端。

三、外链样式

链接式通过 HTML 的 link 标签，将外部样式表文件链接到 HTML 文档中，这也是网络上网站应

用最多的方式，同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性。

注意：对于样式表而言，后定义的会把先定义的样式表覆盖掉。link标签可以放在页面的head

中，也可以放在body中，一般建议放在head中，以便于浏览器渲染样式，因为样式在加载完成前

需要渲染。

四、@import

css也提供了一种在css文件中到导入其他css文件的功能 -- @import，这样就可以也可以导入css

文件。

五、常见面试题

link和@import的区别

首先，从本质上说，这两种方式都是为了加载css文件，但它们还是存在细微的差别。

1、link属于XHTML标签，而@import完全是css提供的一种方式。link标签除了可以加载css外，

还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。

2、加载顺序的差别：当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引

用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式，网速慢的时候明显可以看到。

3、兼容性的差别：由于@import是CSS2.1提出的，所以老的浏览器不支持，@import只有在

IE5以上的才能识别，而link标签无此问题，完全兼容。

4、使用dom控制样式时的差别：当时用JavaScript控制dom去改变样式的时候，只能使用link

标签，因为@import不是dom可以控制的。

CSS——CSS样式的几种写法相关推荐

CSS引入样式的四种方法及优先级顺序
CSS引入样式的几种方法 css可以通过4种方式引入样式表根据不同的需求可以选择不同的引入方式但是它们也有不同的优缺点行内样式嵌入式样式外部样式 @import 导入的方式 1.行内样式特 ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
css样式的三种写法
css三种样式 1: 内部样式存在在head标签中<head><style type="text/css">选择器{属性:值;}</style> ...
php虚线_实现css虚线样式的两种方式：dotted和dashed（实例）
css虚线边框怎么做?html虚线边框设置一般会想到border的solid,html网页布局中solid用的概率最高了,要有css虚线的效果还可以用图片做背景,但是不推荐,尽量使用css虚线样式做这 ...
html dashed显示实线怎么改,实现css虚线样式的两种方式：dotted和dashed（实例）
css虚线边框怎么做?html虚线边框设置一般会想到border的solid,html网页布局中solid用的概率最高了,要有css虚线的效果还可以用图片做背景,但是不推荐,尽量使用css虚线样式做这 ...
CSS伪类的三种写法
今天逛蓝色时,无意发现了有人讨论伪类的正确写法,让我对伪类的认识也更清晰了,转贴于此,以备日后查询(原贴当时没记下地址,已经记不得了) Code <style> a.tb{text-dec ...
CSS设置样式的三种方式
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 1.CSS 1.1内联样式 1.2内部样式表 1.3外部样式表前言对css的学习进行总结提示:以下是本篇文章正文 ...
【css】垂直居中的几种写法
结构 <div class="vam"><div class="vam-body">垂直居中</div> </div& ...
css之下划线的几种写法
1.给上面的div设置边框的底部 margin: 15px 30px; border-bottom: 1px solid #dddddd; 2.单独给下划线一个div 设置高度和背景颜色 .li ...

CSS——CSS样式的几种写法

CSS——CSS样式的几种写法相关推荐

最新文章

热门文章