css基础知识（一）

p标签是段落标签，
h1,h2等是标题标签
font-size设置字体大小
具体长度单位如下：

用法

h2 {
	font-size:20px;
}

font-family设置字体。通常为宋体，微软雅黑，黑体等。
用法

h2 {
	font-size:20px;
	//需要使用类似Microsoft Yahei等的需要中间需要加空格。
	//字体按顺序查找，比如如果电脑中没有宋体就找微软雅黑
	font-family:"宋体","Microsoft Yahei",tahoma
}

当然我们也可以使用Unicode设置字体。对应关系如下。

font-weight:字体粗细
可以使用数字或者字母表示
font-weight可用的属性值有normal、bold、bolder、lighter、100~900

数字400等价于normal，而700相当于bold

em标签可以使字体变倾斜
用法

<em>你好</em>

效果

如果要使该字体正常显示则需要加入字体样式
font-style:normal

em {
font-style:normal;
}
<em>你好</em>

效果

字体设置可以使用综合写法比如

h4 {
	color:purple;
	//italic斜体
	//注意顺序不可以乱放，倾斜，加粗，字体大小，选用字体
	font:italic bold 14px "微软雅黑"; 
}

多类名样式如图

多类名样式按照style内部样式从上往下依次影响。
下面样式会覆盖上面样式如：

//字体倾斜
  .emitalic{
    font:italic bold 14px "微软雅黑 Light";
  }
  //字体正常
  .emnormal{
    font:normal bold 14px "微软雅黑 Light";
  }
    <em class="emitalic emnormal">
      你好
    </em>

效果显示为字体正常

id选择器使用#标记

#hello{
	font-size:20px;
}
<div id="hello">你好</div>

id不能像class内样重复使用

<div id="hello"/>
//上面下面不能用同一个id值
<div id="helloWorld"/>

通配符选择器
匹配页面中所有元素

* {属性1：属性值1；属性2：属性值2}

消除所有html标记

*{
	margin:0;
	padding:0;
}

伪类选择器
用于向某些选择器添加特殊效果

//注意！！！顺序不可以乱调
a:link{
	//未访问的链接
	font-size:16px;
	color:orange;
}
a:visited{
	//已访问的链接
	font-size:16px;
	color:red;
}
a:hover{
	//鼠标移动上去链接上
	font-size:16px;
	color:grey;
}
a:active{
	//点击鼠标不松开时
	font-size:16px;
	color:cyan;
}

<div>
	<a href="www.baidu.com">
		跳转到百度
	</a>
</div>

结构选择器

:first-child:选取属于父元素的首个子元素的指定选择器
:last-child:选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n):匹配属于其父元素的第N个子元素，不论元素的类型even偶数 odd奇数
:nth-last-child(n):选择器匹配属于其元素的第N个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

  li:first-child{
    color: red;
  }
  li:last-child{
    color: purple;
  }
  li:nth-child(4){
    color: cyan;
  }
    <ul>
      <li>第一个孩子</li>
      <li>第二个孩子</li>
      <li>第三个孩子</li>
      <li>第四个孩子</li>
      <li>第五个孩子</li>
    </ul>

效果

选择奇数，偶数

  li:nth-child(odd){
  //基数
    color: cyan;
  }
    li:nth-child(even){
  //偶数
    color: cyan;
  }
 
 //同样可以选择例如3n这种奇数倍，偶数倍数据
  li:nth-child(3n){
  	n 0 1 2 3 4
  	3n 0 3 6 9 12
  }

  li:nth-last-child(even){
  //从最后一个向上数
		color: skyblue;
  }
    <ul>
      <li>第一个孩子</li>
      <li>第二个孩子</li>
      <li>第三个孩子</li>
      <li>第四个孩子</li>
      <li>第五个孩子</li>
    </ul>

:target目标伪类选择器
text-indent首行缩进

p{
//缩进两个字符
	text-indent:2em;
}
<p>11111111111</p>

letter-spacing 字间距
word-spacing 单词间距针对于英文，中文无效。
rgba(r,g,b,a) 颜色半透明
text-shadow 文字阴影 水平位置 垂直位置 模糊距离 阴影颜色

.hello{
	text-shadow: 1px 2px 3px rgba(0,0,0,4)
}
<p class="hello">你好</p>

块级元素

常见块级元素有

h1~h6  p div ul ol li

块级元素特点
（1）总是从新行开始
（2）高度，行高，外边距以及内边距都可以控制
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素
行内元素

a strong b em i del s ins u span

行内元素特点：
（1）和相邻元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效
（3）默认宽度就是它本身内容的宽度
（4）行内元素只能容纳文本或则其他行内元素(a特殊)
行内块元素

<img/> <input/> <td>

行内块元素特定
（1）和相邻行内元素（行内块）在一行上，但是之间有空白间隙
（2）默认宽度是它本身内容的宽度
（3）高度，行高，外边距以及内边距都可以控制

display显示模式互转
块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块：display:inline-block;

div{
	width:100px;
	height:100px;
	background-color:pink;
	display:inline;//块级转行内标签
}
span{
	width:100px;
	height:100px;
	background-color:hotpink;
	display:block;//行内标签转为块级标签
}
a{
	display:inline-block;//行内转为行内块
}

<div>11111</div>
<span>22222</span>
<a>123</a>