实例
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...》对你有帮助,请点赞、收藏,并留下你的观点哦!