小白的css笔记（一）

1、先解释一波html与XHTML的区别（不用在听到这个名字的时候被吓一大跳）通过严格的编码HTML就可以符合XHTML的要求

· XHTML元素必须被正确地嵌套。标签应该成对的从内向外；

· XHTML元素必须被关闭。即必须使用类似

的结束标签；

· 标签名必须用小写字母。因为XHTML要求标签和属性对大小写敏感，可以从写html就养成这个好习惯；

· XHTML文档必须拥有根元素。所有的XHTML元素必须嵌套在html根元素中，即满足这样的标签；

 

2、css层叠样式表(cascading style sheets)

    如果说网页分为结构、表现、行为三部分的话，html就是结构，css就是网页的布局表现。

   在css中样式表定义如何显示html元素，不同类型的样式表可以相互层叠，其中内联样式具有最高的优先权（意思就是当标签或者属性的内容同时被几种样式表定义时，以内联样式为准）。

1. 浏览器缺省设置

2. 外部样式表（直接将link标签写在标签内）

3. 内部样式表（用标签写在标签内）

4. 内联样式（在 HTML元素内部）     

 

 ***外部样式表：

  相对优势大，独立于HTML文件，可同时被多个文件引用，只需下载一次样式表，浏览器会先显示html内容再根据样式表对页面渲染，加载更快。

      以.css为拓展名，在中使用标签将外部css样式表文件链接到HTML文件中。

  其中标签定义文档与外部资源的关系，最常见的就是链接样式表；link没有结束标签，且必须被正确关闭。link是空元素，仅包含属性，href，type，rel比较主要。

其中href表示被链接文档的位置，用的时候填写文档的URL或者本地文档的具体路径；rel表示被链接文档与当前文档的关系，此时被链接文档是样式表；type是规定被链接文档的MIME类型，（注：MIME是一种协议，Multipurpose Internet Mail Extentions，即用于当被链接的文档被浏览器打开时，浏览器可以自动选择用什么应用程序或者插件来打开该文档。 ）

***内部样式表

    将type写入style标签的属性中,整体的位置是放在标签内部。.此处的type属性同上文。

***内联样式表

即将css样式表写在xhtml标签内部，由style属性支持，只需将css代码分号分隔开输入在style中就可以完成定义。

这就是内联样式的编写方法

3、CSS语法

主要是两部分组成，选择器和声明，

selector {declaration1;  declaration2;  declaration3;......declarationN;}

选择器是需要改变样式的html元素，声明是由属性和值构成的,用分号隔开，总体用花括号包围起来。

（图片摘自网络）

其中值可以用英文单词，十六进制，十六进制的缩写，以及rgb百分数表示。（注：rgb是一种色彩模式，通过调节红绿蓝三种通道的颜色来获取任何一种想要的颜色，每种色彩用百分数来表示，eg：红色RGB（100%，0%，0%））。

***由于与html混合在一起，所以尽量大小写敏感。

***可以对选择器进行分组，这样可以使html元素共享声明。

h1,h2.h3,h4,h5{
   color: Red;
}

***子元素可以继承父元素的样式，若有些浏览器无法理解继承，我们可以选择用组选择器对需要样式的元素全部进行声明。

4、CSS选择器

***引伸注解：

标签是列表项目的定义；

标签代表有序列表，产生的界面列表项目前自动加上1、2、3、，

标签是无序列表，列表项目前黑点提示。

（1）派生选择器

li strong {
   font-style:italic;
   font-family:normal;
}

上述代码的意义为列表中strong标签内的字体相应的样式。在列表下的，标签内的，类似这样的一种关系就叫做派生。eg：妈妈的儿子，中国的云南。

 （2）id选择器#######

      可以为标有特定id的HTML元素指定特定的样式，id选择器用#来定义。

#sidebar{   

    color:red;
}

我想用id为sidebar的样式

 id属性规定元素的唯一的id,id在HTML文档必须是唯一的。即每种标签的id值只能有一种，否则就产生冲突了。错误实例eg：

这样就是错误的。

因此id选择器常常用于建立派生选择器，

即使被标注为sidebar的元素只能在文档中出现一次，但是这个id选择器作为派生选择器可以被使用很多次。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

上面的样式只会应用于id是sidebar元素的段落内，p是段落。单独的id选择器也可以发挥作用。

（3）类选择器......(点)

类选择器用一个点号表示,类名的第一个字符不能用数字！

.center{text-align:center}

class属性规定元素的类名，与id选择器不同的是，一个HTML元素可以拥有多个类，从而合并多个类中的样式。

****同样，类选择器也可以作为派生选择器。

.fancy td {
	color: #f60;
	background: #666;
	}

也可以写成td.fancy  或者 .

（4）属性选择器【】中括号

可以为拥有指定属性的html元素设置样式，而不仅限于class和id属性。

[title]
{
   color:red;
}

也可以设置属性和值选择器，如下：

[title=sidebar]{
    color:green;
}

还可以选择属性和近似的值选择器，即属性的值中包含该值的都可以被选中。

[title~=hello]
{
   color:red;
}

Hello world

选中

Hello W3School students!选中