这篇文章介绍关于CSS知识点的集锦
CreateTime--2016年9月29日09:43:10
Author:Marydon
1.背景色线性渐变
background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/
UpdateTime--2016年10月25日11:37:53
UpdateTime--2016年11月23日09:53:46
2.设置表格的边框被合并为一个单一的边框
border-collapse: collapse;/*前提:table的border=1或border="1"或border="1px"*/
UpdateTime--2016年10月29日09:04:07
3.设置p最小高度及高度自动伸展
#pHeight{height:auto;min-height:5px;width:800px; background:#bbeeeb;margin:0 auto;}
<p id="pHeight"> 此p具有最小高度且高度可以随着内容的增高而自动伸展 <br/> 此p具有最小高度且高度可以随着内容的增高而自动伸展 </p>
设置最小宽度及宽度自动伸展
width:auto;min-width:5px;height:800px;
4.禁止换行的两种方式
方式一:
通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在
使用
方式二:
使用CSS样式
style="white-space:nowrap;"
UpdateTime--2016年11月25日08:57:49
设置td禁止换行
<td nowrap="nowrap"></td>
UpdateTime--2016年10月31日09:44:17
5.display样式
inline 行内元素(与其它元素共占一行,不换行,不能设置宽和高)
block 块级元素(单独占一行,可以设置宽和高)
inline-block 行内块级元素(与其它元素共占一行,但是可以设置宽和高)(兼有了行内元素和块级元素的特征)
none 将该元素隐藏
document.getElementById("aa").style.display="";//表示的是:清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)
UpdateTime--2016年11月24日11:44:31
6.ime-mode语法和text-transform语法
UpdateTime--2016年12月15日19:52:16
/*屏蔽输入法,可以用来禁止录入中文*/ ime-mode:disabled; //IE兼容,chrome不兼容 <input type="text" name="mobile" style="ime-mode:disabled;" /> /*将输入的英文字母转全部换成大写字母*/ text-transform:uppercase; <input type="text" name="mobile" style="text-transform:uppercase;" /> UpdateTime--2017年1月9日10:23:23 /*将输入的英文字母转全部换成小写字母*/ text-transform:lowercase; <input type="text" style="text-transform:lowercase;"/>
详细介绍
ime-mode语法:(该语法在google浏览器上无效,需要用js进行控制,见"input文本框输入内容控制"文件)
ime-mode : auto | active | inactive | disabled
取值:
auto : 默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
disabled : 完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME
text-transform语法:
text-transform : none | capitalize | uppercase | lowercase
取值:
none : 默认值。无转换发生
capitalize : 将每个单词的第一个字母转换成大写,其余无转换发生
uppercase : 转换成大写
lowercase : 转换成小写
7.设置p里的内容自动换行
当p框固定高度宽度后,显示的内容超过p的宽度,超出内容不换行的问题
设置css样式
word-wrap:break-word;
8.实现p,li里的内容超出容器宽度时,超出部分以".."形式显示
前提:必须先确定p,li的宽度
添加属性
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
9.文本框和密码框在IE浏览器显示样式控制
/*去除IE浏览器文本框右侧出现叉号*/ #aa::-ms-clear { display:none; } /*去除IE浏览器密码框右侧出现眼睛*/ #bb::-ms-reveal { display:none; }
<input id="aa" type="text"/><input id="bb" type="password"/>
以上是关于CSS知识点的集锦的详细内容。更多信息请关注PHP中文网其他相关文章!

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版
推荐:为Win版本,支持代码提示!

EditPlus 中文破解版
体积小,语法高亮,不支持代码提示功能

SublimeText3 Linux新版
SublimeText3 Linux最新版