使用外部样式表:
1.链接外部样式表
<head>
<link href="<%=basePath%>css/menu.css" rel="stylesheet" type="text/css"/>
</head>
2.导入外部样式表
<head>
<style type="text/css">
<!--
@import url("外部样式表css文件的路径和名称");
-->
</style>
</head>
选择器
html,body,p{} 标签选择器
#idTest{} id选择器
.classTest{} 类选择器
复选框
<input id="isRem" type="checkbox"><label>记住用户名</label>
选中: $("#isRem").attr("checked","checked");
取消选中:$("#isRem").removeAttr("checked");
判断是否选中:document.getElementById("isRem").checked == true;
字体属性:
font-size 字体大小为24px
font-family 字样为24px
font-style 字体为斜体 normal默认,italic斜体的字体样式,oblique倾斜字体样式
font-weight 字体显示为粗体 bold粗体
color 设置文本颜色
line-height 设置行高
text-align 设置文本的对齐方式
text-decoration 向文本添加修饰:overline上划线,underline下划线,line-through删除线
列表属性
list-style-type disc:缺省值,黑圆点 circle:空心圆点 square:小黑方块 none:无列表项标志
list-style-image
list-style-position outside:项目标记在文本以外,环绕文本不根据标记对齐 inside:项目标记在文本以内,环绕文本根据标记对齐
list-style ul{list-style:circle inside url(images/aaa.gif);}
浮动属性
float 元素向哪个方向浮动 none,left,right
clear 设置元素的哪一侧不允许有浮动元素 left,right,both,none
背景属性
background-color 背景颜色
background-image 背景图片 url(images/nn.jpg)
background-repeat 背景的重复方式
background-position 背景图片的起始位置
background background: <color> <image> <position> <attachment> <repeat>
盒子模型
border 边框 border-color,border-width,border-style,border-left-color ... border:2px solid #0000ff;
padding 填充
margin 边界
content; 内容
定位属性
position 定位 static:默认值,没有定位,absolute:绝对定位,relative:相对定位,fixed:绝对定位
float 浮动
z-index 空间位置
使用css控制超链接
a:link{color:#0000ff} 未访问的超级链接
a:visited{color:#660000} 已访问的超级链接
a:hover{color:#ff00ff} 鼠标移到超链接上
a:active{color:#ff0000} 鼠标选中激活链接
使用css控制鼠标指针效果
a{cursor:pointer} pointer,help,move...
使用css控制元素的显示和隐藏
display:none;
display:block;
<span>标签
<span>与<div>的区别:1.<span>标签同行,<div>标签不同行2.<span>标签可以在<div>标签里,<div>标签不能在<span>标签里
html中几种常用样式:
body {
background-color: #B5CDE7;
font-family: "宋体";
color: #174D7D;
font-size: 12px;
font-weight: bold;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
table {
border: 1;
background-color: #F2F2F2;
border-collapse: collapse;
width: 100%;
height: 100%;
}
td {
BORDER-BOTTOM: #CDCDCD 1px solid;
BORDER-LEFT: #CDCDCD 1px solid;
BORDER-TOP: #CDCDCD 1px solid;
BORDER-RIGHT: #CDCDCD 1px solid
}
.loginCenter {
z-index: 1;
position: absolute;
left: 0px;
top: 20%;
width: 100%;
height: 60%;
}
.loginBackImg {
z-index: 2;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
}
.logintable {
background-color: #166DA3;
z-index: 3;
position: absolute;
left: 50%;
top: 15%;
width: 35%;
height: 65%;
}