CSS/CSS3常用的样式

最新推荐文章于 2025-05-11 08:23:40 发布

转载最新推荐文章于 2025-05-11 08:23:40 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wxblogs/p/7808013.html

本文介绍了CSS中处理文本显示、阴影效果、表格布局等实用技巧，包括如何让文本在固定宽度内显示并以省略号结尾、设置表格的各种属性如边框、背景颜色等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

强制文本显示

　　让一段文字在固定宽度在一行显示，最后一个字符为省略标记(...)，css样式如下

　　单行显示语法：white-space:nowrap;

div{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

效果：

　　多行文本最后省略号：

div{
  display: -webkit-box; 
  -webkit-line-clamp:2;
  overflow: hidden; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

效果：

表格语法

<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

设置表格中的td宽度固定table-layout:fixed

合并表格边框border-collapse:collapse

基础的文本阴影效果：text-shadow

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

效果：

基础的DIV盒子阴影效果：box-shadow

css代码：

.demo1 {
  -webkit-box-shadow: 3px 3px 3px;
  -moz-box-shadow: 3px 3px 3px;
  box-shadow: 3px 3px 3px;
}

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-box-shadow © w3cplus.com

html代码：

div class="demo1" style="width: 100px;height: 100px; border: 1px solid gray"></div>

效果：

letter-spacing字符间距

<html>

<head>
<style type="text/css">
h1 {letter-spacing: -0.1em}
h4 {letter-spacing: 20px}
</style>
</head>

<body>
<h1>This is header 1</h1>
<h4>This is header 4</h4>
</body>

</html>

效果：

textarea去掉右侧滚动条，去掉右下角拖拽

<html>
<head>
</head>
<body>
<TEXTAREA > </TEXTAREA>
<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>
</body>
</html>

效果：

去掉效果后文本域不可拉伸

控制文本的大小写：text-transform

<html>
<head>
<style type="text/css">
  h1 {text-transform: uppercase}
  p.uppercase {text-transform: uppercase}
  p.lowercase {text-transform: lowercase}
  p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<h1>This Is An H1 Element</h1>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
</body>
</html>

效果：

鼠标悬停变成小手：cursor:pointer 随便加在样式中

<html>
<head>
<style type="text/css">
 h1{
     cursor:pointer
 }
</style>
</head>
<body>
<h1>鼠标悬停变小手</h1>

</body>
</html>

效果：自己试试。不好截图

li标签去掉前面的小圆点

<html>

<head>
<style type="text/css">
.list li{
    list-style-type:none
        }
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
</ul>
<hr>

<ul class="list">
    <li>1</li>
    <li>2</li>
</ul>
</body>
</html>

效果：

a标签去掉下划线

<html>
<head>
<style type="text/css">
.demo{
    text-decoration:none;
}
</style>
</head>
<body>
<a href="www.baidu.com">百度一下</a>
<hr>
<a href="www.baidu.com" class="demo">百度一下</a>
</body>
</html>