css和js简介.ppt

文档介绍：CSS和Javascipt介绍
CSS的作用
通过CSS来动态改变页面的视觉效果
实现形式和内容的分离,利于页面的视觉维护
原始的html代码
<span>这是一段原始的html</span>
改变文字的样式
<span>
<strong>
<font color="#ff0000">
这是一段原始的html
</font>
</strong>
</span>
引入style
<span style="color:#0000FF; font-weight:bold; ">加入了style的代码</span>
<span>
<strong>
<font color="#ff0000">
这是一段原始的html
</font>
</strong>
</span>
Style属性的语法
<标签 style=“属性1;属性2;…;属性n;”>内容</标签>
style属性是所有html标签的公用属性,不过对于不用的标签,他们所支持style里的属性也不一样
常见属性
Color:字体颜色
Font-weight:字体粗细类型
Font-size:字体大小
Border:边框类型
Background-color:背景颜色
Margin:外边距
Padding:内边距
多个style
<div>
<span style="color:#FF0000;font-size:14px">红色14号</span>
<span style="color:#FFFF00; font-size:30px;">黄色30号</span>
</div>
样式分离
<style>
.my_red{
font-weight:bold;
color:#FF0000;
font-size:14px;
}
.my_yellow{
font-weight:bold;
color:#FFFF00;
font-size:30px;
}
</style>
<div>
<span class="my_red">红色14号</span>
<span class="my_yellow">黄色30号</span>
</div>
样式重用
<style>
.my_red{
font-weight:bold;
color:#FF0000;
font-size:14px;
}
.my_yellow{
font-weight:bold;
color:#FFFF00;
font-size:30px;
}
</style>
.my_red{
color:#FF0000;
font-size:14px;
}
.my_yellow{
color:#FFFF00;
font-size:30px;
}
</style>
<style>
.my_bold{
font-weight:bold;
}
<div>
<span class="my_red my_bold">红色14号</span>
<span class="my_yellow my_bold">黄色30号</span>
</div>
样式选择器
标签选择器
Class选择器
Id选择器
作用:
将style和对象关联起来