CSS3主要的几个样式笔记
1、边框:
border-color:
设置对象边框的颜色。
使用CSS3的border-radius属性,如果你设置了border的宽度是X px,那么你就可以在这个border上使用X种颜色,每种颜色显示1px的宽度。如果说你的border的宽度是10个像素,但是只声明了5或6种颜色,那么最后一个颜色将被添加到剩下的宽度。
border-radius :设置边框圆角
第一个值是水平半径。
如果第二个值省略,则它等于第一个值,这时这个角就是一个四分之一圆角。
如果任意一个值为0,则这个角是矩形,不会是圆的。
值不允许是负值。
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:设置阴影
要设置四个值: 阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
-moz-box-shadow:2px 2px 2px #ccc;
-webkit-box-shadow:2px 2px 2px #ccc;
box-shadow:2px 2px 2px #ccc;
2、颜色
HSL color:hsl色彩模式
要设置三个值:
<length> : Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
<percentage> : Saturation(饱和度)。 取值为0%到100%之间的值;
<percentage> : Lightness(亮度)。 取值为0%到100%之间的值;
例如:background-color: hsl(240,100%,50%);
HSLA color
要设置四个值:
<length> : Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
<percentage> : Saturation(饱和度)。 取值为0%到100%之间的值;
<percentage> : Lightness(亮度)。 取值为0%到100%之间的值;
<opacity> : alpha(透明度)。 取值在0到1之间;
例如:background-color:hsla(240, 90%, 70%, 0.2);
opacity
由浮点数字和单位标识符组成的长度值。不可为负值。
声明用来设置一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的。
1到0之间的任何值都表示该元素的透明程度。
例如:cpacity:0.2 可用于设置背景,图片,字体等
RGBA color
要设置四个值:
<length> : Hue(色调)。 0(或360)表示红色,120表示绿色,240表示蓝色,当然可取其他数值来确定其它颜色;
<percentage> : Saturation(饱和度)。 取值为0%到100%之间的值;
<percentage> : Lightness(亮度)。 取值为0%到100%之间的值;
<opacity> : alpha(透明度)。 取值在0到1之间;
例如:background-color:rgba(200,200,200,0.3);
3、文本
text-shadow
设置或检索对象中文本的文字是否有阴影及模糊效果。可以设定多组效果,方式是用逗号隔开。
要设置三个值:
<color> : 指定颜色。
<length> : 由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。
<opacity> : 由浮点数字和单位标识符组成的长度值。不可为负值。 指定模糊效果的作用距离。如果你仅仅需要模糊效果,将前两个 length 全部设定为 0 。请参阅 长度单位。
例如:text-shadow:#ccc 2px 2px, #dae 1px 1px;
text-overflow
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
clip: 不显示省略标记(...),而是简单的裁切。
ellipsis: 当对象内文本溢出时显示省略标记(...)
注意:要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。
4、用户界面
resize
使元素的区域可缩放,调节元素尺寸大小。适用于任意获得"overflow"条件的容器。
none: UserAgent没提供尺寸调整机制,用户不能操纵机制调节元素的尺寸。
both: UserAgent提供双向尺寸调整机制,让用户可以调节元素的宽度和高度。
horizontal: UserAgent提供单向水平尺寸调整机制,让用户可以调节元素的宽度。
vertical: UserAgent提供单向垂直尺寸调整机制,让用户可以调节元素的高度。
inherit: 默认继承。
用的比较多的就是textarea,让它
outline
outline (轮廓)是给元素周围绘制轮廓外边框,通过设置一个数值使边框边缘的外围偏移,可起到突出元素的作用。
outline 属性可设置元素周围的轮廓线。
轮廓线不会占据空间,也不一定是矩形。
outline 属性是一个简写属性,用于设置元素周围的轮廓线。
要设置四个参数:
<outline-color>: 指定轮廓边框颜色。
<outline-style>: 指定轮廓边框轮廓。
<outline-width>: 指定轮廓边框宽度。
<outline-offset>: 指定轮廓边框偏移位置的数值。
inherit: 默认。
outline-width
outline-width 属性设置元素整个轮廓的宽度,只有当轮廓样式不是 none 时,这个宽度才会起作用。
thin: 定义细轮廓。
medium: 默认。定义中等的轮廓。
thick: 定义粗的轮廓。
<length> : 定义轮廓粗细的值。
outline-style
设置一个元素的整个轮廓的样式
默认值,定义无轮廓。
dotted: 定义一个点状的轮廓。
dashed: 定义一个虚线轮廓。
solid: 定义一个实线轮廓。
double: 定义一个双线轮廓。双线的宽度等同于outline-width的值。
groove: 定义一个3D凹槽轮廓。此效果取决于outline-color的值
ridge: 定义一个3D凸槽轮廓。此效果取决于outline-color的值
inset: 定义一个3D凹槽轮廓。此效果取决于outline-color的值
outset: 定义一个3D凸槽轮廓。此效果取决于outline-color的值
outline-offset
可以让轮廓偏离容器边缘,即可以调整外框与容器边缘的距离。
<length>: 定义轮廓距离容器的值。
inherit: 默认继承。
outline-color
设置一个元素整个轮廓中可见部分的颜色。
5、基础合模型
overflow
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象尺寸的内容
scroll: 总是显示滚动条
overflow-x
检索或设置当对象的内容超过其指定宽度时如何管理内容。
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象尺寸的内容
scroll: 横向显示滚动条
overflow-y
检索或设置当对象的内容超过其指定高度时如何管理内容。
visible: 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto: 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden: 不显示超过对象尺寸的内容
scroll: 纵向显示滚动条
6、其他模块
columns
可以同时定义多栏的数目和每栏宽度
-webkit-columns:宽度 || 栏目数
7、选择器
子串匹配的属性选择符
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素
结构性伪类
E:root 匹配文档的根元素。在HTML中,根元素永远是HTML
E:nth-child(n) 匹配父元素中的第n个子元素E
E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:last-child 匹配父元素中最后一个E元素
E:first-of-type 匹配同级兄弟元素中的第一个E元素
E:only-child 匹配属于父元素中唯一子元素的E
E:only-of-type 匹配属于同类型中唯一兄弟元素的E
E:empty 匹配没有任何子元素(包括text节点)的元素E
UI元素状态伪类
E:checked 匹配所有用户界面(form表单)中处于选中状态的元素E
E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素
E::selection 匹配E元素中被用户选中或处于高亮状态的部分
否定伪类
E:not(s) 匹配所有不匹配简单选择符s的元素E
目标伪类
E:target 匹配相关URL指向的E元素
通用兄弟元素选择器
E ~ F 匹配E元素之后的F元素
CSS3主要的几个样式笔记的更多相关文章
- 笔记:css3伪选择器改变滚动条样式
现在我打开支持前缀-webkit-的浏览器,也就是说只要支持前缀为-webkit-的浏览器才有效果 <!doctype html> <html lang="en" ...
- 纯CSS3实现漂亮的价格表样式代码
分享一款纯CSS3实现漂亮的价格表样式代码是一款常见的主机商发布产品价格信息页.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="main" ...
- css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
- CSS3 更改字体被选中样式
CSS3 更改字体被选中样式
- 常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本.组合.属性.伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且 ...
- 制作透明色:《CSS3 RGBA》与Opacity样式用法
前面我们一起探讨了一下CSS3 Gradient(css3 渐变),今天我们一起来探讨一下CSS3中的RGBA.RGB对于大家来说一点不陌生,他就是红色R+绿色G+蓝色B,那现在我们所说的RGBA又是 ...
- CSS3学习系列之盒样式(一)
盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...
- CSS3学习系列之盒样式(二)
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之布局样式(二)
使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- Fixed: The Windows Process Activation Service service terminated with the following error: The system cannot find the file specified
I'm not yet clear what I did, but I'm blogging it so it can be found if someone else has this issue. ...
- MSSQL,MySQL 语法区别
1 mysql支持enum,和set类型,sql server不支持 2 mysql不支持nchar,nvarchar,ntext类型 3 mysql的递增语句是AUTO_INCREMENT,而mss ...
- 1-shell学习(bash)
1.为什么需要学习shell: (1)通用性,基本上所有的linux机器都会支持 (2)文字传输操作更快 (3)以后的系统管理需要使用 2.知识点: (1)变量相关:
- [USACO11FEB] Cow Line
https://www.luogu.org/problem/show?pid=3014 题目描述 The N (1 <= N <= 20) cows conveniently number ...
- Linux之防火墙与端口
1.关闭所有的 INPUT FORWARD OUTPUT 只对某些端口开放.下面是命令实现: iptables -P INPUT DROPiptables -P FORWARD DROPiptable ...
- ReaderWriterLockSlim 类
今天在看Nop源码时,PluginManager中用到了ReaderWriterLockSlim类,于是简单做个笔记. ReaderWriterLockSlim 表示用于管理资源访问的锁定状态,可实现 ...
- Item 6 消除过期的对象引用
过期对象引用没有清理掉,会导致内存泄漏.对于没有用到的对象引用,可以置空,这是一种做法.而最好的做法是,把保存对象引用的变量清理掉,多用局部变量. 什么是内存泄漏? 在Java中,对象的内存空间回 ...
- Transformation(线段树+HDU4578+多种操作+鬼畜的代码)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4578 题目: 题意:n个数初始值为0,进行四种操作:1.将区间内的数字加c:2.将区间内的数字乘c:3 ...
- HDU 1205 吃糖果 (数学)
题目链接 Problem Description HOHO,终于从Speakless手上赢走了所有的糖果,是Gardon吃糖果时有个特殊的癖好,就是不喜欢将一样的糖果放在一起吃,喜欢先吃一种,下一次吃 ...
- javascript延迟对象
1.模拟任务队列: function taskQueue() { var taskList = []; var isRun = false; this.addTask = function (task ...