CSS基础学习02

（一）复合选择器
1、后代选择器（重点！！！）
先写父亲再写孩子，用空格隔开
顺着标签一层层去找，要写到底
.wangsicong ul li {
color: pink;
}
总结：大多数都有class类名，然后顺着一层一层写下去，写到底，如果没有class类名也可以选出来
后代选择器，儿子孙子都可以选出来
2、子元素选择器
符号：用>进行链接
只选某元素的子元素（亲儿子）作为元素，不包含孙子，重孙子
3、交集选择器：不怎么使用
p.red {
color: pink;
}
4、并集选择器（重点！！！）
用逗号隔开，逗号表示“和”，进行集体声明
因为样式相同，所以才进行集体申明，注意，每写一个一定要加逗号
格式：一般一行只写一个，然后写到下一行
例：
.nav,
.site-1 {
font:14px “微软雅黑”;
}

5、链接伪类选择器（重点！！！）
：link {} 伪类选择器
作用：
给某些选择器添加特殊效果
中间没有空格
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接

链接伪类选择器，一定要有<a herf=" " >...  </a>标签

注意：写他们的时候，顺序一定不要颠倒
因为a 链接 浏览器具有默认样式，并且自带下划线，所以在实际工作中都需要给链接单独指定样式

实际开发中很少写4个；一般是这样的
鼠标放到类名为nav里面的链接才会变色
.nav a:hover {
color: orange;
}

（二）标签的显示模式（重点！！！）
标签分为块级元素和行内元素
1、块级元素

<h1>~<h6>, <p>  ,<div>  ,<ul>  ,<li>其中最典型的是<div>
<div>里面可以再加div

块级元素的特点：
（1）高度，宽度，内外边距都可以控制；
（2）宽度默认是容器的100%；
（3）是一个容器及盒子，里面可以放行内或者块级元素

注意：p,<h1>~<h6 >,dt标签里面不能放块级元素，因为他们里面都是放文字，特别是p,<h1>~<h6>,dt等不能放div（会导致布局出现问题）

2、行内元素=内联元素

<a> ,<strong><b>,<em>  ,<i>  ,<del> ,<s> ,<ins> <u> ,<span>
其中<span>是最典型的行内元素

特点：
（1）一行可以放多个；
（2）高，宽直接设置是无效的，
（3）默认宽度就是它本身内容的宽度，
(4)、行内元素只能容纳文本或者其他行内元素

	注意：
 # 链接里面不能再放链接；（这样链接不明确）
#  特殊情况a里面可以放块级元素，但是给a转换一下块级模式最安全

3、行内块元素

有特殊的几个标签：<img /> ,<input /> <td>,可以对他设置宽高和对齐属性，  

特点：
（1）和相邻行内元素在一行上，但是之间会有空隙，一行可以显示多个，
（2）默认宽度就是它本身内容的宽度
（3）宽度，行高，内外边距都可以控制
5、 标签显示模式转换 display
块转行内：display:inline;
行内转块：display:block;
块，行内元素转换为行内块：display:inline-block;

注：在一行内显示，同时又有大小，则用行内块（inline-block）
6、行高（line-height )
基线和基线的距离为行高
行高的测量：
（1）如果是中文，就是两个底线之间的距离；
（2）如果是英文，就是两个基线之间的距离；
行高的作用：使单行文本垂直居中
（1）文字的行高等于盒子的高度，文字会垂直居中；
（2）行高大于高度，文字会偏下；
（3）行高小于高度，文字会偏上；
7、CSS背景（background)
（1）背景颜色：background-color
（2）背景图：background-image
提倡背景图片后面的地址不要加引号
（3）背景平铺：background-repeat
repeat:平铺
no-repeat：不平铺
repeat-x:沿水平平铺
repeat-y:沿纵向平铺；
（4）背景位置：position(重点！！！）
background-position：X坐标 Y坐标
position:top/center/bottom/left/center/right(上中下，左中右）方位名词
例：background-position: left center（这两个方位名词的前后顺序颠倒后，结果也是一样的）
注意：如果只指定了一个方位名词，则另一个默认是y坐标，默认居中对齐；
length:跟一个精确的长度
background-position: 10px 50px
X=10px Y=50px
注意：跟了精确单位后，X和Y顺序不能颠倒
第一个一定是X，第二个一定是Y
background-position: 10px
若只写了一个值，则X是10 像素，Y是垂直居中的，但是切记不要只写一个值，哪怕是混用也可以

background-position:center top（水平居中对齐，垂直靠上，这种写法一般是我们以后写超大图片定位做法）

(5) 背景附着：background-attachment(解释背景是滚动的还是固定的）
scroll:背景图像随对象内容滚动；
fixed:背景图像固定；
一般默认的是scroll
(6)背景简写（中间用空格隔开）
background:背景颜色 背景图片地址 背景平铺，背景滚动 背景位置
例：background: #ccc url(images/sms.jpg) no-repeat fixed center top;
颜色不写默认就是透明色，平铺要是不写默认就是平铺的，滚动不写默认就是滚动的，

（7)背景透明（重点！！！）
alpha:透明度
透明度的范围是：0~1
透明度的写法：background-color: rgba(0,0,0,0.3);
习惯把0.3的0去掉
盒子背景颜色半透明，但是盒子里面的内容不受影响

8、CSS三大特性
（1）层叠性：后一级会覆盖前一级，因此会显示后一级的属性（就近原则）
谁冲突了谁才会重叠，没冲突的就不会重叠
（2)继承性
子标签会继承父标签的某些样式（并不是所有样式），如文本颜色和字号
以text-开头，font-开头，line-开头的元素可以继承，以及color可以继承
（3）优先级（重点！！！）
选择器相同，执行层叠性
选择器不同，会有优先级的问题
权重：
继承或*（通配符） 权重：0，0，0，0
标签选择器 权重：0，0，0，1
类选择器 权重：0，0，1，0
ID选择器 权重：0，1，0，0
style=行内样式表 权重：1，0，0，0
！important （在样式属性的后面添加） 权重最高，无穷大
权重叠加可以计算，谁的权重大，就会执行谁的
权重叠加不可以进位
例：0，0，0，5+0，0，0，5=0，0，0，10
继承的权重为0 ，只要没选中那个标签，那么权重就是0，选中了就按权重计算公式计算