CSS小记
CSS小记
1.CSS简介
CSS（Cascading Style Sheet）层叠样式表；决定了如何显示HTML元素；由W3C创造
1. 特点
- 样式通常储存在样式表中
- 外部样式表通常存储在 css文件中
- 多个样式定义可层叠为一
2. 引入方式
行内式：即标签中用style标签设定css样式（不推荐）
内嵌式：在成对的head标签中嵌入style标签（对于多个网页，若修改样式麻烦）
导入式
将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件
<head> <style type="text/css"> @import"mystyle.css"; </style> </head>缺点：导入式会在整个网页装载完后再装载css文件；这就造成了一个问题
若网页比较大则会出现先显示无样式的页面，闪烁一下之后，再出现网页的样式
链接式
此方式 也是将一个.css文件引入到html文件中，但它与导入式不同的是使用html规则引入外部css文件
<head> <link rel="stylesheet" href="mystyle.css" type="text/css" /> </head>优势：在网页文件主体装载前装载完成，显示出的网页一开始就是带样式效果的
3. 层叠次序（优先级）
问：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
答：一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高优先级
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于head标签内部）
- 内联样式（在html文档的元素标签内部）
2. CSS语法
1. 基础语法
简介
css规则由两个主要的部分构成：选择器以及一条或者多条声明
选择器通常是您需要改变样式的html元素
每一条声明由一个属性和一个值组成
注意:
若值为若干单词，则要给值添加引号
p {font-family:"sans serif"}css 对大小写不敏感；注意空格以便编辑
body { color: #0000; margin: 0; padding: 0; }
2. 高级语法
1. 选择器分组
h1,h2,h3,h4,h5,h6{ /*用逗号隔开*/
color:green;
}
2.继承
子元素从父元素继承属性
body {
font-family:Verdana,sans-serif;
}
/*body里面的所有子元素都使用 Verdana字体*/
若要摆脱继承，可以独立创建一个针对某标签的特殊规则
body {
font-family:Verdana,sans-serif;
}
p {
font-family:Times,"Times New Roman",serif;
}
3. 选择器分类
1. id 选择器
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
#red {color: red;}
#green {color: green;}
</style>
</head>
<body>
<p id="red">这个段落是红色</p>
<p id="green">这个段落是绿色</p>
</body>
</html>
2. class 选择器
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned
</p>
</body>
</html>
class选择器和派生选择器
.fancy td {
color: #f60;
background: #666
}
/*在上述列子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字
（名为fancy的更大元素可能是一个表格或div）*/
元素也可以基于它们的类而被选择
td.fancy{
color: #f60;
background: #666;
}
<!--在上述列子中，类名为fancy的表格单元将是带有灰色背景的橙色文字
仅仅作用于td元素下的.fancy类-->
3. 派生选择器
通过依据元素在其位置的上下文关系来定义样式，使标记更加简洁
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
li strong {
font-style: italic;
font-weight: normal;
}
</style>
</head>
<body>
<p>
<strong>
我是粗体字
</strong>
</p>
<ol>
<li>
<strong>
我是斜体字，这是因为我是在li列表中
</strong>
</li>
<li>
我是正常字体
</li>
</ol>
</body>
</html>
id选择器和派生选择器
在现代布局种，id选择器常常用于建立派生选择器
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
#sidebar p {
font-style: italic;
text-align: right;
marign-top: 0.5em;
color:red;
}
</style>
</head>
<body>
<p id="sidebar">这个段落是红色</p>
<p id="green">这个段落是绿色</p>
</body>
</html>
4. 属性选择器
对带有指定属性的html元素设置样式
[title] {
color: red;
}
属性和值选择器（单个值）
[title="W3School"] {
border: 5px solid blue;
}
属性和值选择器（多个值）
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
[title~=hello] /*适用于由空格分隔的属性值*/
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />
<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
[lang|=en]/*适用于由连字符分隔的属性值*/
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>
常用场景：设置表单的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
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;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
5. 后代选择器
后代选择器亦包含选择器；可以选择作为某元素后代的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 em {color:red;} /* 元素em为h1的后代；两元素的层次间隔是无限的 */
</style>
</head>
<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
6. 子元素选择器
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，用此选择器
子结合符( > )
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}
/*这个规则会把第一个h1下面的两个strong元素内容变红色，其它则不受影响*/
</style>
</head>
<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
7. 相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可用此选择器
相邻兄弟结合符（ + ）
注意：用一个结合符只能选择两个相邻兄弟中第二个元素
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
/*上面这个选择器只会把列表中的第二个和第三个列表项变为粗体;第一个列表项不受影响*/
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
</body>
</html>
结合其它结合符例子
html>body table + ul{
margin-top: 20px;
}
/*解释：选择紧接在table元素后的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身也是html元素的子元素*/
4. 伪类
css伪类 （ pseudo-classes）用于 向某些选择器添加特殊 的效果
语法
selector/selector.class : pseudo-class{ property: value; }锚伪类
链接的不同状态分别以不同的方式显示（对大小写不敏感）
a:link {color: #FF0000}/*未访问的状态*/ a:visited {color: #00FF00}/* 已访问的状态*/ a:hover {color: #FF00FF}/*鼠标移动到链接上的状态*/ a:active {color:#0000FF}/*选定的链接*/ /*注意顺序，必须按照上面的顺序，否则无效*/伪类与css类配合使用
a.red : visited{ color:#FF0000; } <a class="red" href="css_syntax.asp">CSS Syntax</a> /*假如上面的列子中的链接被访问过，那么它将显示为红色*/
5. 伪元素
伪元素（pseudo-element）用于向某些选择器设置特殊效果
语法
selector/selector.class : pseudo-element{ property: value; }after伪元素
可以在元素的内容后面插入新内容
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <style type="text/css"> h1:before { content:url(/i/w3school_logo_white.gif) } </style> </head> <body> <h1>This is a heading</h1> <p>The :before pseudo-element inserts content before an element.</p> <h1>This is a heading</h1> <p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。 </body> </html>效果：
反之before伪元素是插在元素内容前面
3. 常用CSS
后续跟进……
赞 (0)