CSS3基本样式带习题答案.pdf-资料库

weixin_45820444-12731902-4744300845382184022.pdf-第1页.png

第1页 / 共17页

weixin_45820444-12731902-4744300845382184022.pdf-第2页.png

第2页 / 共17页

weixin_45820444-12731902-4744300845382184022.pdf-第3页.png

第3页 / 共17页

weixin_45820444-12731902-4744300845382184022.pdf-第4页.png

第4页 / 共17页

weixin_45820444-12731902-4744300845382184022.pdf-第5页.png

第5页 / 共17页

weixin_45820444-12731902-4744300845382184022.pdf-第6页.png

第6页 / 共17页

weixin_45820444-12731902-4744300845382184022.pdf-第7页.png

第7页 / 共17页

weixin_45820444-12731902-4744300845382184022.pdf-第8页.png

第8页 / 共17页

CSS3-选择器基本选择器基本选择器一、通配符选择器（＊） * 通配符——通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素 *{margin：0； padding：0；} .demo *{border:1px solid #000;} 二、元素选择器(E) 元素选择器其实就是文档的元素，如html,body,p,div等等 li{border:1px solid #000;} 三、类选择器（.className） 1、使用类选择器之前需要在html元素上定义类名 2、类选择器还可以结合元素选择器来使用，如： 3、多类选择器(多类选择器不被IE6支持)，如：

.important {font-weight: bold; color: yellow;} p.items {color: red;} .important.items {background:#ccc;} 四、id选择器（#ID）和上面说的类选择器很相似，不同的是ID选择器是一个页面中唯一的值

#important {font-weight: bold; color: yellow;} 五、后代选择器（E F）前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，中间用空格隔开 .demo li {color: blue;} 1/17

六、子元素选择器(E>F) 子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以 IE6不支持子元素选择器 ul > li {background: green;color: yellow;} 七、相邻兄弟元素选择器(E + F) EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻 IE6不支持 1、li + li {background: green;color: yellow; border: 1px solid #ccc;} 2、.active + li {background: green;color: yellow; border: 1px solid #ccc;} 八、通用兄弟选择器（Ｅ〜Ｆ） E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择所有Ｅ元素后面的Ｆ元素。 IE6不支持 .active ~ li {background: green;color: yellow; border: 1px solid #ccc;} 九、群组选择器（selector1,selector2,...,selectorN）将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开 .first, .last {background: green;color: yellow; border: 1px solid #ccc;} 属性选择器属性选择器一、E[attr]：只使用属性名，但没有确定任何属性值；你也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中 IE6不支持这个选择器。 .demo a[id] {background: blue; color:yellow;font-weight:bold;} .demo a[href][title] {background: yellow; color:green;} 2/17

二、Ｅ[attr="value"] E[attr="value"]是指定了属性值“value” 也可以多个属性并写，进一步缩小选择范围对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时 7 .demo a[id="first"] {background: blue; color:yellow;font-weight:bold;} .demo a[href="index.html"][title] {background: yellow; color:green;} 三、E[attr~="value"] 只要属性值中有一个value相匹配就可以选中该元素总结：属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是 value时才匹配。 IE6浏览器不支持 .demo a[title~="website"]{background:orange;color:green;} 四、E[attr^="value"] 选择attr属性值以“value”开头的所有元素 IE6浏览器不支持 .demo a[href^="http://"]{background:orange;color:green;} .demo a [href^="mailto:"]{background:green;color:orange;} 五、E[attr$="value"] 选择元素attr属性，并且他的属性值是以value结尾的常用在网站给 pdf,png,doc等不同文件加上不同icon IE6浏览器不支持 .demo a[href$="png"]{background:orange;color:green;} 六、E[attr*="value"] 所选择的属性，其属性值中有这个"value"值都将被选中 IE6浏览器不支持 .demo a[title*="site"]{background:black;color:white;} 七、E[attr^="value"] 选择器会选择attr属性值等于value或以value-开头的所有元素 IE6浏览器不支持七种属性选择器中E[attr="value"]和E[attr*="value"]是最实用的，其中E 3/17

[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"] 等，而E [attr*="value"]能在网站中帮助我们匹配不同类型的文件，比如说你的网站上不同的文件类型的链接需要使用不同的icon图标，用来帮助你的网站提高用户体验，就像前面的实例，可以通过这个属性给".doc",".pdf",".png",".ppt"配置不同的icon图标。伪类选择器伪类选择器一、动态伪类 a:link a:visited a:hover a:active 遵循爱（LoVe）恨（HAte） :hover用于当用户把鼠标移动到元素上面时的效果； :active用于用户点击元素那一下的效果（正发生在点的那一下，松开鼠标左键此动作也就完成了） :focus用于元素成为焦点，这个经常用在表单元素上。 .subm:focus{ border:1px solid transparent; box-shadow: 1px 1px 3px #f33; } CSS 伪类用于向某些选择器添加特殊的效果。二、UI元素状态伪类 :enabled :disabled :checked 主要是针对于HTML中的Form元素操作 input[type="text"]:disabled { border:1px solid #999; background-color: #fefefe; } input[type]:checked{ width：15px; height:15px; 4/17

} IE6-8不支持":checked",":enabled",":disabled"这三种选择器。三、CSS3的:nth选择器 1、:first-child 2、:last-child 3、:nth-child(n) 数字、even偶数、odd奇数 4、:nth-last-child(n) 5、:only-child :nth-child(n)，其中n是一个简单的表达式，那么"n"取值从“1”开始计算, 不能取负值 IE6-8和FF3-浏览器不支持":nth-child"选择器。 6、:nth-of-type() :nth-child() 7、:nth-last-of-type() :nth-last-child() 8、:first-of-type和:last-of-type :first-child :last-child 9、:only-of-type :only-child 10、:empty p:empty {display: none;} IE6-8浏览器不支持:only-child选择器； IE6-8和FF3.0-浏览器不支持:only-of-type选择器。 IE6-8浏览器不支持:empty选择器四、否定选择器 :not() input:not([type="submit"]) {border: 1px solid red;} IE6-8浏览器不支持:not()选择器五、伪元素 CSS 伪元素用于将特殊的效果添加到某些选择器。 ::first-letter ::first-line ::before ::after ::selection 改变网页被选中文本的样式 CSS 伪类用于向某些选择器添加特殊的效果。 CSS 伪元素用于将特殊的效果添加到某些选择器。伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因 5/17

CSS3-更新样式属性文字与字体相关样式颜色 (Color) 透明度： opacity: 0.1; opacity: 0.5; opacity: 0.9; RGBA： color: rgba(255, 0, 0, 0.6); 注意: RGBA是在RGB的基础上多了控制alpha透明度的参数。文本阴影：语法: text-shadow: h-shadow v-shadow blur color; h-shadow：必需。水平阴影的位置。允许负值 v-shadow：必需。垂直阴影的位置。允许负值 blur：可选。模糊的距离。 color：可选。阴影的颜色 text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 6/17

-20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; CSS3 @font-face 规则在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您找到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。您“自己的” 的字体是在 CSS3 @font-face 规则中定义的 firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。 Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：背景和边框相关样式 CSS3 多重背景图片 CSS3 允许您为元素使用多个背景图像。为 body 元素设置两幅背景图片： body{ background-image:url(bg_flower.gif), url(bg_flower_2.gif); } 渐变 (Gradients)——线性渐变 background: linear-gradient(angle,颜色 0%,颜色 50% ,颜色 100%) background: linear-gradient(50deg,white,black,yellow); 通过角度来确定渐变的方向。 7/17

后边的参数，表示渐变的颜色和位置。可以插入更多的颜色值。可以用rgba产生渐隐效果。 angle: left,right,top,buttom,30deg to left to top left repeating-linear-gradient 重复渐变 background:repeating-linear-gradient(to top left,blue 10%,#ccc 20%) 渐变 (Gradients)——径向渐变 background: radial-gradient(shape size at position, start-color, ..., last- color); background: radial-gradient(颜色 0%,颜色 50% 颜色 100%) background:radial-gradient(circle at top,#fff,#000) background:radial-gradient(circle at 50px 50px,#fff,#000) background:radial-gradient(circle at 50% 50%,#fff,#000) background:radial-gradient(20% 80% at 50px 50px,#fff,#000) ：主要用来定义径向渐变的圆心位置。 length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。 percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。 left：设置左边为径向渐变圆心的横坐标值。 center：设置中间为径向渐变圆心的横坐标值或纵坐标。 right：设置右边为径向渐变圆心的横坐标值。 top：设置顶部为径向渐变圆心的纵标值。 bottom：设置底部为径向渐变圆心的纵标值。：主要用来定义径向渐变的形状。 circle：如果和大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变 ellipse：如果和大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。：主要用来确定径向渐变的结束形状大小。 closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边； 8/17

资料库

CSS3基本样式带习题答案.pdf

相关推荐

行业

热门标签

最新资料