CSS3 入门

使用 CSS

CSS 代码既能存放在一个独立的.css文件,也能直接嵌套到 HTML 代码中运行,总共有三种执行方式。

<html>

 <head>
  <link rel="stylesheet" type="text/css" href="path_to/style.css"> <!-- 1. CSS 文件载入 -->
 </head>

 <style type="text/css">  <!-- 2. <style> 标签载入  -->
 p {
  color: red;
 }
 </style>

 <body>

  <p style="color: red">cascading style sheets</p>  <!-- 3. style 属性载入 -->

 </body>

</html>

优先级

不同执行 CSS 代码的方式,有不同的优先级别。

<style type="text/css">
p {
 color: yellow;
 color: green; <!-- 定义相同的样式会把之前的样式覆盖 -->
}
</style>

<p style="color: red;"> hello </p> <!-- 属性定义样式的优先级最高 -->

!important

如果想让属性保持最高的优先级别,可以使用 important 属性进行级别提升。

<style type="text/css"> 
p {
 color: yellow!important; <!-- 强制优先 -->
 color: red; <!-- 无效 -->
}
</style>

<p style="color: red;"> hello </p>  <!-- 无效 -->

样式继承

有一些样式属性,比如 字体 / 颜色 等在父类中定义之后,会继承到子类。但具备继承性质的属性很有限,就那么几个,这时可能需要用到 inherit 强行继承。

<p style="color: red;">
 <strong> hello </strong> <!-- strong 自动继承了 p 的字体颜色 -->
</p>

<p style="border: 1px solid orange">
 <strong style="border: inherit"> hello </strong> <!-- 强制继承父类的边框效果 -->
</p>

注释

.css 文件的注释语法是 /* */

p {
 color: red;  /* 颜色红色 */
}
CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex