css样式

1.解压文件，将文件夹复制到你的项目中

2.引入CSS文件
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>

3.添加图标
<i class="fa fa-home"></i>

3.ID选择器   重点

1.给元素添加ID属性，ID值是唯一，再一个页面不可以重复出现
<div id="div1"></div>

2.定义样式
<style>
    #div1{ color:red;}/*选择到id名div1的元素，改变字体颜色*/
</style>

4.通配符*，很少用，选择到网页中所有的标签,一般用于初始化网页
*{color:red;}

5.多条件选择器，同时选择  重点
div,p{color:red;}选择到网页中所有的div和p
div,.className,#div1{}

层次选择器
1.
div a{ color:red;}父子关系(上下级关系)，选择到div里的“所有”a标签

html示例
<div>
    <a href="#">a会被选择</a>
    <p>    
        <a href="#">a会被选择</a>
    </p>
</div>

2.
div>a{color:red;}父子关系(上下级关系)，选择到div里的子“a”标签

html示例
<div>
    <a href="#">a会被选择</a>
    <p>    
        <a href="#">a不会被选择</a>
    </p>
</div>

3.
div+a{color:red;}兄弟关系 选择到div后紧邻的第一个a标签，只能选择一个元素

4.
div~a{color:red;}兄弟关系 选择到div后的所有a标签

即...又包含...
div.className{color:red;}

<div class="className"></div>

样式代码
<style>
    div.div1 ul.box li,div.div1 p{
        color:red;
    }
</style>

对应写出html代码
<div class="div1">
    <ul class="box">
        <li>li</li>
    </ul>
    <p></p>
</div>

字体样式
color:red;字体颜色，
颜色取值
英文，red
十六进制值 #ff0000
rgb(255,0,0)
rgba(255,0,0,0.5) 最后一个参数是透明度，0-1 0是透明 1不透明

<style>
    p{
        color:red;
    }
</style>

font-size:20px;字体大小

font-weight: bold;字体加粗

font-family: "微软雅黑";字体

font-style: italic;斜体

text-align:center;文本对齐方式，center居中   left左对齐   right右对齐

line-height:50px;行高，注意：文字显示在50像素的中间

letter-spacing: 10px;字符间距

width:1000px;宽

height:200px;高