元素中直接使用；
从页面头部调用；
采用链接的形式调用。
不同的调用方法有不同的写法和优先级。下面分别做一下介绍。
一、元素中直接使用
这种调用方式的写法如下：
<元素名称 style="属性:属性值"></元素名称>
在样式中直接使用CSS，语法是使用style标签，在双引号中，样式的语法结构和独立样式表中完全相同。例如：
<div style="width:240pxheight:80pxbackground-color:#cccccctext-align:centerfont-size:14px">
示例：元素中直接调用。</div>
该样式中定义了元素宽、高为360、80像素，背景色为灰色，字体大小为14像素。其应用到页面中的显示如图1。
二、从页面头部调用
从页面头部调用CSS是将CSS写在页面的head元素中，然后在页面中调用。其语法结构如下：
<style>
选择符{属性:属性值}
</style>
页面上的所有样式都可以写在<style>和</style>中。使用这种方式调用CSS，在页面中必须有相应的调用代码。
其中，类选择符的调用代码如下：
<元素名称 class="类选择符名称"></元素名称>
ID选择符的调用代码如下：
<元素名称 id="id 类选择符名称"></元素名称>
下面我们来用一个示例演示一下。
<head>
<title>CSS调用方法</title>
<style>
.content{
background-color: #cccccc
font-size: 14px
width: 240px
height: 80px
color: Blue
text-align: center
}
</style>
</head>
<body>
<div class="content">示例：从页面头部调用。</div>
</body>
该样式应用到页面的效果如图2所示。
三、采用链接的形式调用
采用链接的形式调用CSS通常有两种方法：
使用link元素
使用link元素调用CSS的语法如下：
<link rel="stylesheet" href="css文件路径" type="text/css"/>
其中rel="stylesheet"指这个link和其href之间的关联样式为样式表文件。type="text/css"指文件类型是样式表文本。
使用@import
使用@import调用和使用link元素调用的区别在于，使用@import的调用方法只能使用在样式文件中，即只能在调用的样式文件，或style元素中才能正常使用
1、id: id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称。
用法：若一个标签的id="myid",那么使用它的时候通过”$("#myid")“来获取当前标签或使用“#myid{}”来定义CSS样式。
2、class：根据用户定义的标准对一个或多个元素进行标记和定义，一个标签可以有多个class，例如class="myclass1 myclass2",当前标签就有两个class，分别为myclass1和myclass2。
用法：若一个标签有一个class="myclass",那么获取这个标签可以使用$(".myclass"),同时使用”.myclass{}“来定义CSS样式。
3、name：从名字可以知道这是用于定义一个标签的名字的属性，name可用于数据获取，常用于表单数据的获取。
用法：若一个输入框的name="myname" ，常用request.getparameter("myname")来获取当前输入框的值。
把id留给后台开发和JS使用，除此之外页面的page id(如首页的外层需要一个ID id="pageIndex")，页面结构（header main footer）允许用id命名(ID命名建议使用驼峰命名)。其他禁止id使用在样式表CSS命名中，一律使用class命名。
在编码思想上，我们可以将页面拆分成不同的层级（布局、模块、元件）。
什么是CSS命名空间？
通过统一的命名规范定义命名的范围，成为CSS class &id命名空间。
布局: 以语义化的单词layout作为命名空间，例如主栏布局命名 layout-main，只改变layout-命名空间后面的命名，layout始终保留。布局的命名空间为layout-xxx。
模块：页面是由一个或多个模块组成，模块的英文单词是module，规范简写成mod，如新闻模块mod-news，照片展示模块mod-photo-show。模块的命名空间为mod-xxx 。
元件：元件是属于模块内部的，也可以说模块是由元件和它内部的自有元素组成。如用户照片信息元件cell-user-photo。元件的命名空间为cell-xxx 。
文字颜色(命名空间text-xxx)
text-c1, text-c2,text-c3……
背景颜色(命名空间bg -xxx)
bg-c1,bg-c2,bg-c3……
边框颜色(命名空间border-xxx)
border-c1,border-c2,border-c3……
参考自文章 CSS命名规则
