css小结

来源：互联网发布：ubuntu安装分区方案编辑：程序博客网时间：2024/05/03 09:57

使用外部样式表：
1.链接外部样式表
<head>
<link href="<%=basePath%>css/menu.css" rel="stylesheet" type="text/css"/>
</head>
2.导入外部样式表
<head>
<style type="text/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%;
}