引入方式
外联样式表，使用link标签引入，而link 标签放在head标签内
html {background-color: darkgreen;color: azure;font-size: 20px;}ul {background: darkred;padding: 10px;border: 1px solid black;}li {margin-left: 20px;}
内部样式表，css样式在style标签内定义，而style标签是放在head标签内
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>JSON</title><style type="text/css">div{color:red;}</style></head><body><div>don't give up</div></body></html>
行内样式表，在标签的style属性中定义的
<div style="color: blue;">don't give up</div>
选择器
元素选择器，
<style type="text/css">div{color:red;}</style>
id选择器，
<style type="text/css">#lvye{color:red;}</style>
class选择器,
<style type="text/css">.lv{color:red;}</style>
后代选择器,
<style type="text/css">#father1 div {color:red;}#father2 span{color:blue;}</style>
群组选择器,
<style type="text/css">h3, div, p, span {color:red;}</style>
选择器测试
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>JSON</title><style type="text/css">div,p{color:red;}.lv{color: chartreuse;font-size: large;}</style></head><body><div style="color: blue;">don't give up</div><div class="lv">下面有一段代码，</div><p class="lv">如果我们想要选中所有的div和p，</p><p class="lv">请用至少两种不同的选择器方式来实现，并且选出<strong>最简单</strong>的一种。</p><span>进行选择</span></body></html>
字体
font-famliy，字体类型，可以设置不止一种，从左到右顺寻选择
font-size,使用px作为单位
font-weight,lighter,normal.bold,bolder
font-style,斜体，正常
color
字体测试
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>JSON</title><style type="text/css">p{font-family: 'Courier New', Courier, monospace;font-size: 14px;font-weight: bold;color: blue;}</style></head><body><p>"有规划的人生叫蓝图，没规划的人生叫拼图。"</p></body></html>
文本样式
text-indent,首行缩进text-align，水平对齐text-decoration，文本修饰，underline下划线，line-through中划线text-transform，大小写转换，capitalize只将英文单词首字母转换为大写line-height，行高,顾名思义就是“一行的高度”，而行间距指的是“两行文本之间的距离”，两者是完全不一样的概念。letter-spacing，字母间距word-spacing，词间距文本样式测试
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>JSON王晨</title><style type="text/css">p{font-family: 'Courier New', Courier, monospace;font-size: 14px;text-indent: 28px;}span{text-decoration: underline;font-weight: bold;}#lv{text-align: center;text-transform: uppercase;}</style></head><body><p>"有规划的人生叫蓝图，没规划的人生叫拼图。"</p><p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p><p id="lv">Remember: no pain, no gain！</p></body></html>
边框样式
border-width,宽度
border-style，外观
border-color，颜色
简写方式
border:1px solid red;
列表项符号
list-style-type，针对ol或者ul标签的，常用为list-style-type:none;
list-style-image,定义列表项图片
列表项练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title></title><style type="text/css">ul{list-style-type: none;text-decoration: none;}a{color: pink;}div{width: 150px;height: 300px;border: 1px solid red;}</style></head><body><div><ul><li><a href="" target="_blank">Top1:百度</a></li><li><a href="" target="_blank">Top2:淘宝</a></li><li><a href="" target="_blank">Top3:新浪</a></li><li><a href="" target="_blank">Top4:网易</a></li><li><a href="" target="_blank">Top5:搜狐</a></li></ul></div></body></html>
表格
caption-side,表格标题位置boeder-collapse,表格边框合并border-spacing,表格边框间距图片
图片对齐,text-align是在img的父元素中对齐的文字环绕，float,背景样式
背景颜色，background-color；；color是定义文本颜色背景图片，背景图片位置，在实际开发中，background-position一般用于实现CSS Spirit（精灵图片）设置背景图片练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title></title><style type="text/css">div {width: 1000px;height: 1000px;background-image: url(images/lovefull.png);background-repeat: repeat;}</style></head><body><div></div></body></html>
鼠标样式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title></title><style type="text/css">a{text-decoration: none;color: red;}a:hover{text-decoration: underline;color: blue;}</style></head><body><a href="" target="_blank">字节跳动</a></body></html>
简介盒子模型
content,块元素定义width,height才有意义
padding，
border
margin
简介浮动
float浮动，clear：both清除浮动
使用浮动布局，实现多列布局
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title></title><style type="text/css">#father{width: 820px;height: 620px;}#div1{width: 800px;height: 100px;background-color: blue;margin: 10px;}#div2-1{width: 595px;height: 380px;background-color: purple;float: left;margin:0 0 0 10px;}#div2-2{width: 195px;height: 380px;margin: 0 10px;background-color: purple;float: left;}#div3{width: 800px;height: 100px;margin: 10px;background-color: blue;float: left;}</style></head><body><div id="father"><div id="div1"></div><div id="div2-1"></div><div id="div2-2"></div><div id="div3"></div></div>></body></html>
