1.html选择器
p{color:red}
a{color:red}
html选择器仅仅作用于页面中相关的标签
2.类选择器
.类名{color:red}
不同标签需要变成同一种样式时,用类选择器.
3.ID选择器
#ID名{font-size:100px}
ID选择器作用于有ID名的所在行
修饰背景图片
background-color:背景颜色
background-image:背景图片,url(路径)
background-repeat:no-repeat(背景不重复)/repeat-x(延水平方向重复)/repeat-y(延y轴方向重复)
background-position:绝对背景图片的位置
background-attachment:控制背景图片是否固定fixed(固定)/scoll(默认值,随内容滚动)
简写方式
body
{
background:url(img/1.gif) no-repeat center
}
/* */用来注释样式
当三种选择器同时作用于同一行时,ID选择器的优先级最高,然后是类选择器,优先级最低的是html选择器.
连接修饰总结
text-decoration:去掉连接的下划线none(无下划线)underline(有下划线)overline(上划线)
伪类选择器
a:hover{font-size:50px}鼠标悬浮于链接
a:active{}:鼠标正在被按下时链接的样式
a:link{}:未被访问的链接样式
a:visited{}:已被访问过的链接样式
对于不同的链接,鼠标悬浮产生不同的颜色,可用伪类选择器的变异版
.a1:hover{}
.a2:hover{}
.a3:hover{}
其中a1,a2,a3为类选择器
.a1{text-decoration:none}
表格修饰
table
{
background-image:url();
width:550px
}
组合选择器:
#user,#pwd
{
background-image:url();
width:300px
}
#pwd{background-image:url()}
包含选择器
<ul>
<li>公司</li>
<li>地址</li>
<li>技术</li>
</ul>
ul li
{
list-style-image:url()
}
ol li
{
list-style-image:url()
}
盒模型属性
table,td,text,password/radio/checkbox/button/submit/reset
其中tr不是盒模型
属性
border-style:边框样式solid:实线,dashed:虚线,dotted:点线
border-color:边框颜色
padding-left:写的内容距左边框的距离
margin:被修饰元素和周围元素之间的距离
当定义背景图片时,
background-image:
width
height
三个属性要一起走,对于火狐浏览器,还有三个属性一定要写
border:0px;padding:0px;margin:0px
框架页
<frameset rows="15%,*"
<frame>
<frameset cols="10%,*">
<frame>
<frame>
</frameset>
</frameset>
<a href="打开的页面路径" target="窗口的名字">
<frame name="窗口的名字">
target的四个值
_self:代表在自身页面打开一个窗口(默认)
_blank:代表在新浏览器窗口打开
_top:代表在整个浏览器窗口打开
_parent:在上一级窗口打开
<frame noresize="noresize">
noresize:表示用户不能调整框架的大小
<frameset frameborder="yes/no/1/0">
frameborder:表示是否要出现框架的边框