CSS: 样式表。Cascading Style Sheet.
1.分类
1按照使用的方式分类:
1:内联样式
2:嵌入声明
在HTML页面上,在head中,声明style元素
3:导入式
导入一个外部的css文件。Css样式表,默认情况下,以.css结束。
4:连接式 – 一个css文件,导入了另一个css文件
2.按声明的方式分类
一个样式表,如果作用在一个元素上,就是声明的方式
1、直接样式表
是以元素名为样式的名称的定义方式。
Div{
//对所有div元素都使用这个样式表
}
2、类样式表
用.(点)声明的样式表,就叫类样式表。类样式表必须要通过元素的class属性来引用。
.someClass{...}
3.id(唯一)样式表
样式表的嵌套
元素1 空格 元素2{
只对元素1中的元素2设置有效。
}
<style type="text/css">
/*定义直接样式表,会对所有input元素有效
对div中的所有input,不管input元素是div的孩子还是孙子。
*/
div input{
border:0px;
border-bottom:1px solid blue;
}
</style>
</head>
<body>
<div>
<p>
姓名:<input type="text"name="name"><br/>
密码:<input type="password"name="pwd"><br/>
</p>
Age:<input type="text">
</div>
地址:<input type="text">
</body>
</html>
2.盒子模型
3.CSS择器
样式表,对哪一个元素有效,是通过选择器的方式实现的。
如:
Div{}//选择对所有的div有效
.div{}//对所有的使用了class=”div”的有效
#dd{}//对id为div的元素有效,如<div id=”dd”></div>和<inputid=”dd”/>
Divp{} //对所在的div中的p有效。
*{} 对所有元素有效
E { sRules } E (Elemment) 元素。对某个元素有效。
E[attr] 对所有拥有某个属性的元素有效。但 IE6不支持。IE8,9以后就支持。
E[attr=’aa’] 选择所在某个属性为aa的元素。
E[attr*=”a”] 只要某个属性中包含a就选择这个元素
E[attr^=’a’] 以a开始的元素
E[attr $= ’b’]以b结束的。
E[attr1][attr2]{} 拥有两个属性的元素
E1 > E2{} 只对E1中的子元素E2有效。
E.className{}//对E元素,如果它自己的样式是ClassName则有效。
E .clssName{}//对E元素中的子元素且它的样式是className有效。
E1, E2 , E3 { sRules } 对所有这些元素有效4.伪类
5.Css具体参数和值
E{
background:red;
color:blue;
border:1px solid red;
text-align:center;
}
属性和值,对于不同的元素,CSS属性不一样的。但大多数元素,支持的属性都一样。
如所有元素都可以使用background定义背景色。
DIV.
找到DHTML.chm文档。找到div元素。
1.background背景色
<body>
<button id="a" style="background:blue;" onclick="_chg(this);"></button>
</body>
2.background:url(‘图名称’)引用一张图片
</head>
<body style="background: url('b.jpg');">
3.display:设置是否可见
display:none不显示
display:””显示 用这个多
display:block显示
4.设置一个元素的位置
Position:定位的方式.
Absolute 绝对定位。通过x轴和y轴位置。
Top:定义一个元素的y轴
Left:定义一个元素的x轴.
定义一个div可以任意出现的位置:
5.设置层的级次
z-index:越大,越在上面。