强制文本显示

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

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

div{

  white-space:nowrap;

  text-overflow:ellipsis;

  overflow:hidden;

}

效果：

　　多行文本最后省略号：

div{

  display: -webkit-box;

  -webkit-line-clamp:;

  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>

效果：

CSS/CSS3常用的样式的更多相关文章

  1. CSS/CSS3常用的样式兼容，样式总结

    这篇文章这篇文章主要介绍了css中常用但是又难记的样式作为总结,方便大家学习和使用.包括了‘单行缩略号‘.’css圆角兼容'.‘元素阴影’,‘border取消宽度影响’,‘css3的背景渐变’,‘cs ...

  2. CSS/CSS3常用样式小结

    1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...

  3. [总结]CSS/CSS3常用样式与web移动端资源

    CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...

  4. css3常用动画样式文件move.css

    move.css zoomIn  zoomInDownouter-circlearrowTop expandOpen fadeIn  fadeInNormal  fadeInUp   fadeInRi ...

  5. css/css3常用收集/笔记

    _______________________________________________________________  css3 瀑布流 N 列 <ul><li>aa ...

  6. css清除常用默认样式表

    /*公共样式*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, ...

  7. [总结]WEB前端开发常用的CSS/CSS3知识点

    css3新单位vw.vh.vmin.vmax vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw; vmax: 相对于视窗的宽度或高度 ...

  8. #8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  9. css中 font常用的样式属性

    今天我总结一下文本常用的字体样式 1.font常用样式 1)字体类型 语法:font-family: +字体类型:    如: font-family:宋体; 2)字体大小 语法:font-size: ...

随机推荐

  1. iView 实战系列教程(21课时)_1.iView 实战教程之配置篇_图片优化

    首先需要安装vue cli 3.0版本 点击添加插件, 输入iview 选中后安装 全部导入还是按需导入. 2.是否需要自定义主题变量 3.多语言的设置. 这里我们全部选择为默认 然后点击继续. 启动 ...

  2. Oracle数据库文件导出为CSV格式的方法

    1 安装PLSQL Developer,并连接Oracle数据库. 2 执行sql语句,将要导出的表格显示出来. select * from table名; 3 如下点击导出查询结果,选择数据格式,即 ...

  3. js(javascript)取float型小数点后两位数的方法

    以下我们将为大家介绍 JavaScript 保留两位小数的实现方法:四舍五入以下处理结果会四舍五入: ? 1 2 var num =2.446242342; num = num.toFixed(2); ...

  4. 伪造IP及获取客户端真实IP地址

    Fiddler支持自定义规则,可以实现对HTTP请求数据发送给Server前或HTTP应答数据发送给浏览器前进行修改.下面的例子将演示如何向所有HTTP请求数据中增加一个头.1)打开Fiddler,点 ...

  5. 练习4-python+selenium+pandas

    最近对于python的第三方库pandas比较有兴趣,在学习的过程中也简单的结合selenium做了一个简单的小工具 最新公司用一个外部系统来记录,追踪BUG,可是这个系统并不是专业的BUG管理系统, ...

  6. 【ABAP系列】SAP 销售订单的行项目里条件的增强

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP 销售订单的行项目里条件的 ...

  7. TNS-01106: Listener using listener name LISTENER has already been started

    -- 启动监听,提示已经启动. [oracle@sh ~]$ lsnrctl startLSNRCTL for Linux: Version 12.1.0.2.0 - Production on 06 ...

  8. debian下使用shell脚本时出现了 declare:not found 解决方法

    问题:出现declare:not found的提示 解决:原来,UBUNTU用的是dash(后来证明这个其实这个不是错误的原因:从#!/bin/bash到#!/bin/dash,依旧无法运行,在这写出 ...

  9. [Git] 012 rm 命令的补充

    0. 前言 [Git] 007 三棵树以及向本地仓库加入第一个文件 的 "2.5" 有提及 git rm --cached <file> 1. 介绍 git rm &l ...

  10. CSS浏览器兼容性

    答题技巧:因为这个问题主要是看你经验,一般有了开发经验的都会遇到这样的坑,你只要说出几个来大致就可以了. 1.对齐文本和文本输入框 问题: 当input元素在设置了高时,在IE7.IE8.IE9下会出 ...