简述在html中加入css方法,CSS引入方式 - CSS

想要在一个页面引入CSS，共有以下3种方式。

(1)外部样式表

(2)内部样式表

(3)行内样式表

一、外部样式表

外部样式表是最理想的CSS引入方式。在实际开发中，为了提升网站的性能速度和可维护性，一般都是使用外部样式表。所谓的外部样式表，指的是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表。

当样式需要被应用到多个页面时，外部样式表是最理想的选择。使用外部样式表，你就可以通过更改一个CSS文件来改变整个网站的外观。

在HBuilder创建一个CSS文件很简单，就像创建HTML文件一样。如果不知道怎么创建的，自己摸索一下或者搜索一下。

外部样式表在单独文件中定义，然后在HTML文件的标签对中使用link标签来引用。

语法：

rel即relative的缩写，它的取值是固定的，即stylesheet，表示引入的是一个样式表文件(即CSS文件)。

type属性取值也是固定的，即"text/css"，表示这是标准的CSS。

href属性表示CSS文件的路径。对于路径，相信小伙伴们已经很熟悉了。

如果小伙伴们记不住这一句代码也没关系，HBuilder有着非常强大的代码提示功能，如下图所示。

举例：

分析：

如果你使用外部样式表，必须使用link标签来引入，而link标签是放在head标签内的。

二、内部样式表

内部样式表，指的是把HTML代码和CSS代码放到同一个HTML文件中。其中，CSS代码放在style标签内，并且style标签是放在head标签内部的。

语法：

说明：

type="text/css"是必须添加的，表示这是标准的CSS。

举例：

绿叶，给你初恋般的感觉。

浏览器预览效果如下图所示。

分析：

如果你使用内部样式表，CSS样式必须在style标签内定义，而style标签是放在head标签内的。

三、行内样式表

行内样式表跟内部样式表类似，也是把HTML代码和CSS代码放到同一个HTML文件。但是两者有着本质的区别：内部样式表的CSS是在“style标签”内定义的，而行内样式表的CSS是在“标签的style属性”中定义的。

举例：

绿叶，给你初恋般的感觉。

浏览器预览效果如下图所示。

分析：

大家将这个例子和前面一个例子对比一下，就知道两段代码实现的效果是一样的，都是定义3个div元素的颜色为红色。如果使用内部样式表，样式只需要写一遍；但是如果使用行内样式，则每个元素要单独写一遍。

行内样式是在每一个元素内部定义的，冗余代码非常多，并且每次改动CSS的时候，必须到元素中一个个去改，这样会导致网站的可读性和可维护性非常差。为什么我们一直强烈不推荐使用Dreamweaver“点点点”的方式来开发页面？就是因为这种方式产生的页面代码中，所有的CSS样式都是行内样式。

对于这三种样式表，在实际开发中，一般都是使用外部样式表。不过在本书中，为了讲解方便，我们采用的都是内部样式表。

常见问题：

1、不是说CSS有4种引入方式吗？还有一种是@import方式。

@import方式跟外部样式表很相似。不过在实际开发中，我们极少使用@import方式，而更倾向于使用link方式(外部样式)。原因在于@import方式会先加载HTML后加载CSS，而link是先加载CSS后加载HTML。如果HTML在CSS之前加载，页面用户体验就会非常差。因此对于@import这种方式，我们不需要去了解。

简述在html中加入css方法,CSS引入方式 - CSS | 绿叶学习网相关推荐

背景大小比率css,背景大小：background-size - CSS3 | 绿叶学习网
在CSS2.1中,我们是不能使用CSS来控制背景图片大小的,背景图片的大小都是由图片实际大小决定. 在CSS3中,我们可以使用background-size属性来定义背景图片的大小,这样可以使得同一张 ...
jquery改变html样式表,jQuery CSS()方法改变现有的CSS样式
jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代 ...
vue 导入公共css_HTML+CSS入门 vue引入通用CSS
本篇教程介绍了HTML+CSS入门 vue引入通用CSS,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.在入口 js 文件 main.js 中引入,一些公共的样式文件 ...
css三种引入方式以及其优先级的说法
css 三种引入方式方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用分号 : ...
css三种引入方式与标签选择器
目录 css三种引入方式选择器标签选择器: class选择器: id选择器: 后代选择器: 子代选择器: 组合选择器: 通配符选择器: css三种引入方式 1.行间样式:权重最高1000,在标签的 ...
html padding如何设置内边距,内边距：padding - CSS | 绿叶学习网
内边距padding,又常常被称为"补白",它指的是内容区到边框之间的那一部分.内边距都是在边框内部的. 一.padding局部样式从CSS盒子模型中我们可以看出,内边距分为4个 ...
css的三大引入方式
css的引入方式一. css的引入方式 css的引入方式有三种:内部样式.外部样式和内联样式(行内样式).下面是对三种引入方式的详细介绍. (1) 内部样式语法: 在head标签添加style标签 ...
006 CSS三种引入方式
CSS三种引入方式一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
jQuery：css方法动态更改标签css样式
hello,大家好,我是wanzirui32,今天我们来学习如何使用jQuery的css方法,动态更改标签css样式. 开始学习吧! 学习目录读取标签的css样式设置标签的css样式给标签设置多 ...

简述在html中加入css方法,CSS引入方式 - CSS | 绿叶学习网

简述在html中加入css方法,CSS引入方式 - CSS | 绿叶学习网相关推荐

最新文章

热门文章