样式表三种写法
1内联写法:style直接写在标签内。个人感觉多用于个别标签,一般情况优先级较高
style="font-size:16px;"
2内嵌写法:写在<head></head>标签内。个人感觉多用于较多或通用的一类标签,用来减少工作量
<style type="text/css">
{}
</style>
分为三种:
标签选择器
<style type="text/css">
标签名(类如div){ }
</style>
类选择器
<style type="text/css">
.class{}
</style>
id选择器
<style type="text/css">
#id{ }
</style>
特别的
*表示对所有元素起作用
<style type="text/css">
*{
}
</style>
三种复合选择器
并列,用,
<style type="text/css">
标签名,#id{
}
</style>
子代,用空格
<style type="text/css">
table td{
}
</style>
筛选,用.
<style type="text/css">
牌
p.sp{
}
</style>
3外部样式表
<Link rel="stylesheet" type=‘text/css‘"href=’’"/>
这里用href
常用属性
1· 背景与前景
background-color:;背景色,
background-image:url(); 设置背景图片
background-attachment:fixed; 背景固定
background-repeat:no-repeat; 不平铺
background-position:center;背景图居中,设置背景图位置时,repeat必须为no-repeat
2字体
font-family:字体
color:文字颜色
font-size:18px; 字体大小(12px,14px,18px)
font-weight:normal;bold加粗
font-style:italic; 倾斜
text-decoration:overline; 下划线
text-align:center; (水平)居中对齐
vertical-align:middle; (垂直)居中对齐;与行高同用
line-height:行高
3边界与边框
border:5px solid red; 红色,5像素
margin:50px; 外边框宽度50像素
margin-top:50px; 上边外边框宽度50像素
margin:20px 0px 20px 0px; 顺序:上右下左,时钟顺时针顺序
padding:50px; 内间距50像素
padding-top:50px; 内上边框50像素
padding:50px 20px 10px 20px; 顺序为上右下左,时钟顺时针顺序