CSS基本知识

CSS规则有两个主要部分组成：选择器，一条或多条声明

选择器通常是需要改变样式的HTML元素

每条声明由一个属性和一个值组成

属性是希望设置的样式属性。每个属性有一个值。属性和值之间用冒号分开。

CSS选择器

CSS选择器是一种模式，用于选择要添加样式的元素。

参考 http://www.w3school.com.cn/cssref/css_selectors.asp

CSS属性

参考 http://www.w3school.com.cn/cssref/index.asp

 

HTML中使用CSS样式表的三种方式

第一种 元素内嵌样式 使用全局属性 style

<body>
  <a href="http://apress.com" style="background-color:grey; color:while"> 使用内嵌样式</a>
</body>

第二种 文档内嵌样式  使用 style元素定义文档内嵌样式 通常放置在<head>部分

<head>
  <style type="text/css">
    a {
      background-color:grey;
      color:white; 
    }
  </style>
</head>
<body>
  <a href="http://apress.com">使用文档内嵌样式</a>
</body>

第三种 外部样式表 使用<link>元素 或者 @import url("CSS文件路径")

a {
  background-color:grey;
  color:white;
}
以上内容保存在sytles.css文件中
------------------
<head>
  <link rel="stylesheet" type="text/css" href="styles.css" />  <!-- 使用 link元素 -->
</head>
<body>
  <a href="http://apress.com">使用外部样式表</a>
</body>

------------------
<head>
  <style type="text/css"> @import url("styles.css") </style>  <!-- 使用 @import url() -->
</head>
<body>
  <a href="http://apress.com">使用外部样式表</a>
</body>

使用 link 方式和 @import url() 方式的区别：

-- 两者的加载机制不同，link 属于 XHTML 优先加载 CSS 文件到 HTML 页面；@import url() 属于 CSS2.1，先加载 HTML 结构后加载 CSS 文件，在网速慢的情况下会出现一开始没有 CSS 样式，闪烁一下后出现样式后的页面。

-- 当使用 JS 控制 dom 去改变样式的时候，只能使用 link 方式，因为 @import 不是 dom 可以控制的。

-- link 除了可以加载 CSS 文件外，还能定义 RSS，定义 rel 链接属性，@import 只能加载 CSS 文件

三种方式的优先级

元素内嵌样式 > 文档内嵌样式 > 外部样式表

 

posted on 2018-10-21 20:46  0820LL  阅读(122)  评论(0)  编辑  收藏  举报

导航