CSS样式表
|-引入的三种方式
|--内联样式
|----标签内部（空格style）
|--内嵌样式
|----<head></head>标签内部（<style></style>）
|--外联样式
|----<link rel="stylesheet（样式表）" type="text/css" href="css文件路径"/>
<!--外联样式（link：联系）--> <link rel="stylesheet" type="text/css" href=""/>
<!--内嵌（style:风格、样式）--> <style type="text/css"> <!--内联--> <div style=""></div>
|-选择器（查找方式）
|--id 唯一、通过 # 查找
|--class 可以重名、通过 . 查找
|--<标签名> 通过 <标签名> 查找（<div>/<span>：控制所有div/span标签）
|--并列选择 通过 ， 查找（可并列控制不同类型：id，class，<div>，<span>）
|--后代选择 通过 空格 查找(只控制后代的样式)
/*井号#代表id*/ #weiyi{}/*选择id="weiyi"的元素*/ /*.代表class*/ .kechongming{}/*选择所有class="kechongming"的元素*/ /*通过标签名直接控制*/ div{}/*选择所有div*/ span{}/*选择所有span*/ /*并列选择,元素之间加 , */ #weiyi,.kechongming,div,class,span{} /*空格 选择后代*/ #houdai div{}/*选择id="houdai"的元素中的所有div*/ .houdai_ span{}/*选择所有class="houdai_"的元素中的所有span*/ <!--选择器--> <div id="weiyi"></div> <div class="kechongming"></div> <div class="kechongming"></div> <div class="kechongming"></div> <div id="houdai"> <div></div> <div></div> <span></span> <span></span> </div>
|-样式
|-大小 宽度 height 高度
|-背景 background-color 颜色
|-背景图片
|--background-image:url("") 图片路径
|--background-size: 图片尺寸
|--background-repeat:no-repeat 删除默认平铺
/*样式 大小与背景*/ #beijingtupian{ margin-top:10px ; 200px; height: 200px; border: 1px solid red; background-image: url(../../xiaomi/disanhanggundong.png); background-size: 150px,100px;/*背景尺寸*/ background-repeat:no-repeat ;/*背景平铺方式*/ } <!--样式--> <!--大小与背景--> <div style=" 200px; height: 200px; background-color: green;"></div> <div id="beijingtupian"></div>
|-字体（font 文字）
|--字体的样式 font-family(微软雅黑、宋体、楷体等)
|--字体的大小 font-size
|--字体的格式 font-style
|--字体的粗细 font-weight
|--字体的颜色 color
|--给字体加线 text-decration：
/*字体样式*/ span{ font-family: "微软雅黑"; font-size:16px; font-style: italic;/*字体倾斜*/ font-weight: bolder;/*字体加粗*/ text-decoration: line-through;/*删除线（through：穿过）*/ color: orange; } <!--字体的样式--> <span>字体的样式</span>
