一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权。
这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
1.值的不同写法和单位:
当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。
p { color: rgb(100%,0%,0%); }
比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
2.记得写引号:
如果值为若干单词，则要给值加引号：
p {font-family: "sans serif";}
3.多重声明：
如果要定义不止一个声明，则需要用分号将每个声明分开。应该在每行只描述一个属性，这样可以增强样式定义的可读性。
p {
text-align: center;
color: black;
font-family: arial;
}
4.空格和大小写
多重声明和空格的使用使得样式表更容易被编辑：
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。
如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
5.选择器分组
用逗号将需要分组的选择器分开
h1,h2,h3,h4,h5,h6 {
color: green;
}
6.继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。
body {
font-family: Verdana, sans-serif;
}
7.派生选择器
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。
列表中的 strong 元素变为斜体字，而不是通常的粗体字
(1)
li strong {
font-style: italic; 字体
font-weight: normal; 设置粗细
}
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
(2)
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
<p>不受影响<strong>不受影响red</strong>.</p>
<h2>不受影响red.</h2>
<h2>这里不受影响<strong>影响到的文字blue</strong>.</h2>
8.id 选择器
(1)
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
id 属性只能在每个 HTML 文档中出现一次。
#red {color:red;}
#green {color:green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
9.类选择器
在 CSS 中，类选择器以一个点号显示
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
和 id 一样，class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
元素也可以基于它们的类而被选择：
td.fancy {
color: #f60;
background: #666;
}
<td class="fancy">
10.属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：Internet Explorer 7 （以及更高版本）在规定了 !DOCTYPE 的情况下支持属性选择器。
IE6 及更低的版本不支持属性选择器。
(1)带有指定属性 [title] { color:red; }
(2)指定属性值,属性值全匹配 [title=W3School] { color:red; }
(3)包含属性值,属性值用空格分隔 [title~=hello] { color:red; } <h2 title="hello world">Hello world</h2>
(4)包含属性值,属性值用连字符分隔[title|=hello] { color:red; }<p lang="en-us">Hi!</p>
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
11.创建CSS
(1)外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css" />
(2)内部样式表
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
(3)内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式时,如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
分享到：
相关推荐
normalize.css的目标是提供一致性和可预测性的基础样式，而不是完全抹去一切。 例如，normalize.css可能包括以下规则： 1. 统一不同元素的行高： ```css html { line-height: 1.15; } ``` 2. 调整元素的字体大小...
Font Awesome 是一款广泛使用的图标库，它为网页设计者提供了丰富的矢量图标，使得网站的视觉效果更加丰富多彩。在4.2.0版本中，Font Awesome 进一步提升了其在不同浏览器上的兼容性，特别是针对老旧的Internet ...
CSS初始化的目的就是创建一个统一的基础样式，覆盖这些默认样式，提供一个干净的样式起点。 在"commonInitialize.css"中，通常会包含以下几类初始化内容： 1. **重置默认样式**：这一步是为了消除浏览器之间的样式...
CSS重置（或称为CSS初始化）是一种消除这些默认样式差异的技术，让开发者可以从一个统一的基础开始构建网站。传统的CSS重置如Eric Meyer Reset或YUI Reset，通常通过设置大量元素的样式为零来实现。 而normalize....
总的来说，"bootstrap.min.js"和"bootstrap.min.css"是Bootstrap框架的基础，它们为开发者提供了强大的工具，使得创建响应式、易用的网页变得更加便捷。无论是初学者还是经验丰富的开发者，Bootstrap都是一个值得...
3. **SCSS**: SCSS（Sassy CSS）是另一种流行的CSS预处理器，它在LESS的基础上增加了更多特性，如嵌套选择器、变量、混合（mixins）、导入指令等。Hover.css中的`.scss`文件与LESS文件类似，为开发者提供了源代码，...
这个压缩包包含了版本8.0.1的“normalize.css”文件，它是一个广受欢迎的项目，旨在为各种浏览器提供一致的基础样式，消除不必要的默认样式，同时保持有意义的默认行为。 首先，我们需要理解“CSS重置”或“CSS初始...
总的来说，这三个文件共同构成了MUI的基础框架，使得开发者能够快速构建具有优秀用户体验的H5应用，尤其是涉及到二维码扫描功能时。在实际项目中，结合HTML和JavaScript，开发者可以利用MUI提供的组件和API实现丰富...
在前端开发领域，"core.css.zip" 这个文件标题暗示了一个重要的概念——核心样式表。这通常是指一个项目的基石，包含了一些基本的、全局的CSS样式规则，用于确保整个网站或应用程序有一致的视觉呈现和用户体验。...
"前端项目-sanitize.css.zip" 是一个专注于CSS规范化库的压缩包，名为"sanitize.css"，它是一个轻量级的解决方案，旨在消除浏览器之间的默认样式差异，提供一个干净的基础来构建你的Web应用。下面我们将深入探讨这个...
Balloon.css是一个基于纯CSS3实现的轻量级、易用的工具提示（tooltips）库，专门设计用于在网页上添加具有丰富视觉效果的提示信息。它无需JavaScript，只依赖于CSS3的特性，这使得它在性能上表现优秀，同时也降低了...
`10up-sanitize.css` 是一个专门针对这个问题的开源项目，它旨在为开发者提供一个基础的、安全的CSS样式集，确保在不同浏览器之间有良好的兼容性和一致性。这个项目主要包含了一个名为 `sanitize.css-master` 的压缩...
可能提供了基础的按钮样式，而其他复杂的样式可以通过组合类或者自定义CSS来实现，这样可以保持库的轻量级，同时满足个性化需求。 5. **无障碍性（Accessibility）**: 为了确保所有用户都能访问和使用，bttn.css...
这个名为“normalize.css-7.0.0.zip”的压缩包文件，正是包含了一个名为“normalize.css”的版本7.0.0的CSS文件，它为开发者提供了一个现代化的替代传统CSS重置的解决方案。 传统的CSS重置，如Eric Meyer's Reset或...
**一、CSS3动画基础** `checked.css`充分利用了CSS3的特性，如伪类选择器、过渡（transition）、动画（animation）等，来实现各种动态效果。CSS3的过渡可以平滑地改变一个元素从一种样式到另一种样式的状态，而动画...
可以将reset.css的内容分为两部分，一部分是基础的reset.css，这部分可以用于任何项目；另一部分是针对特定项目的reset样式，这些样式可以放在layout.css、typography.css等文件中。通过导入这些文件到base.css中，...
1. **基础介绍**：讲解jQuery UI的基本概念，包括如何引入库文件，以及如何初始化UI组件。 2. **组件详解**：逐一介绍每种组件的用法，如如何创建对话框、滑块等，以及它们的API和配置选项。 3. **事件和回调**：...
jQuery是一个高效、简洁的JavaScript库，而Bootstrap则是一个流行的前端开发框架，它集成了jQuery和一系列CSS样式。 **jQuery**: jQuery是由John Resig在2006年创建的，它极大地简化了JavaScript编程，特别是DOM...