黑马程序员技术交流社区

标题: 3、css的引入方式和书写规范 [打印本页]

---

作者: liangliangge    时间: 2017-3-5 11:06
标题: 3、css的引入方式和书写规范
(1)内嵌样式
                        内嵌样式是把css的代码嵌入到html标签中
                        <div style="color:red;font-size: 100px;">你好啊 小朋友</div>
                        语法：
                                (1)使用style属性将样式嵌入到html标签中
                                (2)属性的写法：属性：属性值
                                (3)多个属性之间使用分号;隔开
                        不建议使用
                (2)内部样式
                        在head标签中使用style标签进行css的引入
                        <style type="text/css">
                                div{color:red;font-size: 100px;}
                        </style>
                        语法：
                                (1)使用style标签进行css的引入
                                        <style type="text/css">
                                                属性：type：告知浏览器使用css解析器去解析
                                (2)属性的写法：属性：属性值
                                (3)多个属性之间使用分号;隔开
               
                (3)外部样式
                        将css样式抽取成一个单独css文件 谁去使用谁就引用
                        <link rel="stylesheet" type="text/css" href="demo1.css"/>
                        语法：
                                (1)创建css文件 将css属性写在css文件中
                                (2)在head中使用link标签进行引入
                                        <link rel="stylesheet" type="text/css" href="css文件地址"/>
                                        rel:代表要引入的文件与html的关系
                                        type：告知浏览器使用css解析器去解析
                                        href：css文件地址
                                (3)属性的写法：属性：属性值
                                (4)多个属性之间使用分号;隔开
                (4)@import方式
                        <style type="text/css">
                                @import url("css地址");
                        </style>
                        link与@import方式的区别：
                                (1)link所有浏览器都支持 import部分低版本IE不支持
                                (2)import方式是等待html加载完毕之后在加载
                                (3)import方式不支持js的动态修改

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2