html做成文档样式,html+CSS之文档样式（一）

今天学习了样式方面的知识，因而写一下本身的心得，和你们分享一下~ ~css

文档样式：

html

以出如今文档

内。

如：

规则表设计

code

每一条规则分两部分：选择器、一组属性与值。

如：selector  {属性1:值1; 属性2:值2; ...;}orm

标签选择器

顾名思义，就是能够经过标签来设计其样式，也就是做用于整个文档的制定标签。适用于设计同一标签且样式同样的。

无标题文档

h1{

color:red;

font-size:36px;

}

h2,p{/*并集标签，用逗号“,”隔开*/

color:blue;

}

样式设计

标签选择器

一块儿学习样式

效果图：

htm

2.类选择器blog

1) 做用于多种不一样的标签，适合用于设计不一样标签但样式相同的标签。继承

无标题文档

.name{color:blue;}

样式设计

标签选择器

一块儿学习样式

效果图：utf-8

2)类选择器也能够做用于同一标签的不一样实例。

无标题文档

h1.name{color:blue;}

h1.else{color:red;}

样式设计

类选择器

效果图：

3.id选择器

只能作用于文档中惟一的一个标签实例。(id在同一个页面也能够用好几回)

4.通配选择器

适用于文档中的全部标签，能够定义全部标签的样式。适用于全局配置。

无标题文档

*{color:blue;}

h1.else{color:red;}

样式设计

类选择器

配置选择器

标签选择器

效果图：

(从效果图能够看出，在配置选择器的做用下，类选择器优先级更高。)

5.上下文选择器

限定于文档上某些特定位置上的元素，一共有两种写法：

1)写法一：

无标题文档

form em {font-size:14pt; color:red;}

样式做用的文字其余文字

其余文字

效果图：

2)写法二：

#normal {font-size:20;}

#normal p {color:red; }

#normal h3 {color:blue; }

应用id继承

应用id继承

没有应用id继承

没有应用id继承

效果图：