<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
background:url('btn_1.gif') no-repeat scroll 0pt transparent;
① <head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
②四种选择器:
#id1{}
.class1{}
body{} p{} html选择器->html各元素
*{} 通配符选择器->可以运用到所有的html元素,但优先级最低
优先级:id选择器>class选择器>html选择器>通配符选择器
/*父子选择器:选择器里的span属性定义,可以有多级,*/
#id1 span{
color:red;
font-style:italic;
}
.s1 span span a{
color:green;
}多层 按顺序
③一个元素可以同时有一个id选择器和class选择器。
一个元素最多有一个id选择器,但可以有多个类选择器。
<元素 class="类选择器1 类选择器2">
当两个类选择器发生冲突,则以写在css文件中的后面的那个类选择器为准。
可以把css文件中的选择器共有的部分,独立出来写:
.s1,.s2,.s3{
color:green;
}
④行内元素只占显示自己内容的宽度,块元素不管自己内容有多少,会占据整行。
常见的行内元素有<a> <span> <input type="">
常见的块元素有 <div> <p>
行内元素和块元素的转换:display:inline->转为行 display:block->转为块
display:none->此元素不会被显示
⑤引用css @import url('**.css被引用的CSS')
⑥margin属性:
margin:10px 30px 40px 1px;(margin-top/right/bottom/left)
/*margin 可以 写一个值(上右下左(顺时针)) 如果是两个值(上下,左右)如果三个值(上,左右,下)*/
内边距 padding:10px 30px 40px 1px;(padding-top/right/bottom/left)
border:1px solid red; 边框:大小 线 颜色(border-top/right/bottom/left)
⑦float属性:left左浮动,right右浮动,清楚浮动clear:left
⑧定位position:
默认static
相对定位relative 以离开的那个位置为基础
绝对定位absolute 以包着(父)的那个位置的左上角为基础
固定定位fixed 以视窗左上角那个点为基础
left为正向右移动,top为正向下移动,两属性对static没效果,它是靠margin-left margin-top
⑨z-index:
用于设置对象(div)显示时候,层叠的属性,z-index:3 值越小越在下层显示
⑩设置边框border 边框会合并为一个单一的边框
table
{
border-collapse:collapse;
}
或者 cellspacing='0px'
浙公网安备 33010602011771号