CSS 隔行隔列换色及常用属性

2016-08-18 15:39:16 Albin Wong 1912

### 1. 隔行隔列换色  
1. 隔行换色  
    1. 奇数
    `table tr:nth-child(odd){background-color:yellow;}`
    `table tr:nth-child(2n-1){background-color:pink;} `
    2. 偶数  
    `table tr:nth-child(even){background-color:blue;}`
    `table tr:nth-child(2n){background-color:pink;} `
2. 隔列换色: `table td:nth-child(even){background-color:deeppink;}`
3. 鼠标悬停时高亮: `table tr:hover{background-color:greenyellow;}`

### 2. 颜色属性  
1. 用单词表示颜色`div.c1{background-color:purple;}`
2. 用6位十六进制表示 红绿蓝`div.c1{background-color:#f00;}`  
3. RGB颜色:用十进制红(R)、绿(G)、蓝(B)三个颜色通道表示`div.c1{background-color:rgb(0,0,255);}`  
4. RGBA颜色:用十进制红(R)、绿(G)、蓝(B)、透明度(A)`div.c1{background-color:rgba(255,0,0,0.5);} `  
5. HSL颜色:通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色`div.c1{background-color:hsl(240,100%,70%);}`  
6. HSLA颜色: 色调(H)、饱和度(S)、亮度(L)、透明度(A)`div.c1{background-color:hsla(240,100%,70%,0.5);} `  
7. 图片透明度的设置 img.opacity{opacity:0.25;}  
   鼠标悬停,变半透明 img:hover{opacity:0.5;}

### 3. 字体属性  
1. font-style:  normal正常 italic斜体  oblique倾斜的字体`.c1{font-style:italic;} `  
2. 小写字母的大型字体font-variant`.c2{font-variant:small-caps;} `  
3. 加粗font-weight`.c2{font-weight:bold;}`  
4. 字体大小font-size: 20px,60%基于父对象的百分比取值`.c1{font-size:36px;}`  
5. 字体设置font-family:宋体，Arial`.c1{font-family:微软雅黑;}`  
6. [了解]font-stretch:文字的拉伸是相对于浏览器显示的字体的正常宽度(大部分浏览器不支持)

`.c3{font:italic small-caps bold 36px 微软雅黑;}`

### 4. 文本属性 
1. p {width:300px;}  
p {letter-spacing:0px;}  /* 字间距 */  
p {word-spacing:0px;}  /* 词间距 */  
p {text-indent:10px;}  //首行缩进 text-indent  
p {text-indent:2em;}  /* 2倍字符的距离 (2个汉字?) */  
2. 
```css
p {
		border:1px solid red;  
		white-space:nowrap;  
		overflow:hidden;  
		text-overflow:ellipsis; //文本的溢出是否使用省略标记(...) clip|ellipsis(显示省略标记) 
}  
```
3. 同时设置字体大小,行距,字体  
```css
p {  
		font:20px/1.5 微软雅黑;   
		color:red; /* 字体颜色 */  
}  
```
4. 单行文本时,行高与容器高度一致,则文本垂直居中
```css
    p.c1{border:1px solid red;  
			height:50px;  
			line-height:50px;  /* 行高 */
			text-align:center;  //文本的位置：left center right
    }  
```
5. 文本的文字是否有阴影及模糊效果  
    a {text-shadow:0px 0px 0px red;} /* 文本阴影 x轴 y轴 模糊度 影子颜色 */  
//对象中的文本的大小写：capitalize(首字母)|uppercase大写|lowercase小写  
ul li.c2 {text-transform:uppercase;} //转成大写   
ul li.c3 {text-transform:lowercase;} //转成小写

6.
```css
ul { 
		border:1px solid red;  
		list-style:none;  /* 去掉列表样式 */  
		padding:0px; /* 去掉填充 */
}  
```

7.`el li{border:1px solid blue;width:120px;}`  
text-decoration: 字体画线：none无、underline下画线，line-through贯穿线  
text-decoration-line：[了解]文本装饰线条的位置(浏览器不兼容)  
vertical-align: 文本的垂直对齐方式  
direction：文字流方向 ltr | rtl  
letter-spacing: 文字或字母的间距

### 5. 列表属性  
```css
div.c1 {
		border-style:solid;
		border-color:red;
		border-width:10px;

border:1px double blue;  /* 宽度  样式  颜色*/

border-top:1px solid red;
		border-right:2px solid green;
		border-bottom:3px solid blue;
		border-left:3px solid pink;
		border-color:deeppink gold purple greenyellow; /* 上 右 下 左 */
		border-color:deeppink gold purple; /* 上 右左 下 */
		border-color:deeppink gold; /* 上下  左右 */

width:200px;
		height:200px;
}
```
### 6. 边框属性  
1. 三角  
```
div.c2 {
		width:0px;
		height:0px;
		border-width:50px 50px 0px 50px;
		border-color:red transparent blue transparent; /*transparent 透明色*/
		border-style:solid;
}
```
2. 圆角  
```
div.c1 {
		width:200px;
		height:200px;
		border:1px solid red;
		border-radius:10px;
}
```

### 7. 表格相关属性：
- table-layout	设置或检索表格的布局算法	
- border-collapse	设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开	separate | collapse
- border-spacing	设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距	
- caption-side	设置或检索表格的caption对象是在表格的那一边	top | right | bottom | left
- empty-cell	设置或检索当表格的单元格无内容时，是否显示该单元格的边框	hide | show

### 8. 常用属性
- cursor:pointer 把鼠标变成小手   
- cursor:move 把鼠标变成十字架  
- text-align:center div中的字体居中  
- border-bottom:solid 1px #333 把div分成一行一行的   
- line-height:30px 在div中字体于顶部的高度   
- position:absolute 绝对定位：是将div的位置固定的，也就是用浏览器的绝对位置的显示div  
- relative  相对定位  
- text-decoration:none 去掉下划线；  
- border-radius:50% 决定是方的还是园的  
- overflow:hidden 隐藏  
- border-collapse:collapse; 如果2个div嵌套去掉俩条线中间的空白  
- border-collapse：collapse 设置表格的行与单元格的边框合并在一起  
- marker-offset 想要设置标记容器和主容器之间的补白  
- outline-style: dashed  设置一个对象外的线条轮廓的样式为虚线边框  
- min-width：100px; min-height：50px 设置一个div的最小宽度为100像素，最大高度为50像素  
- marquee 字体飘动  
- line-height:0px 设置行高  
- letter-spacing:0px 字符间的距离  
- text-align:(center    left    right) 文本对齐方式  
- text-align:center 文本居中  
- style="list-style-type:none;  
- text-decoration:none 去除下划线  
- background: url(images/ad_ctr.png) no-repeat 背景添加

(3) Comments

John Doe- Reply

February 26, 2013 at 1:18 pm
- saqib sarwar- Reply
  
  February 26, 2013 at 1:20 pm
  
  Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
John Doe- Reply

February 26, 2013 at 1:27 pm

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Comment

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CSS 隔行隔列换色及常用属性

(3) Comments

John Doe- Reply

saqib sarwar- Reply

John Doe- Reply

Leave a Reply