没什么用 只是个名字 选中一段可以用
<body> 欢迎学习 <span id="title1">java</span> </body>
2. 字体样式
font-family：字体样式
font-size：字体大小
font-weight：字体粗细
color：字体颜色
统一格式：font：oblique（斜体）bold（粗体）大小 样式
1 <!-- 2 font-family：字体样式 3 font-size：字体大小 4 font-weight:字体粗细 5 --> 6 <style> 7 8 body{ 9 font-family: "Adobe Devanagari",隶书; 10 color: brown; 11 } 12 h1{ 13 font-size: 30px; 14 } 15 .p1{ 16 font-weight: bold; 17 } 18 19 </style>
1 <body> 2 <h1>贾斯汀·比伯（Justin Bieber）</h1> 3 <p class="p1"> 4 1994年3月1日出生于加拿大安大略省斯特拉特福市 5 </p> 6 <p> 7 加拿大流行乐男歌手、影视演员 8 </p> 9 10 <p> 11 What do you mean? Ooh <br> 12 When you nod your head yes <br> 13 But you wanna say no <br> 14 What do you mean? Hey <br> 15 When you don't want me to move <br> 16 But you tell me to go <br> 17 What do you mean? <br> 18 Oh, what do you mean? <br> 19 </p> 20 </body>
3.文本样式
颜色：
color：1. rgb 2. rgba（透明度）
排版：
text – align：center 文本居中（left right）左右
text – indent：2em 首行缩进（em文字大小 px像素大小）
行高和块的高度一致才可以上下居中
height 和 line – height
h1{ color: rgba(0,255,255,0.5); text-align: center; } .p1{ text-indent: 2em; } .p3{ background: bisque; height: 30px; line-height: 30px; }
上划线 overline 中划线 line – through 下划线 underline
/*上划线 overline，中划线 line-through，下划线 underline*/ .l1{ text-decoration: underline; } .l2{ text-decoration: line-through; } .l3{ text-decoration: overline; }
a标签去下划线 text – decoration：none
/* a标签去下划线 */ a{ text-decoration: none; }
图片和文字水平对齐
需要将两个元素设为互相参照物
可以用span标签
/* 水平对齐：参照物：a，b*/ img,span{ vertical-align: middle; }
总代码：
1 <body> 2 <a href="">111222333</a> 3 <p class="l1">123123</p> 4 <p class="l2">123123</p> 5 <p class="l3">123123</p> 6 <h1>贾斯汀·比伯（Justin Bieber）</h1> 7 <p class="p1"> 8 1994年3月1日出生于加拿大安大略省斯特拉特福市 9 </p> 10 <p> 11 加拿大流行乐男歌手、影视演员 12 </p> 13 14 <p class="p3"> 15 What do you mean? Ooh <br> 16 When you nod your head yes <br> 17 But you wanna say no <br> 18 What do you mean? Hey <br> 19 When you don't want me to move <br> 20 But you tell me to go <br> 21 What do you mean? <br> 22 Oh, what do you mean? <br> 23 </p> 24 <p> 25 <img src="image/a.png" alt=""> 26 <span>love</span> 27 </p> 28 </body>
4. 超链接伪类
鼠标悬浮显示的颜色：hover
a:hover{
color：
}
/*鼠标悬浮的颜色*/ a:hover{ color: orange; }
鼠标摁住但不点开的颜色
a:active{
color：
}
/*鼠标摁住但不点开的颜色*/ a:active{ color: greenyellow; }
偏移阴影：
text-shadow：阴影颜色，水平偏移，垂直偏移，偏移半径
/*text-shadow:阴影颜色，水平偏移，垂直偏移，偏移半径*/ #people{ text-shadow: #3cc7f5 10px 10px 2px; }
总代码：
<style> /*默认的颜色*/ a{ text-decoration: none; color: black; } /*鼠标悬浮的颜色*/ a:hover{ color: orange; } /*鼠标摁住但不点开的颜色*/ a:active{ color: greenyellow; } /*text-shadow:阴影颜色，水平偏移，垂直偏移，偏移半径*/ #people{ text-shadow: #3cc7f5 10px 10px 2px; } </style> </head> <body> <a href="#"> <img src="../6.%20背景/image/a.png" alt=""> </a> <p> <a href="#">斋藤飞鸟</a> </p> <p> <a href="">来自：日本</a> </p> <p id="people"> loved:999+ </p> </body>
5.列表
首先创建ul-li列表
<body> <div id="nav"> <h2 class="title">全部商品分类</h2> <ul> <li> <a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a> </li> <li> <a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a> </li> <li> <a href="#">电脑</a> <a href="#">办公</a> </li> <li> <a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a> </li> <li> <a href="#">服饰鞋帽</a> <a href="#">个性化妆</a> </li> <li> <a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a> </li> <li> <a href="#">食品饮料</a> <a href="#">保健食品</a> </li> <li> <a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a> </li> </ul> </div> </body>
通过css文件对文字进行更改
background参数：颜色 图片 图片位置 平铺方式（默认是横铺）
.title{ font-size: 18px; font-weight: bold; text-indent: 3em; line-height: 35px; background: antiquewhite; /*颜色，图片，图片位置，平铺方式*/ background: antiquewhite url("../image/2.PNG") 220px -3px no-repeat; }
列表样式：
list-style：none：去掉圆点， circle：空心圆， decimal：数字形式显示， square：正方形形式显示
总代码：
#nav{ width: 250px; background: aliceblue } .title{ font-size: 18px; font-weight: bold; text-indent: 3em; line-height: 35px; background: antiquewhite; /*颜色，图片，图片位置，平铺方式*/ background: antiquewhite url("../image/2.PNG") 220px -3px no-repeat; } /*ul li*/ /* list-style: none 去掉圆点 circle 空心圆 decimal 数字 square 正方形 */ ul{ background: aliceblue; } ul li{ height: 30px; list-style: none; text-indent: 1em; background: aliceblue url("../image/1.PNG") 180px -3px no-repeat; } a{ text-decoration: none; font-size: 14px; color: black; } a:hover{ color: orange; text-decoration: underline; }
6. 背景
默认图片背景全部平铺
background-repeat: no-repeat不平铺
repeat-x横铺
repeat-y竖铺
总代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 8 div{ 9 width: 1000px; 10 height: 700px; 11 border: 1px solid red; 12 background-image: url("image/a.png") ; 13 /*默认全部平铺*/ 14 15 } 16 .div1{ 17 background-repeat: no-repeat ; 18 } 19 .div2{ 20 background-repeat: repeat-x ; 21 } 22 .div3{ 23 background-repeat: repeat-y ; 24 } 25 </style> 26 </head> 27 <body> 28 29 <div class="div1"></div> 30 <div class="div2"></div> 31 <div class="div3"></div> 32 33 34 35 </body> 36 </html>
7. 渐变
在网站上可以设置渐变格式
复制渐变代码
<style> /*径向渐变 圆形渐变*/ body{ background-image: linear-gradient(323deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); } </style>
原文地址：http://www.cnblogs.com/GUGUZIZI/p/16901265.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
