-
任务六。。。。查看全部
-
column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length>查看全部
-
多列布局模块（CSS Multi Column Layout Module）：主要应用在文本的多列布局方面。 语法： columns：<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数查看全部
-
【CSS3 属性】box-shadow是向盒子添加阴影。支持添加一个或者多个。box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; box-shadow:4px 4px 16px #666,-4px -4px 16px red inset; 负值是改变阴影的反方向，不负值是正常方向。 inset 是内阴影，去掉它，就是外阴影。查看全部
-
圆角边框： border-radius 实心上半圆： 方法：把宽度（width）设为高度(height)的一半，并且只设置左上角和右上角的半径与元素的高度一致（大于也是可以的）。 实心圆： 方法：把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。如下代码： border-radius:10px; /* 所有角都使用半径为10px的圆角 */ border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角，顺时针 */查看全部
-
css3可以实现圆角，图片边框，文字阴影和盒阴影，过渡、动画等 选择器：减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。 圆角/块阴影与文字阴影 色彩：CSS3支持HSL ， CMYK ，HSLA and RGBA 渐变效果： 个性化字体： 多背景图：一个元素上添加多层背景图片 边框背景图： 变形处理：对HTML元素进行旋转、缩放、倾斜、移动、甚至以前只能用JavaScript实现的强大动画 多栏布局：可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。 媒体查询：针对不同屏幕分辨率，应用不同的样式查看全部
-
在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera查看全部
-
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。查看全部
-
first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示： 通过“:first-of-type”选择器，定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。 HTML代码： <div class="wrapper"> <div>我是一个块元素，我是.wrapper的第一个子元素</div> <p>我是一个段落元素，我是不是.wrapper的第一个子元素，但是他的第一个段落元素</p> <p>我是一个段落元素</p> <div>我是一个块元素</div> </div> CSS代码： .wrapper { width: 500px; margin: 20px auto; padding: 10px; border: 1px solid #ccc; color: #fff; } .wrapper > div { background: green; } .wrapper > p { background: blue; } /*我要改变第一个段落的背景为橙色*/ .wrapper > p:first-of-type { background: orange; }查看全部
-
结构性伪类选择器—nth-child(n) “:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。 经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。查看全部
-
CSS生成内容 在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 content配合CSS的伪类或者伪元素，一般可以做以下四件事情： 功能 功能说明 none 不生成任何内容 attr 插入标签属性值 url 使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string 插入字符串查看全部
-
css3伪类选择器":target"。 在使用了":target"后，感觉这个选择器还是很有用的。接下来就来分析一下这个选择器。 语法： :target{ #val:target{ ... 或 ... } } 例1： html代码： <div class="menuSection" id="brand"> <h2><a href="#brand">Brand</a></h2> <p>content for Brand</p> </div> css代码 <style> :target p{ background-color: #fa0; color: #fff; } </style> 分析：:target是用来匹配id为“brand”的元素（id="brand"的元素）,上面代码中是那个div元素。当点击<a>链接时，就会执行目标选择器里的样式。这个例子只是单个url的情况，当我们有多个url要处理时要使用多个:target。 例子2： html代码 <h2><a href="#brand">Brand</a></h2> <div class="menuSection" id="brand"> content for Brand </div> <h2><a href="#jake">Brand</a></h2> <div class="menuSection" id="jake"> content for jake </div> <h2><a href="#aron">Brand</a></h2> <div class="menuSection" id="aron"> content for aron </div> css代码 #brand:target { background: orange; color: #fff; } #jake:target { background: blue; color: #fff; } #aron:target { background: red; color: #fff; }查看全部
-
css3伪类选择器":not": 语法：tag:not([id="val"]){ ... } 例子： div:not([id="footer"]){ background-color: #0ff; }查看全部
-
:root==html 用法： :root{ ... } 等价于 html{ ... }查看全部
-
css3 属性选择器用法： /*attr^="value" 表示以value开头的任何字符串*/ a[class^=column]{ background-color: #f00; } /*attr$="val" 表示以val结尾的任何字符串*/ a[href$=doc]{ background-color: #0f0; } /*attr*="val" 表示包含val的任何字符串*/ a[title*=box]{ background-color: #00f; }查看全部
举报
0/150
提交
取消