1.当同一个HTML元素被不止一个样式定义时，优先级如下：
1）内联样式（在html元素内部）
2）内部样式表(<head>标签内)
3)外部样式表
4）浏览器缺省设置
2.css规则主要有选择器以及一条或多条声明构成
例：h1{color:red; font-size:14px;}
若值为若干单词，需要给值加引号
p {font-family: "sans serif";}
3.选择器分组
例子：所有标题分享相同声明
h1,h2,h3,h4,h5,h6 {
color: green;
}
4.派生选择器
我要评论li strong {
font-style: italic;
font-weight: normal;
}
体现如下：<p><strong>粗体字，不是斜体字，因为不在列表当中，所以这个规则对不起作用</strong></p>
<ol>
<li><strong>斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>正常的字体。</li>
</ol>
5.id选择器（id 属性只能在每个 HTML 文档中出现一次）
#red {color:red;}
#green {color:green;}
id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。
用id选择器来建立派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。
6.类选择器
1）类选择器以一个点号显示
.center {text-align: center}
所有拥有 center 类的 HTML 元素均为居中。
2）class也可用作派生选择器
.fancy td {
color: #f60;
background: #666;
}
类名为 fancy 的表格单元将是带有灰色背景的橙色。
7.属性选择器
[title]
{
color:red;
}
为带有 title 属性的所有元素设置样式
[title~=hello] { color:red; }
包含指定值的 title 属性的所有元素设置样式
[lang|=en] { color:red; }
包含指定值的 lang 属性的所有元素设置样式
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;
}
为表单设置样式
8.插入样式表的三种方式
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
多重样式
如果某个选择器同时被外部样式表和内部样式表设置样式
则这时候优先考虑内部样式表，内部样式表没有的再继承外部样式表
如对本文有疑问， 点击进行留言回复！！
CSS中的两个特殊值用于控制层叠的inherit和initial的方法
CSS3 input框的实现代码类似Google登录的动画效果
CSS 容器背景 10 种颜色渐变Demo（linear-gradient()）
详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式
网友评论