《HTML+CSS》视频5 CSS入门

CSS:
层叠样式表(Cascading style sheets)可以用来为网页创建样式表，通过样式表可以对网页进行装饰。网页实际上是多层的。

1、可以把css样式编写到元素(标签)的style属性当中，不同属性值之间用分号隔开，最后用分号结束。font-size的单位为px像素，特别注意引号的位置，只需要加一个，把所有的键值对括起来。

<p style="color:red"> 这是一段话<p>

将样式直接写在style属性中的成为内联样式，内联样式只对当前元素中的内容起作用，不方便复用，且结构与表现混合，不方便后期维护。

2、可以把css样式编写到head中的style标签里，然后通过css选择器指定元素，则所有元素可以同时设置样式，也可以实现结构和表现分离，这种样式成为内部样式。

<style type="text/css">
	p{
		color:red; 
		font-size:40px
	}
</style>

3、可以将style编写到外部的css文件当中，然后通过link标签将外部的css文件引入到当前页面中，这种称为外部样式。rel->relevant

<link rel="stylesheet" type="text/css" href="style.css">

这样可以利用浏览器的缓存，加快用户访问的速度，提高用户体验。

块元素和内联元素：

div是一个块元素，会独占一行，主要用来对页面进行布局。

<div> 我是一个块元素</div>

p标签、h标签也都是块元素。

span是一个内联元素（行内元素），只占自身大小的元素，不会占用一整行。专门用来选中文字，为文字设置样式。

<span id="a">
	我是一行span
</span>
<span id="b" style="color:red">
	专门为文字设置样式
</span>

a元素也是一种内联元素。

一般块元素div可以包含内联元素，而内联元素span不能包含块元素。

超链接元素a可以包含除了自身之外的任意元素。

块元素p中不能包含任何其他的块元素。

css的世界

Style标签里面，属于css的内容，html格式的标签或者注释等等已经不适用了。

css的注释格式：

/*
注释
*/

CSS主要有有两部分组成：选择器和声明块。

选择器：选中页面中指定元素，并且将声明块中的样式应用到选择器对应的元素上。

声明块：紧跟在选择器后面，用{}括起来，声明块中是一组键值对结构，每一组键值对称为一个声明，。不同声明之间使用;分开。

web开发IDE（集成开发工具）：Hbuilder
alt+/：提示
Ctrl+D：删除一行
Ctrl+shift+R:复制一行
Ctrl+enter：换行

根据要选择的内容不同，可以使用不同的选择器：
元素选择器：选中标签内所有的元素
id选择器：通过元素的id属性值来选中唯一的一个元素。
语法：#id属性值{}

#p1{font-size:20px}

例如：

<style type="text/css">
	#p2{font-size:20px}
</style>
<p>锄禾日当午</p>
<p id="p2">汗滴禾下土</p>

类选择器：可以为元素设置class属性，class属性和id属性类似，但是class属性可以重复。
语法.class{}

<style type="text/css">
	#p2{font-size:20px;}
	.class1{color: gold;}
</style>

不同的选择器可以分组，通过选择器分组可以同时选中多个选择器对应的元素。
语法：选择器1，选择器2，选择器n{}

#p1,.class1,h1{color:gold;}

通配选择器：*{}
复合选择器（交集选择器）：可以选中同时满足多个选择器的元素
语法：选择器1 选择器2 选择器n{}
选择器之间用空格隔开。

父元素、子元素：直接包含与被包含
祖先元素、后代元素：直接或间接包含与被包含
兄弟元素：拥有相同父元素

后代元素选择器：选中指定元素的指定后代元素。
语法：祖先元素 后代元素{}

子元素选择器：选中指定父元素的指定子元素。
语法：父元素>子元素{}

IE6及以下的浏览器不支持子元素选择器。