css学习

一、复合选择器
1.1后代选择器（包含选择器）
作用：用来选择元素或元素组的子孙后代
语法：.class h3{color:red;font-size:16px;}
1.2子元素选择器
作用：子元素选择器只能选择作为某元素的子元素（亲儿子）
语法：.class>h3{color:red;font-size:14px;}
例如：.demo>h3{color:red;}说明h3一定是demo亲儿子。demo元素包含着h3
1.3交集选择器
条件：交集选择器有两个选择器构成，找到的标签必须满足：既有标签一的特点，也要有标签二的特点，两个选择器之间不能有空格
语法：h3.class{color:red;font-size:25px;}
例如：p.one 选择的是：类名为.one的段落标签
1.4并集选择器
应用：选择器定义相同模式，就可以利用并集选择器，可以让代码更简洁
并集选择器（css选择器分组)是各个选择器通过，连接而成的，通常用于集体声明
语法：.class,h3{color:red;font-size:25px;}
任何形式的选择器（包括标签选择器，class类选择器id选择器等），都可以作为并集选择器的一部分
记忆技巧：并集选择器通常用于集体声明，都好隔开的，所有选择器都会执行后面样式，都好可以理解为和的意思
例如：.one,p,#test{color:#F00;}表示：.one和p和#test这三个选择器都会执行颜色为红色
通常用于集体声明
1.5链接伪类选择器
作用：用于向某些选择器添加特殊效果。比如给连接添加特殊效果，不如可以选择第一个，第n个元素。因为伪类选择器很多，不如链接伪类，结构为类等等。
例如：a:link /为访问的链接/
a：visited /已访问的链接/
a:hover /鼠标移动到连接上/
a:active/选定的链接/
1.6复合选择器总结

二、标签显示模式（display）
2.1块级元素
常见的块级元素：

~

、

、

、

• 、
  1. 、
  2. 其中
     标签是最典型的块元素
     特点：1、自己独占一行
     2、高度，宽度，外边距以及内边距都可以控制
     3、宽度默认是容器宽度（父级宽度）的100%
     4.是一个容器及盒子，里卖弄可以放行内或者块级元素
     注意：p里面不可以放div，p里面不能放块级元素
     

     ~

     ，dt这些标签都是文字类块级标签，里面不能放其他块级元素
     2.2行内元素（inline-level）
     常见的行内元素有、、、、、、、、、其中标签最为典型的行内元素，有的地方也称内联元素
     特点：1、相邻行内元素在一行上，一行可以显示多个
     2、高宽直接设置是无效的
     3、默认宽度就是它本身内容的宽度
     4、行内元素只能收容文本或者其他行内元素
     2.3行内块元素（inline-block）
     在行内元素中有几个特殊的标签、、可以对他们设置宽高和对齐属性
     特点：1、和相邻行内元素在一行上，但是之间会有空白缝隙，一行可以显示多个
     2、默认宽度就是它本身内容的宽度
     3、高度，行高，外边距以及内边距都是可以控制的
     2.3三种模式总结区别
     
     2.4标签显示模式转换 display
     1、块转行内：display：inline
     2、行内转块：display：block
     3、块，行内元素转换为行内块：display：inline-block
     三、行高
     行高=上距离+内容高度+下距离
     
     四、css背景
     4.1背景颜色
     语法：background-color：颜色值；默认的值为transparent 透明的
     4.2背景图片
     语法：background-image：none|url（url）
     

       background-image：url（images/demo.png）；

4.3背景平铺（repeat）
语法：background-repeat:repeat |repeat | no-repeat |repeat-x |repaet-y

4.4背景位置（position）重点
语法：background-position：length ||length
background-position：position || position

4.5背景附着
语法：background-attachment：scroll |fixed

4.6背景简写
语法：background：trandsparent url（image.jpg）repeat-y scroll center center top；
4.7背景透明
语法：background：rgad（0，0，0，0.3）；
4.8背景总结