css学习笔记--张孝祥视频
设置css的几种方式
1.内联样式表（INLINE STYLES)
<meta http-equiv="Content-Style-Type" content="text/css">
2.嵌入样式表(Embeded style sheets)
<head>
<style type="text/css" media="screen,projection">
<!--(注释标签，支持style标签的浏览器会自动忽略，否则相反)
P{FONT-SIZE:20pt;COLOR:blue;FONT-FAMILY;宋体;LIST-STYLE-TYPE
:circle;TEXT-DECORATION:underline}
-->
</style>
</head>
3.外部样式表(LInked style sheets)
编写一个test.css文件
P{FONT-SIZE:20pt;COLOR:blue;FONT-FAMILY;宋体;LIST-STYLE-TYPE
:circle;TEXT-DECORATION:underline}
将上面保存为css文件
作用于html文件
<head>
<link rel="StyleSheet" href="test.css" type="text/css" media="screen">
</head>
4.输入样式表(imported style sheets)
可以使用css的@import 声明将一个外部样式文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css的文件的一部分。也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中，被 输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句.
<STYLE TYPE="text/css" MEDIA="screen,projection">
<!--
@import url(http://www.hao123.com/style.css);
@import url(/stylesheets/style.css);
-->如有样式相同，则以最后一个为准
样式规则的选择器:
HTML selector
Class selector :要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的CLASS属性设置为不同的值
<p class="storp">p1</p>
<p class="warning">p2</p>
在样式表中，可以分别为某个HTML标签的各个类别定义样式规则：
<STYLE>
P.stop{color:red}
P.warning{color:yellow}
在样式表中，可以为某个类别的所有HTML标签定义样式规则:
<STYLE>
.blueone{color:blue}
</STYLE>
<h1 class="blueone">bluetitle</h1>
<p class="blueone">bluepara</p>
ID selector
ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值 ，ID selector就是为样式规则定义语句选择具有某一ID属性值 的HTML 元素
<span ID="yellowone">texthere</span>
在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下:
<STYLE>
<!--
#YELOWONE{COLOR:YELLOW}
-->
</STYLE>
经验总结：
1.ID SELECTOR只能为单个HTML标签元素设置样式规则，因此具有一定的局限性，在CSS中应该尽量少用。JS和css可以根据这个ID值来操纵和定位这个特定的HTML标签，所以ID属性在JS中会被广泛应用。
2.如果网页只在某种媒介上输出时，才需要对某个单一元素进行样式设置的话，应该使用ID SELECTOR代替直接设置HTML元素的style属性的内联样式表。
3.在网页中使用了嵌入和链接样式表后，对某个元素的显示效果需要对样式表中已定义的相关样式重新设定，这就要用使用内联样式表来直接设置HTML元素的STYLE属性。
关联选择器
指一个用空格隔开的两上或更多的单一选择器组成 的字符串，例如：P EM{background:yellow}
其中的P EM就是关联选择器，它表示段落中的强调文本（<em></em>标签对中的内容）的背景为黄色 ，而其它 地方出现的强调文本则不受影响。
关联我选择器的样式规则的优先权比单一选择器的要高
组合选择器
为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号隔开，例如：H1,H2,H3,H4,H5,TD{color:red}
伪元素选择器
使用伪元素作为选择器的样式规则定义格式：
HTML元素：伪元素{属性 ：值}
常用的伪元素：
A:active选中超链接的状态
A:hover光标移动到超链接上的状态
A:link超链接的正常状态
A:visited访问的超链接状态
P:first-line段落中的第一行文本
P:first-letter段落中的第一个字母
类选择器与伪元素一起使用的格式：
HTML元素 类名：伪元素{属性：值 }
CSS的样式属性：
可大体分为：
字体：
font-family
font-size(larger smaller xx-small x-small small medium large x-large xx-large)
font-style(字体的样式)
text-decoration
font-weight(粗体)
font-variant
text-transform(转换大小写字母)
Color
背景:
background-color
background-image 例如：{background-image:url("http://www.it315.org/logo.gif")}
background-repeat(no-repeat repeat repeat-x repeat-y)
background-attachment(fixed scroll(表示图像要跟随内容的移动而移动))
background-position (left center right 20px top bottom)
文本:
word-spacing
letter-spacing
vertical-align(sub(下标), super(上标),top,middle,bottom)
text-align(Left,right,center,justify)
text-indent(文本第一行的缩进值 )
white-space:(normal,pre,nowrap)
line-height设置所在行的行高
位置，布局，边缘，列表，其它等属性
1.内联样式表（INLINE STYLES)
<meta http-equiv="Content-Style-Type" content="text/css">
2.嵌入样式表(Embeded style sheets)
<head>
<style type="text/css" media="screen,projection">
<!--(注释标签，支持style标签的浏览器会自动忽略，否则相反)
P{FONT-SIZE:20pt;COLOR:blue;FONT-FAMILY;宋体;LIST-STYLE-TYPE
:circle;TEXT-DECORATION:underline}
-->
</style>
</head>
3.外部样式表(LInked style sheets)
编写一个test.css文件
P{FONT-SIZE:20pt;COLOR:blue;FONT-FAMILY;宋体;LIST-STYLE-TYPE
:circle;TEXT-DECORATION:underline}
将上面保存为css文件
作用于html文件
<head>
<link rel="StyleSheet" href="test.css" type="text/css" media="screen">
</head>
4.输入样式表(imported style sheets)
可以使用css的@import 声明将一个外部样式文件输入到另外一个css文件中，被输入的css文件中的样式规则定义语句就成为了输入到的css的文件的一部分。也可以使用@import声明将一个css文件输入到网页文件的<style></style>标签对中，被 输入的css文件中的样式规则定义语句就成了<style></style>标签对中的语句.
<STYLE TYPE="text/css" MEDIA="screen,projection">
<!--
@import url(http://www.hao123.com/style.css);
@import url(/stylesheets/style.css);
-->如有样式相同，则以最后一个为准
样式规则的选择器:
HTML selector
Class selector :要将一种HTML标签所创建的各个网页元素分成几类，需要将这个HTML标签的CLASS属性设置为不同的值
<p class="storp">p1</p>
<p class="warning">p2</p>
在样式表中，可以分别为某个HTML标签的各个类别定义样式规则：
<STYLE>
P.stop{color:red}
P.warning{color:yellow}
在样式表中，可以为某个类别的所有HTML标签定义样式规则:
<STYLE>
.blueone{color:blue}
</STYLE>
<h1 class="blueone">bluetitle</h1>
<p class="blueone">bluepara</p>
ID selector
ID属性用来定义某一个特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值 ，ID selector就是为样式规则定义语句选择具有某一ID属性值 的HTML 元素
<span ID="yellowone">texthere</span>
在样式表中，ID值为yellowone的HTML元素的样式规则定义语句如下:
<STYLE>
<!--
#YELOWONE{COLOR:YELLOW}
-->
</STYLE>
经验总结：
1.ID SELECTOR只能为单个HTML标签元素设置样式规则，因此具有一定的局限性，在CSS中应该尽量少用。JS和css可以根据这个ID值来操纵和定位这个特定的HTML标签，所以ID属性在JS中会被广泛应用。
2.如果网页只在某种媒介上输出时，才需要对某个单一元素进行样式设置的话，应该使用ID SELECTOR代替直接设置HTML元素的style属性的内联样式表。
3.在网页中使用了嵌入和链接样式表后，对某个元素的显示效果需要对样式表中已定义的相关样式重新设定，这就要用使用内联样式表来直接设置HTML元素的STYLE属性。
关联选择器
指一个用空格隔开的两上或更多的单一选择器组成 的字符串，例如：P EM{background:yellow}
其中的P EM就是关联选择器，它表示段落中的强调文本（<em></em>标签对中的内容）的背景为黄色 ，而其它 地方出现的强调文本则不受影响。
关联我选择器的样式规则的优先权比单一选择器的要高
组合选择器
为了减少样式表的重复声明，可以在一条样式规则定义语句中组合若干个选择器，每个选择器之间用逗号隔开，例如：H1,H2,H3,H4,H5,TD{color:red}
伪元素选择器
使用伪元素作为选择器的样式规则定义格式：
HTML元素：伪元素{属性 ：值}
常用的伪元素：
A:active选中超链接的状态
A:hover光标移动到超链接上的状态
A:link超链接的正常状态
A:visited访问的超链接状态
P:first-line段落中的第一行文本
P:first-letter段落中的第一个字母
类选择器与伪元素一起使用的格式：
HTML元素 类名：伪元素{属性：值 }
CSS的样式属性：
可大体分为：
字体：
font-family
font-size(larger smaller xx-small x-small small medium large x-large xx-large)
font-style(字体的样式)
text-decoration
font-weight(粗体)
font-variant
text-transform(转换大小写字母)
Color
背景:
background-color
background-image 例如：{background-image:url("http://www.it315.org/logo.gif")}
background-repeat(no-repeat repeat repeat-x repeat-y)
background-attachment(fixed scroll(表示图像要跟随内容的移动而移动))
background-position (left center right 20px top bottom)
文本:
word-spacing
letter-spacing
vertical-align(sub(下标), super(上标),top,middle,bottom)
text-align(Left,right,center,justify)
text-indent(文本第一行的缩进值 )
white-space:(normal,pre,nowrap)
line-height设置所在行的行高
位置，布局，边缘，列表，其它等属性