1、字体样式:
1.字体样式
font-family
2.字体大小
font-size
3.字体类型
font-style
4.字体粗细
font-weight
span{font-family: 微软雅黑;font-size:30px;font-weight:bold;font-style:italic;}
1、文本属性:
1.字间距
letter-spacing
2.词间距
word-spacing
3.下划线
text-decoration
4.文本对齐
text-align
5.文本缩进
text-indent
6.文本高度
line-height
7.文本颜色
color
8.文本自动换行
word-break
span{font-family: 微软雅黑;/*letter-spacing: 50px;*//*word-spacing: 50px;*//*text-decoration: underline;*//*text-decoration: overline;*//*text-decoration: line-through;*/}
下划线
span{font-family: 微软雅黑;text-decoration:none;}span:hover{text-decoration: underline;}
对齐
p{/*text-align: left;*//*text-align: right;*/text-align: center;}
首行缩进
p{text-indent: 50px;}
文本高度-居中
background: #888;height:100px;text-align:center;color:#fff;line-height:100px;
文本自动换行
<style>p{background: #888;height:200px;color:#fff;word-break: break-all;}</style></head><body><p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
3、背景样式:
1.背景颜色
background-color
2.背景图片
background-image
3.背景重复
background-repeat
4.背景滚动
background-attachment
5.背景定位
background-position
6.背景样式缩写
background:#888 url(‘bg.png’) no-repeat fixed;
div{height: 300px;background-color: #888;background-image: url('/img/bg.png');background-repeat: no-repeat;background-attachment: fixed;/*background-position: 100px 50px;*//*background-position:center center；*//*background-position:right bottom ；*/background-position:50% 50%;}
背景图的高级应用
<style>*{font-family: 微软雅黑;}div{width:48px;height:48px;background: #888;margin-bottom:5px;}.div1{background-image: url('/img/bd.png');}.div2{background-image: url('/img/bd.png');background-position:0px -50px;}.div3{background-image: url('/img/bd.png');background-position:0px -152px;}.div4{background-image: url('/img/bd.png');background-position:0px -203px;}.div5{background-image: url('/img/bd.png');background-position:0px -255px;}</style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div></body>
background缩写样式
div{height:480px;background: #888 url('/img/bg.png') no-repeat fixed;}
4、边框属性:
1.边框样式
border-style
border-left-style
2.边框宽度
border-width
border-left-width
3.边框颜色
border-color
border-left-color
4.边框缩写
border:2px dotted #f00;
边框样式
div{height:300px;width: 300px;border-style: solid;border-width: 5px;border-color: #f00;}</style></head><body><div ><img src="/img/bg.png"></div>
div{height:300px;width: 300px;border-right-style: solid;border-left-style: solid;border-top-style: solid;border-bottom-style: solid;border-right-width: 5px;border-top-width: 15px;border-left-width: 25px;border-bottom-width: 35px;border-left-color: #f00;border-top-color: #ff0;border-right-color: #0ff;border-bottom-color: #000;}
border-style样式
div{height:300px;width: 300px;/*border-style:solid;实线*//*border-style:dotted;点状边框。在大多数浏览器中呈现为实线*//*border-style:dashed;虚线。在大多数浏览器中呈现为实线*//*border-style:double;双线。双线的宽度等于 border-width 的值*//*border-style:groove;3D 凹槽边框。其效果取决于 border-color 的值*//*border-style:ridge;3D 垄状边框。其效果取决于 border-color 的值*//*border-style:inset;3D inset 边框。其效果取决于 border-color 的值*/border-style:outset;/*3D outset 边框。其效果取决于 border-color 的值*/border-width:10px;border-color:#f00;}</style></head><body><div ><img src="/img/bg.png"></div>
边框缩写
div{height:300px;width: 300px;border: 10px dotted #f00;}
5、鼠标样式:
1.十字
crosshair
2.小手
pointer
3.文本
text
4.等待
wait
5.默认
default
6.帮助
help
小手
pointer
<style>*{font-family: 微软雅黑;}div{width:300px;height:300px;border:2px solid #00f;cursor:pointer;}div:hover{background: #ccc;}</style></head><body><div><img src="/img/aa.png" id='img-id'></div></body><script>imgobj=document.getElementById('img-id');imgobj.onclick=function(){this.src='/img/b.png';}</script>
十字
crosshair
div{width:300px;height:300px;border:2px solid #00f;cursor:crosshair;}
帮助
help
cursor:help;
文本
text
cursor:text;
等待
wait
cursor:wait;
默认
default
cursor:default;
6、列表样式:
list-style:disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha
列表样式制作导航菜单
<style>*{font-family: 微软雅黑;}body{margin:0px;}div{background: #272822;height:50px;}ul{list-style:none;padding:0px;margin:0px;}li{float:left;line-height:50px;margin-left:15px;margin-right:15px;width:100px;text-align:center;}li:hover{background: rgba(200,200,200,0.3);border-radius:10px;}a{text-decoration:none;color:#fff;font-weight:bold;}a:hover{text-decoration:underline;}</style></head><body><div><ul><li><a href="">培训课程</a></li><li><a href="">直播课程</a></li><li><a href="">师资团队</a></li><li><a href="">就业明星</a></li><li><a href="">作品展示</a></li><li><a href="">视频下载</a></li></ul></div></body>
ul{/*list-style:disc;标记是实心圆*//*list-style:circle;空心圆*//*list-style:square;实心方块*//*list-style:decimal;数字*//*list-style:lower-roman;小写罗马数字*//*list-style:upper-roman;大写罗马数字*//*list-style:lower-alpha;小写英文字母*/list-style:upper-alpha;/*大写英文字母*/}
