关于CSS的发展史这里不做介绍。写博客的原因之一是想帮助那些与我一样喜欢纠结的初入前端的伙伴，希望自己写的帖子能对伙伴有些许帮助；原因之二这些帖子也算自己的一个知识的整理。现在还没有一定的顺序可循，但从CSS开始，尽量写的有顺序可循。

　　1.CSS初始

　　　　概念：CSS称之为层叠样式表或级联样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。

　　　　作用：CSS以HTML为基础，提供了丰富的功能，而且还可以针对不同的浏览器设置不同的样式。CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

　　2.CSS语法

　　　　CSS语法由两个主要的部分构成：选择器，以及一条或多条声明。每条声明由一个属性和一个属性值组成。

　　　　简单来说一个样式的语法是由三部分构成：选择器、属性和属性值。

　　　　例如：

　　　　　　　　　　

　　　　选择器：选择器会告诉浏览器该样式将作用于页面中哪些对象，而这些对象可以是某个标签、所有网页对象、指定Class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象的显示鲜果。也就是说选择器通常是你想要改变样式的HTML元素，选择器就是用一种方式把你想要设置样式的那一个标签选中。把这个标签选中了，你才能给这个标签设置CSS样式。

　　　　声明：声明可以是一条或者多条，这些声明会告诉浏览器如何去渲染选择器指定的对象。声明由属性和属性值组成，并用分号来标识一个声明的结束，在一个样式中，最后一个声明可以省略分号，所有的声明被放置在一对大括号内，这个大括号跟在选择器的后面。

　　　　知道了CSS是做什么的了，也知道了CSS的语法由几部分组成，那么问题来了，如何使用CSS呢，CSS样式书写在什么位置呢？接下来要说的就是CSS的书写位置。

　　3.CSS的引入方式

　　　　在HTML中引入CSS样式的方式有3种，分别为内联样式表、内部样式表、外部样式表。

　　　　3.1内联样式表

　　　　内联样式表也称之为行内样式表、行间样式表。内联样式表是把CSS代码和HTML代码放在同一个文件中。如果要使用内联样式，需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。

　　　　语法：<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ">内容</标签名>

　　　　例如：　　　　

<!DOCTYPE html>

<html>

    <head>

        <title>内联样式表</title>

    </head>

    <body>

        <h1 style="color:red;">我是内联样式表，也可以称我为行内样式表、行间样式表</h1>

    </body>

</html>

从上面的代码可以看出，我们给<h1>标签添加了style属性，而给style属性设置的CSS属性是color属性，属性值是red，显示效果如下：　

　　　　　内联样式表方便操作，也很容易理解。实际上任何HTML标签都拥有style属性，用来设置内联式。使用内联式需要注意的点如下：

　　　　　　(1).style其实就是标签的一个属性；

　　　　　　(2).样式属性和属性值中间使用";"，也就是英文状态下的分号；

　　　　　 (3).多组属性值之间用英文状态下的分号“;”隔开；

　　　　　 (4).内联式只能控制当前的标签和以及嵌套在其中的子标签，容易造成代码冗余。

　　　　内联式是在单个标签内定义的。对于网站来说，冗余代码很多，而且由于冗余代码多，每次改动CSS样式都要到具体的标签内修改，这样使得网站的维护性也非常差。而且，内联式没有实现样式和结构相分离。

　　　　3.2.内部样式表

　　　　内部样式表也称之为内嵌样式表，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

　　　　语法：　

<!DOCTYPE html>

<html>

<head>

    <title>内部样式表</title>

    <style>

        选择器{

            属性1:属性值1;

            属性2:属性值2;

        }

    </style>

</head>

<body>

</body>

</html>

　　　　例如：

<!DOCTYPE html>

<html>

<head>

    <title>内部样式表</title>

    <style>

        p{

            color:pink;

        }

    </style>

</head>

<body>

    <p>我是内部样式表，也叫内嵌式样式表</p>

</body>

</html>

从上面代码中可以看出，给p标签使用的是内部样式表，添加了字体颜色是pink，显示效果如下：

　

　　　　需要说明的是内部样式表中，style标签有个type属性，其值为text/css，即：type="text/css"，在html5中可以省略。使用内部样式表的缺点有两点：第一点就是内部样式表只能控制当前的页面；第二点就是内部样式表没有实现结构与样式分离。　　　　

　　　3.3.外部样式表

　　　　外部样式表又称之为链入式或者外链式。所谓外部样式表就是把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签或者@import来引用CSS样式表。外部样式表的文件扩展名是.css，且文件中不能包含任何html标签。

　　　　外部样式表的引入分为两种情况：

　　　　　　第一种情况是放置于head标签内的link标签中。语法为：<head><link rel="stylesheet" type="text/css" href="1.css"></head>　

　　　　　　例如：　　　　　　　

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <!--在HTML页面中引用文件名为index的css文件-->

    <link href="index.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div></div>

</body>

</html>

　　　　　　第二种情况是放置于head标签内的style标签中或者直接写入样式表中。语法为：　　　　　　　

<style>

    @import 1.css;

    @import '1.css';

    @import "1.css";

    @import url(1.css);

    @import url('1.css);

    @import url("1.css");　　　　　　　　

</style>　　 

注意：上面的语法中就“1.css”写了6种形式，也就是说使用@import命令导入外部样式表的书写方式有6种。

　　　　　　　　例如：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

   <style>

        @import url("index.css");

    </style>

</head>

<body>

    <div></div>

</body>

</html>

　　对于是使用link标签还是@import引入外部样式表，可能大家有些疑惑。link标签与@import的区别如下：

　　区别1：从从属关系来说，link标签是一个html标签，除了可以加载CSS文件外还可以做很多其它的事情，比如定义RSS，定义rel连接属性等；而@import是CSS提供的一种方式，只能用来加载CSS文件。

　　区别2：从加载顺序来说，页面加载时，link标签引入的CSS文件被同时加载；而@import引入的CSS将在页面加载完毕后被加载。

　　区别3：从兼容性来说，link标签是一个html标签，不存在兼容性问题；而@import是 CSS2.1 提供的语法， IE5之前的浏览器是不支持的。

　　区别4：从DOM可控性来说，当你使用JavaScript控制dom去改变样式的时候，只能使用link标签，无法使用@import的方式。

　　区别5：从权重来说，link引入的样式权重大于@import引入的样式。（PS：关于权重相关的知识这里不做详解，后面再做详细的解释）

关于CSS引入方式的详细见解的更多相关文章

  1. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  2. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  3. link标签和css引入方式

    link常见用途 <link> 标签最常见的用途是链接样式表,在 HTML 中,<link> 标签没有结束标签,此元素只能存在于 head 部分,不过它可出现任何次数. < ...

  4. 认识CSS中css引入方式、选择器、文本样式设置以及显示模式

    前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...

  5. 项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  6. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  7. css引入方式和基本样式

    css的三种引入方式: 1.内嵌:直接在标签中添加style属性 格式:<标签名 style="样式1:样式值1:样式2=样式值2:"></标签名> 2.内 ...

  8. css 基础 css引入方式

    color:red; //改变颜色 font-size:18px : //改变文字大小 background-color : blue; //设置背景颜色 width:100px ://设置宽度 he ...

  9. python全栈开发 * 表格标签 表单标签 css 引入方式 * 180807

    html部分 一.表格标签<table> 1.一个表格<table>由每行<tr>组成的,每行是由<td>组成的. 注意: 一个表格是由行组成的(行是由 ...

随机推荐

  1. 【爆料】-《阿伯丁大学毕业证书》AU一模一样原件

    ☞阿伯丁大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...

  2. linux 挂载共享文件夹

    1.背景 通常会有这样的场景,开发人员在Windows编写代码,然后放在linux环境编译,我们通过mount命令就可以实现将代码直接挂到linux环境上去,使Windows上的共享文件夹就像linu ...

  3. FPGA学习笔记（七）——FSM（Finite State Machine，有限状态机）设计

    FPGA设计中,最重要的设计思想就是状态机的设计思想!状态机的本质就是对具有逻辑顺序和时序规律的事件的一种描述方法,它有三个要素:状态.输入.输出:状态也叫做状态变量(比如可以用电机的不同转速作为状态 ...

  4. 报文ISO8583协议

    本人刚接触金融IT行业,对报文ISO8583协议也是刚刚了解,看了篇文章,个人觉得写得很好,特此分享如下: 如果单纯的讲IS08583那些字段的定义,我觉得没有什么意思,标准中已经对每个字段解释的非常 ...

  5. Mybatis配置详解

    一.SqlSession的使用范围说明  1.SQLSessionFactoryBuilder   通过SqlSessionFactoryBuilder创建会话工厂SqlSessionFactory, ...

  6. ssm上传图片

    ssm上传图片 1      需求 添加客户时上传图片和客户修改信息是上传图片. 2      思路 首先,数据库创建pic字段,类型为varchar,通过逆向工程重新生成mapper接口和xml文件 ...

  7. SpringBoot + Spring Security 学习笔记（五）实现短信验证码+登录功能

    在 Spring Security 中基于表单的认证模式,默认就是密码帐号登录认证,那么对于短信验证码+登录的方式,Spring Security 没有现成的接口可以使用,所以需要自己的封装一个类似的 ...

  8. 如何使用JS来开发室内三维地图的轨迹回放功能

     在制作完成室内三维地图的功能后,最经常有的需求就是如何做人员的轨迹回放,一般流程都是从数据库中查询轨迹坐标后,经过后台查询接口返回给前端,接下来的事情都交给JS来完成. 如果想做好一个性能好的轨迹回 ...

  9. Java-每日编程练习题①

    1.输出打印一个九九乘法表 代码如下,很简单的一个for的嵌套循环即可实现 /** * 输出9*9口诀. * * @author ChenZX * */ public class Test01 { p ...

  10. C# 23种设计模式

    目录 0).简单工厂模式 1).工厂方法模式 2).抽象工厂模式 3).单例模式 4).构建者模式 5).原型模式 6).适配器模式 7).修饰者模式 8).代理模式 9).外观模式 10).桥接模式 ...