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

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. p {
         border:1px solid red;  
         white-space:nowrap;  
         overflow:hidden;  
         text-overflow:ellipsis; //文本的溢出是否使用省略标记(...) clip|ellipsis(显示省略标记) 
    }
    
  3. 同时设置字体大小,行距,字体
    p {  
         font:20px/1.5 微软雅黑;   
         color:red; /* 字体颜色 */  
    }
    
  4. 单行文本时,行高与容器高度一致,则文本垂直居中
     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.

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. 列表属性

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 背景添加