实例

html>

外部样式

ILovePHP中文网！from赵桂福

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、内部样式：用 标签

实例

html>

内联样式

p{

background:green;color:white;

}

ILovePHP中文网！from赵桂福

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、内联样式 用属性：style

实例

html>

内联样式

ILovePHP中文网！from赵桂福

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结： 从中我们可以看到，优先级最高的是 内联样式，然后是 内部样式，最后是 外部样式，让我们用案例说明一下：

实例

html>

内联样式

p{

background:green;color:white;

}

ILovePHP中文网！from赵桂福

运行实例 »

点击 "运行实例" 按钮查看在线实例

三个样式同时存在，*************效果展示：

三、css的id、class 与标签选择器的使用规则

1、标签选择器

实例

html{color:black;}

h1{color:blue;}

p{color:silver;}

span{color:red;}

本次学习css之标签

根据php中文网好好学习前端开发。诸哥辛苦了啊。

我是赵桂福，小赵。

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、 id 选择器 用 ‘#’说明

实例

#p{font-weight:bold;background:red;color:white}

cssid使用

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、class 的使用： 用 ‘.’说明

实例

.p{font-weight:bold;background:blue;color:white}

cssid使用

运行实例 »

点击 "运行实例" 按钮查看在线实例

四、盒模型五大要素的展示

实例

html>

盒模型的说明

*{

margin:0;

padding:0;

}

.demo{

height:200px;

background:#eee;

border:10pxsolidgreen;

border-top:10pxsolidred;

margin-top:12px;

}

.parent{

height:200px;

background:#88f;

padding:30px;

}

.child{

height:100px;

margin:20px;

background:#0ff;

pading:12px16px;

width:200px;

}

这个地方能够看到，边框。margin-top的效果

子元素

margin:20px;

父元素

没有设置margin-top

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

通过本次的联系加深了对 iframe 、css 、盒模型的印象，动手操作是学习最好的工具。不断的练习才能够不断的熟练！

如果觉得《html ifrme 选择器 html中iframe/css样式设置 id class选择器的使用规则等学习.9.2 08:00...》对你有帮助，请点赞、收藏，并留下你的观点哦！