/*CSS 指层叠样式表 (Cascading Style Sheets)*/
/*CSS 语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。*/
h1,h2,h3,h4,h5,h6 {
color: rgb(255,255,255);
color: red;
color: #foo;
font-family: arial;
font-style: initial;
font-weight: normal;
font-size: 0.5em;}
/*id 选择器*/
#study option {
border: 1px dotted #0000FF;}
/*CSS 类选择器*/
.studyClass {
background: aquamarine;}
/*CSS 属性选择器*/
/*注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。*/
/*为所有带有title属性的所有元素设置样式*/
[title] {
color: -webkit-link;}
/*为title等于name设置样式*/
[title=name] {
border: 5px solid blue;}
/*用于选取属性值中包含指定词汇的元素。*/
[title~=hello] { color:red; }
/*属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：*/
input[type=button] {
margin-left: 12px;}
/* 用于选取带有指定属性的元素。
* 为带有target属性的a元素设置样式*/
a[target] {backface-visibility: hidden;}
/*用于选取带有指定属性和值的元素。
为 target="_blank" 的 <a> 元素设置样式：
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度 */
a[target=_blank]{
background-color:yellow;
display: block;
}
/*相邻兄弟选择器
* 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。 */
h1 + p {margin-top:50px;}
body {
margin: 0;
padding: 0;
}
/*背景图片 背景重复
* 背景定位
可以利用 background-position 属性改变图像在背景中的位置。
图像放在水平方向 2/3、垂直方向 1/3 处
背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响
*/
body {background-image: url(../img/w3c.jpg);
background-repeat: repeat-x;
background-position: center;
background-position: 66% 33%;
background-attachment: fixed;
}
/*css文本
首行缩进
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
水平对齐 text-align
值 描述
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
*/
p {
text-indent: 5em;
text-align: center;
}
/*字母间隔
letter-spacing 属性
text-transform 属性处理文本的大小写。这个属性有 4 个值：
none
uppercase 大写
lowercase 小写
capitalize 首字母大写
文本装饰 text-decoration 有5个值 none underliner:文本下方 overline:文本上方 line-through:中间的删除线 blink: 会让文本闪烁
去除超链接的下划线 : text-decoration:none
*/
h1 {
letter-spacing: -0.5em;
text-transform: uppercase;
text-decoration: underline overline;
}
/*字体
字体变形
font-variant 属性可以设定小型大写字母。
font-weight 属性设置文本的粗细
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，
100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
font-size 属性设置文本的大小。默认16px 16px=1em
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
*/
h2 {
font-family: "微软雅黑";
font-style: italic;
font-weight: 100;
font-size: 12;
}
/*css 链接
链接的四种状态: a:link 普通的.未被访问的链接
a:visited 用户一已经访问的链接
a:hover 鼠标指针位于链接的之上
a:active 链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
*/
a:link{}
a:visited{}
a:hover{}
a:active{}
/*ul li {list-style-image : url(xxx.gif)}*/
/*CSS 列表属性(list)
属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset */
ul {list-style-type : square}
/*匹配属性值以指定值开头的每个元素。
设置 class 属性值以 "test" 开头的所有 div 元素的背景色：*/
div [class ^="test"] {}
/*匹配属性值以指定值结尾的每个元素。*/
div [class$="test"]
/*定义单边样式
如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style*/
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
/*CSS 边框属性
属性 描述
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。*/
/*CSS 外边距属性
属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。*/
/*图片的透明度
* IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。*/
img {opacity: 0.4;}
img:hover {opacity: 1.0;}
/*如何插入样式表*/
/*<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>*/
/*内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>
内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>*/