CSS3选择器、背景、边框、文本

选择器:

[attribute^=value] 属性值以value开头的元素

[attribute&=value] 属性值以value结束的元素

[attribute*=value] 属性值包含value的元素

:first-of-type 父元素第一个兄弟元素

:last-of-type 父元素最后一个兄弟元素

:only-child 父元素只有唯一一个子元素

:only-of-type 父元素只有唯一一个兄弟元素

:nth-child(n) 父元素第n个子元素

:nth-last-child(n) 父元素倒数第n个子元素

:nth-of-type(n) 父元素第n个兄弟元素

:empty 没有子元素的元素

:checked 被选中的元素

边框:

border-radius:圆角边框

border-radius:length;

/*以length为半径的圆角*/

box-shadow:边框阴影

box-shadow:h-shadow v-shadow blur spread color inser/outset;

/*h-shadow:水平位置,v-shadow:垂直位置,blur:模糊距离,spread:阴影尺寸,color:阴影颜色,inser:内部阴影/outset:外边阴影*/

border-image:边框图片

border-image-source:图片路径

border-image-slice:边框向内偏移

border-image-width:图片边框宽度

border-image-outset:边框图像超出边框的量

border-image-repeat:边框是否平铺(repeated)、铺满(rounded)、拉伸(stretched)

背景:

background-clip:背景绘制区域 border-box、padding-box、content-box

backdround-origin:背景定位 border-box、padding-box、content-box

background-size:length | percentage | cover | contain

/*length:图片宽高:第一个值宽度,第二个值高度*/

/*percentage:以父元素百分比宽高:一宽,二高*/

/* cover:完全覆盖背景区域*/

/*contain:完全覆盖内容区域*/

文本:

text-shadow:文本阴影

text-shadow:h-shadow v-shadow blur color

/*h-shadow:水平位置,v-shadow:垂直位置,blur:模糊距离,color:阴影颜色*/

word-wrap:换行

word-warp:normal(断字点换行)|break-wrap(长单词或URL换行)

时间: 2024-09-30 10:11:40

CSS3选择器、背景、边框、文本的相关文章

css背景-边框-文本

一.CSS3背景 属性列表 background background-color background-image background-repeat background-attatchment background-position background-origin background-clip background-size 1.CSS3背景原点属性 background-origin 设置或检索对象的背景图像计算background-position时的参考原点位置 IE8 Fir

2016.3.16__CSS3_选择器_边框_背景_蒙版mask__第九天

CSS3 假设您认为这篇文章还不错.能够去H5专题介绍中查看很多其它相关文章. 今日课程预览 1. CSS3 的选择器 1.1 子选择器 比如:设置div下一级的p标签的颜色属性 div>p { background-color:yellow; } 1.2 相邻兄弟选择器 解释:可选择紧接在还有一元素后的元素,且二者有同样父元素. 假设想属性设置成功:则必须满足几个条件: 1.要有一个h1标签: 2.要有一个p标签. 3.是同级兄弟关系: 4.必须相邻的兄弟关系. h1 + p { margin

CSS3知识点整理(二)----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu

CSS3 选择器 基本选择器介绍

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点.我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——基本选择器.我们先来看一个常用的选择器列表图

css3 选择器(二)

接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd[奇数].even[偶数]),但是参数n的值起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. Note:当“:nth-child(n)”选择器中的n为一个表达式时,其中

最全CSS3选择器

一,CSS3 选择器分类 二,选择器语法 1,基本选择器语法 选择器 类型 功能描述 *  通配选择器  选择文档中所以HTML元素 E  元素选择器 选择指定类型的HTML元素 #id  ID选择器 选择指定ID属性值为“id”的任意类型元素 .class  类选择器 选择指定class属性值为“class”的任意类型的任意多个元素 selector1,selectorN  群组选择器 将每一个选择器匹配的元素集合并 2,层次选择器语法 选择器 类型 功能描述 E  F 后代选择器(包含选择器

CSS3之背景 background-size background-origin background-clip

[一]background-size  规定背景图像的尺寸 以像素规定尺寸 div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; } 以百分比规定尺寸(尺寸相对于父元素的宽度和高度) div { background:url(bg_flower.gif); -m

css3 选择器(三)

接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素提供的.在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态.可通过选择器:enabled为这些表单元素设置样式. 举例:可用输入框设置样式. <meta charset="utf-8"> <s