CSS基础知识笔记（更新）

css  层叠样式表

• 第一种写在标题中

 

选择器

        p、div叫标签选择器

        css注释是/*  */

        span在同一行，p会换行

        标签选择器格式为：标签类型{样式属性：属性值}（会选择所有标签）

        类选择器：class在属性中，用  .类名{}使用。类名最好不用中文，数字不行，连字符可以用。一个标签可以有多个类，写在同一个“”里面即可。

        id选择器：#id名{}来使用，但id只能用一次，class可以用很多次

        通配符选择器：*{},选定所有标签进行操作，标签多的话效率较低。

        伪类选择器，a:

                                 link:未访问的链接形式

                                 hover:鼠标经过的悬停效果

　　　　　　　　    visited:已访问的连接

　　　　　　　　    active:鼠标按住不松手        

　　超链接选择器，a{ }所有连接的通用样式

　　结构伪类选择器,li:first-child{ }　　第一个孩子li,不是li的第一个孩子

　　　　　　　　　 li:last-child{ } 

　　　　　　　　　 li:nth-child(序号){ }　　2n也可以，代表偶数，n从0，1,2开始取，，，但li是从1开始编号的，没有0（可用于日历）

　　　　　　　　　 li:nth-child(odd){ }　　奇数位

　　　　　　　　　 li:nth-child(even){ }　　偶数位

　　　　　　　　　 li:nth-last-child(even){ }　　从最后一位开始数的偶数位

　　目标伪类选择器，:target{ }只改变目标部分的内容

 

 

颜色

　　color:

• 预定义颜色值

　　　　red,blue,英文单词等

• 用16进制数字表示

　　　　红绿蓝三个的组合，#111111等（#000000~#ffffff）2位相同的可以省略，即aabbcc格式可以abc

• rgb代码（10进制）

　　　　rgb(255,255,255),范围由上类推，用%也可以，如rgb（100%，100%，0%）；

 

行高对齐以及缩进

　　line-height:　　px；行间距

　　text-indent:　　em；参考默认的n倍宽度缩进

　　text-align:　　center；文本对齐方式

 

单词距离

　　letter-spacing：　　px；文字之间间距

　　word-spaceing：　　px；单词之间间距（只对英文有效）

　　

半透明效果

　　color:rgba(255,0,0,0)；　　第4个参数，0是完全透明，1是完全不透明