css引入页面的三种方法

浠ラ箍发布于2019-04-23 11:58 / 3472人阅读

摘要：内联式直接在标签上写样式页面引入方法页面引入方法如上面的代码所示，在标签内直接通过属性直接写样式。然后通过标签将样式文件引入到页面。这种方法才是开发中最常用的办法。

1.内联式：直接在标签上写样式

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css页面引入方法title>
 6 head>
 7 <body>
 8     <div style="color: red ;font-size:50px">css页面引入方法div>
 9 body>
10 html>

　　如上面的代码所示，在div标签内直接通过styl属性直接写样式。那么这里我们设置了字体的颜色为红色，字体大小为50px。

看一下显示出来的效果。

　　　　这种方法在开发中是最不常用的一种，因为在标签内写方法会让代码看起来很乱，而且也不利于管理和查找，所以只有在某些情况下才会使用这种方式来写样式。

2.嵌入式：通过style标签来写样式

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css页面引入方法title>
    <style type="text/css">
        div{
            color: green;
            font-size: 50px;
        }
    style>
head>
<body>
    <div>css页面引入方法div>
body>
html>

　　可以看到我在head中用style标签写了一个样式出来，通过选择器选择器来将样式加入到页面中。看一下效果。

　　　这种方法是比较常用的一种，一般在写首页的时候通常会用到这种方式，因为网站首页加载快慢会直接影响用户的体验，所以网页的加载速度就要快。那么这种方式不会影响加载速度，又将样式整合到了标签中，所以是比较适用的。但是也不会大量的使用。最后一种才是我们经常用的方式。

3.外联式：通过link标签将样式添加到页面上

main.css

1 div{
2     font-size: 50px;
3     color: blue;
4 }

code.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css页面引入方法title>
    <link rel="stylesheet" href="css/main.css">
head>
<body>
    <div>css页面引入方法div>
body>
html>

　　我们可以看到这次用了两个文件，一个是css文件，一个是html文件。css文件里写的东西和style标签中的写法是一模一样的。只是多带带写在一个文件中。然后通过link标签将css样式文件引入到页面。rel里面的东西我们不用管，herf中的路径就是css文件的逻辑路径。我们看一下效果。

　　这种方法才是开发中最常用的办法。好处显而易见，比如，低耦合，整洁，条理清晰。

云服务器 GPU云服务器云计算的三种服务模式 asp支持的三种控件服务器的三种存储方式阿里云发送邮件的三种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1420.html

CSS的三种引入方式

摘要：内联在元素中添加属性添加样式，只能作用于当前元素，不能复用。内部在里面添加标签可以当前页面复用不能多页面复用外部写在单独的文件里面通过标签引入，可以多页面复用内联优先级最高内部和外部优先级一样，后执行的覆盖前面执行的内联：在元素中添加style属性添加样式，只能作用于当前元素，不能复用。内部：在head里面添加style标签可以当前页面复用不能多页面复用外部：写在单独的css文件里面...

mrcode 2019-04-23 13:08 评论0 收藏0
围住浮动元素的三种方法

摘要：由于包含元素一定会包围非浮动的子元素而且清除会让这个子元素位于清除一侧浮动元素的下方因此包含元素一定会包含这个子元素以及前面的浮动元素。浮动元素脱离了文档流,其父元素也看不到它了,因而也不会包围它。这种情况有时候并非我们想要的,下面向大家传授三种围住浮动子元素的方法。记住,这三种方法你都得掌握,这样才能审时度势,选择最合适的一种。为了演示浮动元素的行为,这种行为对布局会产生...

Bowman_han 2019-08-28 18:07 评论0 收藏0
前端（二）之 CSS

摘要：前端之前端之前言前言昨天学习了标记式语言，也就是无逻辑语言。今天学习，被称之为网页的化妆师。为前端页面的样式，由选择器作用域与样式块组成。年初，组织负责的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了年月出版的规范第二版。前端之 CSS 前言昨天学习了标记式语言，也就是无逻辑语言。了解了网页的骨架是什么构成的，了解了常用标签，两个指令以及转义字符；其中标签可以分为两大类：一类...

张率功 2019-04-23 13:08 评论0 收藏0
网站footer沉底效果的三种解决方案

摘要：沉底效果重点代码总结以上三种方法都属于没什么副作用的，其实实现这种沉底效果还有别的实现方式，但是对其他布局有影响，这里不赘述，之后有了更好的解决方案，再来更新。问题背景很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况：1.内容较少时，这个foot...

chanjarster 2019-08-26 13:57 评论0 收藏0
网站footer沉底效果的三种解决方案

摘要：沉底效果重点代码总结以上三种方法都属于没什么副作用的，其实实现这种沉底效果还有别的实现方式，但是对其他布局有影响，这里不赘述，之后有了更好的解决方案，再来更新。问题背景很多网站设计一般是两个部分，content + footer，content里面装的是网站主体内容，footer里面展示网站的注册信息等等，因为网站内容高度不定的原因，会出现下面两种情况：1.内容较少时，这个foot...

?xiaoxiao, 2019-08-30 11:01 评论0 收藏0