本文目录
- css的引入方式有哪些
- 简答引入CSS样式其代码常用的放置位置方式有哪三种
- 引入css样式的方式有几种
- 如何引入css样式
- 在html里可以使用什么方法引入css
- HTML中怎么导入css
- 在html5中怎么引入css样式
- CSS的引入方式有什么
- 引入CSS的方式有哪些
- 引入css的方法有哪几种
css的引入方式有哪些
学习CSS肯定绕不开的就是如何将css引入到HTML文件中，引入方式主要有三种：
内联样式、内部样式、外部样式
1、内联样式
内联样式又称行内样式，使用该样式需要直接在标签内添加“ style=“ “ ”，再将需要的样式写在双引号内，如
《div style=“background: red;“》hello world!《/div》1
行内样式比较适合初学者学习的时候使用，在网站开发时尽量不要去用，因为使用这种样式会把结构和CSS全部融合在一个页面里面，造成代码冗余，后期调整样式的时候非常不方便。
2、内部样式
内部样式是一种适合案例或者比较小的页面的引入方式，它的语法是在在head标签里添加style标签，再在style标签的内容区添加需要的样式，如：
《head》《style type=“text/css“》div{background: red;}《/style》《/head》12345
内部样式比较适合案例或者比较小的页面中，因为它也会增加HTML文件的代码量。
3、外部样式
外部样式是使用最广的引入方式，适合比较大的页面或者整站开发。引入方法是将样式写css文件中，再将css文件链接到HTML文件里。而外部样式有两种链接方法引入HTML文件中：link和import1）用link链接需要在html文件内添加link标签，在该标签内属性“ href=“ “ ”的双引号里写上css文件的路径即可。
《link rel=“stylesheet“ type=“text/css“ href=“demo.css“/》1
2）用import链接需要用内部样式的方法添加“ @import url(““); ”属性，在url(““)中写上css文件的路径。
《style》 @import url(“demo.css“);《/style》123
同为外部样式的链接方式，link和import之间的不同不仅是载入链接的语法不同：
本质上link是HTML标签，是HTML的写法，但是import是CSS的提供的一种链接方式。所以link能够引入除css以外的其它文件，而import只能引入css文件。
link是没有兼容问题的，但是import在IE5以下不支持。
加载顺序上也不一样，link是HTML结构和CSS样式同时加载，而import是先加载HTML后加载CSS。有时候网速比较慢，你就会看到只有文字和边框的难看页面，然后才看到比较好看的页面，就是因为这个网页使用import链接的样式。
在用js控制dom修改样式的时候，link可以被修改，但是import不可以。
简答引入CSS样式其代码常用的放置位置方式有哪三种
1、内联式：《div style=“css样式写在这“》...《/div》2、外联式：《style》选择器 {css样式写在这}《/style》3、外链式：《link rel=“stylesheet“ href=“css文件url写在这“ /》
引入css样式的方式有几种
1.使用HTML标签的STYLE属性将STYLE属性直接加在单个的HTML元素标签上，控制HTML标签的表现样式。这种引入CSS的方式是分散灵活方便，但缺乏整体性和规划性，不利于后期的修改和维护，当需要修改网站的样式时，一个相同的修改可能涉及多个地方，维护成本高。使用STYLE属性的样式效果最强，会覆盖掉其它几种引入方式的相同样式效果。2.将样式代码写在页面《STYLE》...《/STYLE》标签之中《STYLE》...《/STYLE》结构可以位于页面《HTML》标签中的任何位置，也可以多次出现。通常是将整个《STYLE》...《/STYLE》结构写在页面的《HEAD》...《/HEAD》部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性，一个页面内部便于复用和维护，但多个页面之间的CSS代码复用仍然不够。3.使用 LINK标签，引入外部CSS文件将css代码写在一个单独的文件中，用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件，注意这些CSS代码的相互影响，通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的，可以在站个网站范围内进行CSS代码的规划，方便复用和维护，但这样将代码高度集中，代码量可能过大，维护不当的话又容易出现混乱。4.使用@import引入CSS文件使用@import引入CSS文件有两种方式，一种可以放在页面中的《STYLE》...《/STYLE》 中,用法如下： @import url(index2.css);另外也可以放在CSS文件中使用，用法如下： @import “sub.css“;使用用@import引入CSS可以很方便的引入外部文件的CSS代码，方便维护和规划。但是每多引入一个CSS文件，就会对服务器增加一次连接请求，当访问量较大时，需在维护性和性能上进行权衡。
如何引入css样式
在网站的head头部中加入link标签即可引入，如下：
《head》 《meta charset=“UTF-8“》 《meta name=“viewport“ content=“width=device-width, initial-scale=1“》 《title》用户鉴权认证中心《/title》 《meta name=“keywords“ content=““ /》 《meta name=“description“ content=““ /》 《link rel=“stylesheet“ type=“text/css“ href=“/static/vendor/bootstrap/css/bootstrap.min.css“》 《link rel=“stylesheet“ type=“text/css“ href=“/static/fonts/font-awesome-4.7.0/css/font-awesome.min.css“》 《link rel=“stylesheet“ type=“text/css“ href=“/static/fonts/iconic/css/material-design-iconic-font.min.css“》 《link rel=“stylesheet“ type=“text/css“ href=“/static/css/util.css“》 《link rel=“stylesheet“ type=“text/css“ href=“/static/css/main.css“》 《/head》
在html里可以使用什么方法引入css
CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。
一、行内样式
使用style属性引入CSS样式。
示例：《h1 style=“color:red;“》style属性的应用《/h1》《p style=“font-size:14px;color:green;“》直接在HTML标签中设置的样式《/p》实际在写页面时不提倡使用，在测试的时候可以使用。
例如：
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》行内样式《/title》《/head》《body》《!--使用行内样式引入CSS--》《h1 style=“color:red;“》Leaping Above The Water《/h1》《p style=“color:red;font-size:30px;“》我是p标签《/p》《/body》《/html》
二、内部样式表在style标签中书写CSS代码。style标签写在head标签中。示例：《head》《style type=“text/css“》h3{color:red;}《/style》《/head》
例如：
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》内部样式表《/title》《!--使用内部样式表引入CSS--》《style type=“text/css“》div{background: green;}《/style》《/head》《body》《div》我是DIV《/div》《/body》《/html》
三、外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。语法：1、链接式《link type=“text/css“ rel=“styleSheet“ href=“CSS文件路径“ /》2、导入式《style type=“text/css“》@import url(“css文件路径“);《/style》
例如：
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》外部样式表《/title》《!--链接式:推荐使用--》《link rel=“stylesheet“ type=“text/css“ href=“css/style.css“ /》《!--导入式--》《style type=“text/css“》@import url(“css/style.css“);《/style》《/head》《body》《ol》《li》1111《/li》《li》2222《/li》《/ol》《/html》
链接式和导入式的区别《link》1、属于XHTML2、优先加载CSS文件到页面@import1、属于CSS2.12、先加载HTML结构在加载CSS文件。
四、CSS中的优先级
1、样式优先级
行内样式》内部样式》外部样式(后两者是就近原则)
例如：
行内样式和内部样式比较优先级：
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》行内样式和内部样式表的优先级《/title》《!--内部部样式表--》《style type=“text/css“》p{color: blue;}《/style》《/head》《body》《!--行内样式--》《p style=“color: red;“》我是p段落《/p》《/html》
浏览器运行效果：
结论：行内样式优先级高于内部样式表。
内部样式表和外部样式表比较优先级：
a、内部样式表在外部样式表上面
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》内部样式表和外部样式表的优先级《/title》《!--内部部样式表--》《style type=“text/css“》p{color: blue;}《/style》《!--外部样式表--》《link rel=“stylesheet“ type=“text/css“ href=“css/style.css“ /》 《/head》《body》《p》我是p段落《/p》《div》我是div《/div》《ol》《li》1111《/li》《li》2222《/li》《/ol》《/html》
浏览器运行效果：
b、外部样式表在内部样式表上面
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》内部样式表和外部样式表的优先级《/title》《!--外部样式表--》《link rel=“stylesheet“ type=“text/css“ href=“css/style.css“ /》《!--内部部样式表--》《style type=“text/css“》p{color: blue;}《/style》《/head》《body》《p》我是p段落《/p》《div》我是div《/div》《ol》《li》1111《/li》《li》2222《/li》《/ol》《/html》
浏览器运行效果：
结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。
注意：导入式和链接式的优先级也是使用就近原则。
2、选择器优先级
优先级：ID选择器》类选择器》标签选择器
《!DOCTYPE》《html》《head》《meta charset=“utf-8“ /》《title》选择器的优先级《/title》《style type=“text/css“》#a{color: green;}.b{color: yellow;}h3{color: red;}《/style》《/head》《body》《h3》111《/h3》 《!--红色--》《h3 id=“a“ class=“b“》222《/h3》 《!--绿色--》《h3 class=“b“》333《/h3》《!--黄色--》《/html》
浏览器运行效果：
HTML中怎么导入css
有3种方式：分别如下：1--行间样式表(内联样式)《div style=“……“》《/div》2--内部样式表《style》选择器｛属性：属性值｝《/style》3--外部样式表《link href=“style.css“ rel=“stylesheet“ type=“text/css”/》
在html5中怎么引入css样式
1、html5使用link标签引入外围的css样式表。方法是首先打开hbuilder软件，在一个外部css文件中编写css代码，然后可以能过 link 引入到html中，这里设置了两个属性的字体和颜色属性：
2、在html文件中使用link标签引入刚刚写好的css样式表，其中href是相对路径，即相对于项目所在文件的路径。然后写两个标签，引入上述css文件里的样式：
3、最后打开浏览器，即可看到 上面的代码效果：
CSS的引入方式有什么
这里先说一中吧，其他的去黑马程序员社区看，有技术老师写的文章。行内方式1 在每一个html标签中都有style属性：里面有书写样式。弊端：样式代码和标签代码混合到一起，不利于维护。每次只能修饰一个标签中样式《div style=“background-color: #ccc; font-size: 24px;“》div行内样式《/div》内部方式：在head标签体中，去指定style标签弊端：样式代码和标签代码混合到一起，不利于维护。 《style type=“text/css“》 标签选择器/类选择器/id选择器{ font-size:24px; xxx:xxx } 《/style》
引入CSS的方式有哪些
css主要有三种引用方法：1，内部引用，在html文档中在《style》标签里面写的css样式《style》bdoy{font-size:14px;} 《/style》2，外部引用，用《link》标签引用外部的css文件，将样式引用到html文档来。《link rel=“stylesheet“ type=“text/css“ href=“style.css“》3，在标签中使用，使用style属性将当前的标签样式改变。《div style=“color:red“》《/div》
引入css的方法有哪几种
1.行内式行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。2.内嵌式嵌入式是将CSS样式集中写在网页的《head》《/head》标签对的《style》《/style》标签对中。格式如下：《head》《style type=“text/css“》...此处写CSS样式《/style》《/head》缺点是对于一个包含很多网页的网站，在每个网页中使用嵌入式，进行修改样式时非常麻烦。单一网页可以考虑使用嵌入式。3.导入式将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，《style》标记也是写在《head》标记中，使用的语法如下：《style type=“text/css“》@import“mystyle.css“; 此处要注意.css文件的路径《/style》导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。4.链接式也是将一个.css文件引入到HTML文件中，但它与导入式不同的是链接式使用HTML规则引入外部CSS文件，它在网页的《head》《/head》标签对中使用《link》标记来引入外部样式表文件，使用语法如下：《link href=“mystyle.css“ rel=“stylesheet“ type=“text/css“/》使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。