CSSCSS3常用的样式

it2025-04-20 4

强制文本显示

　　让一段文字在固定宽度在一行显示，最后一个字符为省略标记(...)，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去掉右侧滚动条，去掉右下角拖拽

效果：

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

控制文本的大小写：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>

效果：

转载于:https://www.cnblogs.com/wxblogs/p/7808013.html

最新回复(0)