一、CSS优先级控制
css
/* !important 提升优先级（最高） */
float: right !important;
二、CSS动画/过渡
css
/* 过渡动画（兼容webkit内核） */
transition: all .2s;
-webkit-transition: all .2s;
三、文本样式
1. 文字超出省略
css
/* 单行文字超出显示省略号（基础版） */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
/* 单行文字超出省略+居中 */
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
2. 文字基础样式
css
color: #999999; /* 文字颜色 */
font-family: 宋体, sans-serif; /* 文字字体 */
font-size: 9pt; /* 文字大小 */
font-style: italic; /* 文字斜体 */
font-weight: bold; /* 文字粗体 */
letter-spacing: 1pt; /* 字间距 */
line-height: 200%; /* 行高 */
text-align: left; /* 左对齐 */
text-align: center; /* 居中对齐 */
text-align: right; /* 右对齐 */
text-align: justify; /* 分散对齐 */
text-decoration: none; /* 去除下划线 */
text-decoration: underline; /* 下划线 */
text-decoration: line-through; /* 删除线 */
text-transform: uppercase; /* 英文大写 */
text-transform: lowercase; /* 英文小写 */
text-transform: capitalize; /* 首字母大写 */
vertical-align: middle; /* 垂直居中 */
vertical-align: top; /* 垂直向上 */
vertical-align: bottom; /* 垂直向下 */
四、布局定位
1. 元素对齐
css
/* 块级元素水平居中 */
margin: 0 auto;
/* 元素靠左 */
float: left;
/* 元素靠右 */
float: right;
2. 清除浮动（防止撑破容器）
css
.clearfix:after {
content: "";
display: table;
clear: both;
}
3. 层级与定位
css
/* 元素置顶显示 */
position: relative;
z-index: 9999;
/* 绝对定位置顶 */
position: absolute;
z-index: 9999;
/* 固定定位（右上角） */
#fixedLayer {
z-index: 999999;
position: fixed;
right: 0px;
top: 0px;
}
/* 绝对定位示例 */
#span1 {
position: absolute;
width: 100%;
bottom: 240px;
left: 14px;
text-align: center;
font-size: 20px;
color: #fff;
}
4. 元素隐藏
css
/* 完全隐藏（不占空间） */
.yc {
display: none;
}
/* 视觉隐藏（保留空间） */
visibility: hidden;
五、边框与边距
1. 边框样式
css
/* 基础边框 */
border: 1px solid #9e4848;
/* 左侧彩色边框 */
border-left: 6px solid #2196F3 !important;
/* 圆角边框 */
border-radius: 50px; /* 统一圆角 */
border-radius: 5px 4px 3px 2px; /* 左上、右上、右下、左下 */
/* 边框细分设置 */
border-top: 1px solid #6699cc; /* 上边框 */
border-bottom: 1px solid #6699cc; /* 下边框 */
border-left: 1px solid #6699cc; /* 左边框 */
border-right: 1px solid #6699cc; /* 右边框 */
/* 边框样式类型 */
border-style: solid; /* 实线 */
border-style: dotted; /* 虚线 */
border-style: double; /* 双线 */
border-style: groove; /* 立体内凸 */
border-style: ridge; /* 立体浮雕 */
border-style: inset; /* 凹框 */
border-style: outset; /* 凸框 */
2. 边距设置
css
/* 外边距 */
margin-top: 10px; /* 上外边距 */
margin-bottom: 10px; /* 下外边距 */
margin-right: 50px; /* 右外边距 */
margin-left: 50px; /* 左外边距 */
/* 内边距 */
padding: 29px; /* 统一内边距 */
padding-top: 10px; /* 上内边距 */
padding-right: 10px; /* 右内边距 */
padding-bottom: 10px; /* 下内边距 */
padding-left: 10px; /* 左内边距 */
六、背景样式
css
/* 背景颜色 */
background-color: yellow;
background-color: #00ff00;
background-color: transparent; /* 透明背景 */
background-color: rgb(250, 0, 255);
/* 背景图片 */
background-image: url(/i/eg_bg_04.gif);
background-size: 100% 100%; /* 图片拉伸适配 */
background-position: center; /* 背景居中 */
background-attachment: fixed; /* 固定背景（不随滚动） */
background-repeat: no-repeat; /* 不重复 */
background-repeat: repeat-x; /* 水平重复 */
background-repeat: repeat-y; /* 垂直重复 */
七、链接样式
css
a:link {color: #FF0000;} /* 未访问链接 */
a:visited {color: #00FF00;} /* 已访问链接 */
a:hover {color: #FF00FF;} /* 鼠标悬浮 */
a:active {color: #0000FF;} /* 点击中链接 */
八、特殊效果
1. 发光效果
css
box-shadow: 0 0 10px #f00;
2. 光标样式
css
cursor: pointer; /* 手指 */
cursor: crosshair; /* 十字 */
cursor: move; /* 移动 */
cursor: help; /* 问号 */
cursor: text; /* 文字I型 */
cursor: wait; /* 漏斗 */
九、列表样式
css
list-style-type: none; /* 无编号 */
list-style-type: decimal; /* 阿拉伯数字 */
list-style-type: lower-roman; /* 小写罗马数字 */
list-style-type: upper-alpha; /* 大写字母 */
list-style-type: disc; /* 实心圆 */
list-style-image: url(/dot.gif); /* 图片符号 */
list-style-position: outside; /* 凸排 */
list-style-position: inside; /* 缩进 */
十、响应式布局
css
/* 宽度小于800px时生效 */
@media screen and (max-width: 800px) {
/* 样式内容 */
}
/* 宽度大于800px时生效 */
@media only screen and (min-width: 800px) {
/* 样式内容 */
}
十一、HTML内嵌样式/脚本
1. 内嵌CSS
html
<style type="text/css">
/* CSS代码 */
</style>
2. 内嵌JS
html
<script>
// JS代码
</script>
3. 行内样式
html
<div style="color: red; font-size: 14px;"></div>
4. HTML原生对齐
html
<!-- div居中 -->
<div align="center">
This is some text!
</div>
<!-- 图片尺寸 -->
<img src="/i/mouse.jpg" height="200" width="200" />
5. 滚动文字
html
<div style="background-color:#fff;box-shadow: 0px 0px 5px #dedede;padding:5px;margin-top: 10px;margin-bottom:0px">
<a target="_blank" href="/">
<h3 style="color: #ff00ff;">
<marquee scrollamount="2" style="COLOR: #9d74fc; FONT-SIZE: 15pt; WIDTH: 100%">
<b>七牛图www.qiniutu.om</b>
</marquee>
</h3>
</a>
</div>
总结
- 核心布局：浮动（float）、居中（margin:0 auto）、清除浮动（clearfix）、定位（position）是页面布局的基础，优先级可通过!important提升；
- 文本处理：单行省略号需配合
text-overflow+white-space+overflow使用，链接样式需按link/visited/hover/active顺序定义； - 视觉增强：圆角（border-radius）、阴影（box-shadow）、过渡（transition）、响应式（@media）是提升页面交互和适配的关键样式。
梦雨
评论区 (2)