您的位置：首页 > Web前端 > CSS

CSS引用方式

2016-08-05 15:27 344 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_35778035/article/details/52129606

CSS引用方式

CSS拥有四种样式引用方式，分别是行内样式，内嵌样式、外链样式、导入式。


行内样式

在标签内设置标签的样式

<span <strong>style="font-size:24px;"</strong>>CSS引用方式</span>

style="font-size:24px;"这就是设置的行内样式，通过在标签内写CSS，来控制标签的样式。


内嵌样式

把<style>标签对放在<head>标签对中，

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css>
p{font-size:24px;}
</style>
</head>
<body>
<p>CSS引用方式</p>
</body>
加粗的地方，就是内嵌样式，如果使用严格模式/标准模式来开发的话，在<style>标签里面必须加入type="text/css"

index.css

<style type="text/css>
<pre name="code" class="html">    p{font-size:24px;}
</style> 






外链样式


通过<link>标签使用     “href ”   获取CSS文件路径， 引入外部CSS样式，在<lnk>标签中必须加入 rel="stylesheet".


<link>标签放在<head>标签对中。


index.html




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<p>CSS引用方式</p>
</body>




index.css




@charset "utf-8";
p{font-size:24px;}
在外部CSS文件中需要加入
@charset "utf-8";
如果不加入CSS文件的备注可能会是乱码。





导入式


在style标签对中通过 “@import” 方法导入外部CSS文件


index.html




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css>
@import"css/index.css";  //注意外部CSS样式表的路径
</style>
</head>
<body>
<p>CSS引用方式</p>
</body>
index.css





@charset "utf-8";
p{font-size:24px;}







CSS样式引用的优先级


行内样式 > 内嵌样式 > 外链样式 > 导入式


但是如果在CSS样式属性后加入  ！important 


这个属性不论在那种样式表中都是最高级的优先级。





index.css




@charset "utf-8";
p{font-size:24px; <strong>!important</strong>}   //最高级的优先级



link标签引用css样式的好处


1.简化了DOM结构，实现了内容和表现的分离，使HTML和CSS文件结构更加清晰，利用维护


2.大大减少了css代码的编写量，项目越大，这里一点体现的越明显


3.link可以和其他link、JS文件以及body内的内容进行多线程加载，使加载速度更快


4.利于项目整体风格的调整，维护起来也更加便捷，单文件修改、全网站（应用）生效，、


5.浏览器会对css文件进行缓存，进一步减少了加载时间


6.可以根据需要利用JavaScript或Media动态的组合所需的CSS文件


7.对搜索引擎友好，有利于SEO














新手上路，请大家指正错误，谢谢。












                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航