CSS2实用知识点详解

CSS相关知识回顾目录

CSS2选择器

假选择器的使用

属性选择器的使用

边框设置

背景设置

字体设置

文本属性

a标签假选择器使用

列表设置

表格设置

鼠标设置

单位设置

隐藏显示

位置设置

清除浮动

假元素的使用

媒体类型

---

CSS相关知识回顾

1. CSS2选择器

   * 通配符选择器
   div 元素选择器
   #box id选择器
   .box 类选择器
   p.box 交集选择器
   div p 后代选择器
   ui > li 子代选择器
   p + div 亲兄弟选择器，选择p标签后面紧挨着的div元素
   p ~ div 表兄弟选择器，选择p标签后面所有同级的div元素
   h1,h2,h3 并集选择器
   

2. 假选择器的使用

   div:first-child 匹配第一个元素
   div:last-child 匹配最后一个元素
   div:nth-child(2) 选择第二个元素
   div:nth-child(even) 偶数元素
   div:nth-child(odd) 基数元素
   div:nth-child(2n+1)
   :lang选择器的使用
       q:lang(no) {
           quotes: "~" "~";
       }
       <p>文本 <q lang="no">修饰的文本</q> 文本.</p>
   

3. 属性选择器的使用

   <div key="a a">erefefwfa</div>
   <div key="b-a">erefefwfa</div>
       [key]
       div[key]
       div[key="a a"]
       div[key~="a"] 匹配空格分割的任意属性值
       div[key|="b"] 匹配以连字符连接的属性值，这个属性值以指定值开头
       div[key^="b"] 匹配一指定字符开头的属性值
       div[key$="a"] 匹配以指定字符结尾的属性值
       div[key*="b"] 匹配包含指定字符的属性值
   

4. 边框设置

   边框有border和outline之分，outline在border外面，outline无法单独设置每条边的样式
   颜色
       outline和border没有显示指示自己的颜色，则使用color属性值
       p {
           color: #0000ff;
           outline: 2px solid;
           border: 2px solid red;
       }
   边框宽度
       border-width: medium thick thin 10px;
       outline-width: thick;
   边框样式
       支持的属性 one, hidden, dashed, dotted, double, groove, inset, outset, ridge, solid
       border-style: outset;
       outline-style: outset;
   边框颜色
       border-color: darkcyan;
       outline-width: thick;
   

5. 背景设置

   background-color 设置背景颜色
   background-image 设置背景图片
   background-repeat 设置图片平铺的方式
       repeat-x
       repeat-y
       no-repeat
   background-attachment 设置图片固定方式
       fixed 固定
       scroll 随容器滚动
   background-position: bottom right; 设置图片的位置
       background-position: 100% 100%;
   简写形式的顺序 background: color image repeat attachment position;
       background: #f0e68c url("./1.jpg") no-repeat fixed 250px 25px;
   

6. 字体设置

   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; // 设置字体家族
   font-style 设置字体样式
       normal
       italic 斜体字体
       oblique 普通字体斜体样式
   font-size 设置字体大小
       使用关键字设置字体大小
           在body元素上设置绝对字体大小如font-size: xx-small;支持的属性xx-small, x-small, small, medium, large, x-large, xx-large
           在页面其他的元素上设置相对字体大小如font-size: larger;支持的属性smaller, larger
           这种设置方式，可以简单的控制body字体大小，从而控制页面所有标签的字体大小
       使用pixel设置
           font-size: 12px; 这种方式设置的字体大小固定，不推荐使用
       使用em设置
           em是相对于父元素的字体单位
           在body元素上设置font-size: 16px; 那么1em=16px; 如果页面上没有设置px值，默认是16px
           在子元素中设置 font-size: 2em; 表示32px;
           W3C建议使用的字体设置方式
               body元素设置 font-size: 62.5%;
               子元素设置 font-size: 1.6em; 相当于 1.6em=16px;
       使用rem设置
           rem是相对于html标签的字体单位，默认是16px;用法和em类似
           body{
               font-size: 62.5%;
           }
           #id1{
               font-size: 1rem;
           }
           可以简单的控制html标签的字体大小，控制整个页面的字体
   font-weight 设置字体粗细
       数值 100, 200, 300, 400, 500, 600, 700, 800, 900 其中400是normal, 700是bold
       关键字 bolder, lighter 这两值是根据父元素的font-weight来显示的，如父元素设置bold那么它更粗
   font-variant: small-caps; 将小写字母显示成小型的大写字母
       可用属性值 normal, small-caps, inherit
   

7. 文本属性

   color 设置文本颜色
   text-align 设置文本对齐方式
       left
       right
       center
       justify 分散对齐
   text-decoration 设置文本标记线
       underline 下划线
       overline 上划线
       line-through 中划线
       none 去掉下划线
   text-transform 设置文本转化方式
       capitalize 首字母大写
       uppercase 字母大写
       lowercase 字母小写
       none
   text-indent 设置首行缩进
       text-indent: 10px;
       text-indent: 10%;
   word-spacing: 20px; 设置单词之间的间隙
   letter-spacing: 5px; 设置字符之间的间隙
   line-height 设置行高
       line-height: 50%;
       line-height: 1.2; 基于当前字体计算
       line-height: 20px;
   

8. a标签假选择器使用

   a:link{ color: #FF0000; } 初始颜色
   a:visited{ color: #00FF00; } 访问后的颜色
   a:hover { color: #FF00FF; } 鼠标悬浮颜色
   a:active { color: #0000FF; } 鼠标点击不放颜色
   设置顺序 :link, :visited, :hover, :active
   

9. 列表设置

   ul,ol中列表项的前缀可以使用list-style-type设置，如 ul { list-style-type:lower-alpha; }
   ul,ol中列表项的前缀可以使用list-style-position设置是否包含在li盒子里面，如ul li { list-style-position: inside; }
   ul,ol中里表项的前缀可以使用list-style-image设置前缀图片，如 ul li { list-style-image: url('./2.jpg'); }
   可以使用list-style属性简写上面提到的三种属性
       简写的顺序 list-style-type | list-style-position | list-style-image
   

10. 表格设置

    边框设置，默认table是没有边框的 table, th, td{ border: 1px solid #ccc; }
    边框合并，默认单元格的边框是分开的
        可以设置border-collapse让单元格共享边框 table{ border-collapse: collapse; }
        也可以设置border-spacing设置单元格之间的间隙为0 table{ border-spacing: 0; }
    table布局，单元格宽度默认是根据内容的来自适应的
        可以设置 table-layout 来设置单元格的宽度为指定的宽度 table { width: 300px; table-layout: fixed; }，auto为默认值。
        默认情况下，table标签是会等待所有的表格数据加载完成才会展示出来，将table-layout设置成fixed还有一个好处，可以让表格一次加载一行数据
    空单元格的显示于隐藏，table{ empty-cells: hide; }
    表标题位置设置，caption{ caption-side:bottom; }
    

11. 鼠标设置

    支持的属性值 default, pointer, text, wait, help, progress, crosshair, move
    如 cursor: help;
    创建自定义游标
        最好将要显示的图片转换成.cur格式的图片，谷歌默认支持jpg等
        如 cursor: url("./2.jpg"), default;
    

12. 单位设置

    相对单位em,ex 其中em前面已经介绍，ex的作用和em类似，ex是用x字母的高度为准
    绝对单位
        #box1 { height: 12in; } // 1in === 2.54cm
        #box2 { line-height: 3cm; }
        #box3 { word-spacing: 4mm; }
        #box4 { font-size: 12pt; } // 1pt === 1/72 in === 0.353mm
        #box5 { font-size: 1pc; } // 1pc === 12pt
        #box6 { font-size: 12px; } // 1px === 0.75pt
    

13. 隐藏显示

    display: none; 控制dom是否渲染
    visibility 控制dom是否显示
        visible 默认值
        hidden 隐藏
        collapse 主要用于表格单元的隐藏
        inherit 继承
    

14. 位置设置

    position: static; 默认值，静态定位不受top,bottom,left,right,z-index影响
    position: relativa; 设置相对自己当前位置定位，不脱离文档流
    position: absolute; 设置相对父元素位置定位，父元素非static，脱离文档流
    position: fixed; 设置相对浏览器视口定位，脱离文档流
    

15. 清除浮动

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    

16. 假元素的使用

    p::first-line 第一行
    p::first-letter 第一个字
    div::before{ content: url('./1.jpg'); } 元素content之前content
    div::after 元素content之后的content
    

17. 媒体类型

    根据不同的设备应用不同的样式
        写法一
            @media screen {} 屏幕
            @media print {} 打印设备
            @media screen, print {}
        写法二
            @import url("./test.css") screen;
            @import url("./test.css") print;
        写法三
            <link rel="stylesheet" type="text/css" media="all" href="./test.css">
            <link rel="stylesheet" type="text/css" media="screen" href="./test.css">
            <link rel="stylesheet" type="text/css" media="print" href="./test.css">
            <link rel="stylesheet" type="text/css" media="screen, print" href="./test.css">