css美化页面
如果在我们一行文字中，想让某个文字凸显出来，使用span！
1.字体样式
??font-style:字体的风格 ??italic ?normal
??font-weight:字体的粗细 ??normal(默认400) bold(700) ?bolder ?最大到900
??font-size:字体的大小 ??10px ?2em ??rem ?pc ?pt
??font-family:字体的类型，比如我们的楷体，隶书,宋体。。。。。
??font：风格 粗细 大小 类型
???在一起设置属性的时候，四种属性顺序不能颠倒！
2.文本样式
??????color:文本颜色 red ?16进制颜色码 ?rgb ??rgba
????????????rgb(red,green,blue)正数取值 0-255
????????????rgba(red,green,blue,alpha)
????????????alpha的取值必须是0-1 ?0不显示 ?1正常显示
?text-align:文本元素的水平对齐方式
???????????center ?left ?right ?justify(两端对齐)
?line-height:文本的行高!
??????如果想设置文本的垂直居中line-height的值必须等于height的值
?text-indent:设置首行缩进
????????????????p{
?????????????????text-indent:2em; 设置p首行缩进2个字符
??????????????????}
?text-decoration:文本的装饰
??????????none:默认值
?????underline:下划线
??????overline:上划线
??line-through:删除线
???text-shadow:文本阴影
3.display ?可以实现 块元素和行内元素的互换！
??inline inline-block ?block
4.超链接伪类
??结构伪类选择器：
?????div:nth-of-type() ?:nth-child
??css伪类是一个特殊的类！ 它针对于我们设置的css选择器起作用！
??css伪类的语法：
??????选择器:伪类名｛
????????????????????属性:属性值;
????????????????????｝
?:link ????==> 还没有点击超链接的样式
?:visited ?==> 点击之后超链接的样式
?:hover ???==> 鼠标悬停在超链接的样式
?:active ??==> 鼠标点击未释放超链接的样式
love ?hate
如果同时给一个选择器设置超链接伪类样式，那么顺序是必须不变的！
5.列表样式
?list-style-type ??列表符号样式
?????none ???无符号
?????disc ???实心圆
?????circle ?空心圆
?????decimal 数字 ?.....
?list-style-image ?列表图片 ?url
?list-style-position 列表符号是否被li包含，默认是ul包含
?list-style ???????列表样式
如果同时设置了type和image ?那么image会覆盖type！和书写先后顺序没关系！
6.背景样式
???background-color:背景色
???background-image:背景图片
???background-position:背景位置
???background-repeat:背景重复方式
???????repeat:默认方式 水平和垂直都平铺
???????no-repeat:不平铺，只有一个图片
???????repeat-x:水平平铺
???????repeat-y:垂直平铺
???background: 背景色 背景图片 背景位置 ?平铺方式
???虽然没有固定顺序，但是我们有个默认的写法！
如果我们相对背景图片的大小进行设置！那么请使用background-size
background-size:contain;
??????????background-size：背景图片的尺寸
???????????auto:默认值，使用图片的大小
???????????cover:让整个图片正好填充整个盒子
???????????contain：让图片自动的方法或者缩小 适应盒子的大小
???????????percentage：使用百分比 ?手动的校正图片在盒子中的大小
7.渐变属性
?linear-gradient:(方向,color1,color2)
???????????????to top :方向
???????????????red:第1个颜色
???????????????black:第2个颜色
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>span标签</title> ????<!--span标签 ??????想让某些文字凸显出来 ????--> ???<style type="text/css"> ??????div:first-child span{ ???????????color: red; ???????} ??????div:last-child span{ ???????????color: green; ???????} ??????/*同时设置body中的子元素span的风格 粗细 大小 类型*/ ???????body>span{ ???????????font: oblique bold 50px "楷体"; ???????????color: red; ???????} ???????????</style></head><body> ?<div><span>今天</span>是个好日子！</div> ?<div><span>明天</span>也是个好日子！</div> ?<span>a</span>bcdefg</body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>字体样式</title> ???<style type="text/css"> ???????div{ ???????????/*01.设置字体的类型*/ ???????????font-family:"楷体" ; ???????????/*02.设置字体的风格*/ ???????????font-style: italic; ???????????/*03.设置字体的大小 ???可以设置数值*/ ???????????font-size:small; ???????????/*04.设置字体的粗细 可以设置数值*/ ???????????font-weight: bold; ???????} ???????/* ?简写方式==》同时设置 字体的 风格,粗细,大小 ，类型 ??顺序不能发生变化*/ ???????span{ ??????????font:italic bolder 60px ?"楷体"; ???????} ???</style></head><body><div><span>今天</span>是个好日子！</div><div><span>明天</span>也是个好日子！</div></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>display属性</title> ???<!-- 实现 块元素和 内联元素的相互转换 --> ???<!-- 需求： ???01.设置块元素2和3 在一行显示 ???02.设置块元素2和3 ?的边框和宽度 高度 ==>因为已经变成了内联元素 所以宽度 高度 无效 ???03.我们想块元素2和3 在一行显示 ?但是 ?还能设置 宽度 高度 ?？？？display: inline-block; ???04.把内联元素3 ?变成块元素 ?并且设置 ?宽度 高度 ???--> ???<style type="text/css"> ??????div:nth-of-type(2),div:nth-of-type(3){ ??????????/* display: inline; ?内联元素*/ ??????????display: inline-block; /* ??行内块元素*/ ??????????border: 1px solid red; ??????????height: 50px; ??????????width: 50px; ??????} ??????span:nth-child(3){ ???????????border: 1px solid red; ???????????display:block;/*块元素*/ ???????????height: 50px; ???????????width: 50px; ???????} ???</style></head><body> ?<span>内联元素1</span> ?<span>内联元素2</span> ?<span>内联元素3</span> ?<div>块元素1</div> ?<div>块元素2</div> ?<div>块元素3</div></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>文本样式</title> ???<style ?type="text/css"> ????/* 01.设置文本的颜色 ??????RGB： ?red ?green ?blue ??????rgb(red ,green,blue) ?每个颜色的数值范围是0-255 ??????rgba(50,100,50,0.2) 最后一个参数 ?设置透明度 alpha 取值是0-1 ??????16进制的颜色码 #020202 ???????前两位代表R的分量 ???????中间两位代表G的分量 ???????后两位代表B的分量 ???????02.设置文本的对齐方式 ?????????text-align ?center ?right ?left ???????03.设置文本的垂直居中 ??????????我们设置的line-height的值要和 盒子的 height属性值一致！ ???????04.文本的装饰 ????????????text-decoration: line-through; ?删除线 ????????????text-decoration: underline; ?下划线 ????????????text-decoration: overline; ?上划线 ???????05.文本的阴影 ?????????text-shadow:red ?2px ?3px 1px ; ?????????red:阴影的颜色 ?????????2px：x轴的位移 ?????????3px：y轴的位移 ?????????1px：阴影的模糊范围 ?值越小 ?看到的文本越清晰 ????*/ ????div{ ????????/*color: rgb(50,100,50);只是设置文本颜色*/ ????????color: rgba(50,100,50,0.8); /*设置颜色的同时设置透明度*/ ????????text-align: left;/*水平居中方式*/ ????????text-indent: 2em;/*首行缩进*/ ????????border: 1px solid red; ????????height: 100px; ????????line-height:100px ; ?/*行高*/ ????????text-decoration: underline; ????????text-shadow:red ?2px ?2px 1px ;/*文本的阴影*/ ????} ???</style></head><body> ??<div>现价 ?500</div> ??<div>原价 ?900</div></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>超链接伪类</title> ???<!-- ?????a:link ???????我们还没有访问超链接时的样式 ?????a:visited ????访问之后超链接的样式 ?????a:hover ??????鼠标悬停在超链接上的样式 ?????a:active ?????鼠标点击未释放 ??????顺序一定不能有误！ ???--> ???<style type="text/css"> ???????a:link{ ???????????color: red; ???????} ???????a:visited{ ???????????color: greenyellow; ???????} ???????a:hover{ ???????????color: deeppink; ???????} ???????a:active{ ???????????color: yellow; ???????} ???????div[id="haha2"]:hover{ ???????????color: red; ???????????text-shadow: pink 2px 2px 1px; ???????} ???????span:hover{ ???????????background: red; ???????} ???</style></head><body><span>haha</span> ?<a href="#">大家辛苦了！</a><div id="haha">哈哈</div><div id="haha1">哈哈1</div><div id="haha2">哈哈2</div></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>列表样式</title> ???<style type="text/css"> ???????/*01.去掉列表前面实心圆点 ??????????list-style-type: none; ?????????list-style-type:设置前面默认的样式 ??????????????????02.把默认的小圆点换成图片 ???????????list-style-image: url("../images/a.jpg"); ????????03.设置li和图标的关系 ??????????li是否包含前面的小图标 ??????????*/ ???????li{ ???????????list-style-position: inside; ?????????/* ?list-style-image: url("../images/a.jpg"); ???????????list-style-type: disc;*/ ???????} ???</style></head><body> ?<ul> ?????<li>第1项</li> ?????<li>第2项</li> ?????<li>第3项</li> ?????<li>第4项</li> ?</ul></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>背景样式</title> ??<style type="text/css"> ??????div{ ??????????border: 1px solid red; ??????????height: 200px; ??????????width: 200px; ??????????background-color: aqua; /* 01.给div增加背景颜色*/ ??????????background-image: url("../images/b.png"); /* 02.给div增加背景图片 ??图片会把颜色覆盖，其实颜色在图片后面*/ ??????????background-repeat: no-repeat;/*03.设置图片的填充方式*/ ??????????/* ?background-position: 20px 10px;04.设置图片定位 ?设置size时 需要 注释*/ ?????????/* background:color ?image ?position repeat ; ?简写的规范*/ ??????????/* ???????????background-size:contain; ??????????background-size：背景图片的尺寸 ???????????auto:默认值，使用图片的大小 ???????????cover:让整个图片正好填充整个盒子 ???????????contain：让图片自动的方法或者缩小 适应盒子的大小 ???????????percentage：使用百分比 ?手动的校正图片在盒子中的大小 100%; ??????????*/ ??????} ??</style></head><body> ???<div></div></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>渐变属性</title> ???<!-- ?????01.线性渐变 ?????????颜色按照从上到下或者从左到右 等顺序发生的变化 ?????02.径向渐变 ???????不是按照直线的顺序！ 圆形，椭圆！从一个点向所有的方向混合！ ???--> ???<style type="text/css"> ???????div{ ???????????border: 1px ?solid red; ???????????height: 200px; ???????????width: 200px; ???????????background: linear-gradient(to left top,red,green); ???????????/* ?to top :方向 ???????????????red:第1个颜色 ???????????????black:第2个颜色IE浏览器是Trident内核，加前缀：-ms-Chrome浏览器是Webkit内核，加前缀：-webkit-Safari浏览器是Webkit内核，加前缀：-webkit-Opera浏览器是Blink内核，加前缀：-o-Firefox浏览器是Mozilla内核，加前缀：-moz- ???????????????*/ ???????} ???</style></head><body><div></div></body></html>css美化页面
原文地址：http://www.cnblogs.com/wwlw/p/7773269.html