CSS笔记（字体，背景，选择器，伪类选择器，显示元素）

字体

font-family:  改变字体（宋体。。）
font-size:	改变字体大小
font-weight： 改变文字粗细（使用数字时不要加单位）700加粗，400普通
font-style:  文字风格（是不是斜体）html标签（em，i 是使文字斜体的标签）如：取消斜体
复合属性：顺序不能变（font-size，font-family必须写）
	font：font-style font-weight font-size/line-height font-family;
color： 改变字体颜色
text-align: 设置文本水平对齐方式
	例：<h1>aaa<h1>在h1行中对齐
text-decoration: 装饰文本（下划线，删除线。。），如：取消下划线。
text-indent： 文本缩进
    1. 只缩进首行
    2. em单位：相对于（font-size）一个文字大小
line-height: 行间距（如果文字的行高等于盒子的高度，文字则会垂直居中，小于则偏上，大于则偏下）
list-style: 列表样式（ui li。。）

css子代选择器

.nav>a {//只将daidu11变为红色，通过 > 来确定选择最近的a标签
            color: red;
        }

 <div class="nav">
        <a href="#">daidu11</a>
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li>
        </ul>
    </div>
    <a href="#">baidu</a>

并集选择器

/*并集选择器*/
       div, p, .pig li {//通过 ， 来批量选择标签
            color: red;
        }
	
   <div>胸大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>佩奇</li>
        <li>猪爸爸</li>
        <li>祝妈妈</li>
    </ul>

伪类选择器

定义：通过冒号来使用伪类选择器
a:link  选择所有没有被访问的连接
a:visited  选择所有已经被访问的连接
a:hover 选择鼠标悬停在上面的连接
a:active 选择鼠标按下时的连接 
	* 注意：上面的顺序不能颠倒

:focus伪类选择器 （获取焦点的表单元素）

/*表单焦点伪类选择器*/
  input:focus {
  	  //如果鼠标点中第一个input，他的背景就变成红色
       background-color: red;
   }

<input type="text">
<input type="text">
<input type="text">
<input type="text">

元素显示元素（块元素，行内元素）

	块元素： 一行上放一个元素
		1. 独占一行
		2. 高度，宽度，内外边距
		3. 宽度默认和父类元素一样宽（100%）
		4. 是一个容器，可以放块内元素或块级元素
	行内元素：一行上放多个元素
	    1. 相邻的行内元素在一行上，一行可以显示多个
	    2. 宽，高直接设置没效果
	    3. 默认宽度就是它本身内容的宽度
	    4. 行内元素只能容纳文本或者其他行内元素
	行内块元素：(同时具有块元素和行内元素的特点)
		<img/> <imput/> <td>
		1. 和相邻的行内元素在同一行，之间有空隙，一行可以显示多个
		2. 默认宽高就是其本身的宽度
		3. 高度，行高，内外边距都可以控制
	行内元素和块元素相互转换:
		display: block 行转块
		display: inline 块转行
		display: inline-block 行内转换块元素

背景

	background-color: 背景颜色
	background-image: 背景图片
	background-repeat: 背景平铺	
	background-position: 背景图片的位置
	background-attachment: 背景固定
	复合属性
	background： 背景颜色 背景图片 背景平铺 背景图像滚动 背景位置
	background: rgba(255,255,255,0.3) 背景不透明度