随笔- 58 文章- 0 评论- 0 阅读- 7636

CSS的引入方式

CSS就是Cascading Style Sheet的缩写，中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。

使用CSS样式可以有效地对页面进行布局，更加灵活多样。
使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确控制，同时对它们的修改和控制变得更加快捷，更加强大。
站点中所有的网页风格都使用一个CSS文件进行统一控制，达到一改全改。还可以快速切换主题，我们可以把HTML比作是骨架，CSS是衣服。同一个HTML骨架结构，不同CSS样式，所得到的美化布局效果不同。
CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。
CSS可以将网页的表现与结构分离，使页面载入得更快,更利于维护，这也是我们的最终目的。

CSS基本语法:

CSS的基本语法由选择器、属性、属性的值组成，如果选择符有多个属性，由分号隔开

引入方式：

行内样式：

# 行内样式，就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。
# 当个别元素需要应用特殊样式时就可以使用内联样式。
# 但不推荐大量使用内联样式，因为那样不利于后期维护。
<div style="color: white;background-color: #369;text-align: center">行内设置</div>

嵌入式：

# 把CSS样式写在HTML文档内部head标签中的style标签里。
# 浏览器加载HTML的同时就已经加载了CSS样式了。
# 当单个文档需要特殊，单独的样式时，可以使用行内样式。
<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>title</title>
      <meta charset="utf8">

      <style>
          div{
              color: white;
              background-color: #369;
              text-align: center
          }
      </style>

  </head>
  <body>

  <div> 嵌入式</div>

  </body>
</html>

链接式：

# 把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。
# 当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观
	/*info.css文件*/

div{
      color: white;
      background-color: #369;
      text-align: center
}
----------------------------------------------------------------------------------
	/*css.html文件*/

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
     <title>title</title>
      <meta charset="utf8">

      <link rel="stylesheet" href="info.css">

  </head>
  <body>

  <div>链接式</div>

  </body>
</html>