边框样式
边框样式的属性 设置边框的属性有 border-color 定义边框颜色 border-width 定义边框大小 border-style 定义边框样式 border-left 定义左边框 border-right 定义右边框 border-top 定义上边框 border-bottom 定义下边框 边框样式有实线(solid)虚线(dashed)点线(dotted)语法格式
<-----<div style=”width:xxxpx; height:xxxpx: background-color:#00f(蓝色) border-right-color:red(红色) border-right-width:5px(任意值) boredr-right-style:solid;(实线)”> 这是定义啦右边框为红色，右边框宽度为5px，边框样式为实线，背景为蓝色。---->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>边框样式</title> </head> <body> <div style="width: 400px; height: 200px; background-color: #00f; border-width: 5px; border-style: solid;"></div> <div style="width: 400px; height: 200px; background-color: burlywood; border-width: 10px; border-style: dashed;"></div> <div style="width: 400px; height: 200px; background-color:cornsilk; border-widht;10px border-style: dotted; "></div> <div style="width: 400px; height: 200px; background-color: red; border-right-color: yellow; border-right-width: 10px; border-right-style: solid;"></div> </body> </html>文字样式
文字样式的属性 设置文字样式的属性有 font-family 定义字体类型 font-size 定义字体大小 font-weight 定义字体粗细 font-style 定义字体样式 color 定义字体颜色语法规则
<p style=”font-family:FangSong ;”></p> 定义仿宋字体 <p style=”font-size:small’”></p> 定义字体small字体大小 <p style=”font-weight:normal;”></p> 定义正常体粗细 <p style=”font-style:italic;”></p> 定义字体样式为斜体 <p style=”color:#00ff00”></p> 定义字体颜色为绿色**
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文字样式</title> </head> <body> <p>我是默认 默认宋体</p> <p style="font-family:KaiTi,FangSong,'SimSun';">这是一段文字</p> <p style="font-family:KaiTi;">我是楷体</p> <p style="font-family: FangSong;">我是仿宋</p> <p style="font-family: SinSun;">我是黑体(默认)</p> <p style="font-size: small;">设置small大小的字体</p> <p style="font-size: meidium;">设置正常大小的字体</p> <p style="font-size: large;">设置large大小的字体</p> <p style="font-weight: normal;">我是正常体(默认)</p> <p style="font-weight: lighter;">较细</p> <p style="font-weight: bold;">较粗</p> <p style="font-weight: bolder;">很粗</p> <p style="font-style: normal;">设置正常样式的字体(默认)</p> <p style="font-style: italic;">设置斜体样式的字体</p> <p style="font-style: oblique;">设置斜体样式的字体</p> <p style="color: red;">设置红色字体</p> <p style="color: #00ff00;">设置绿色字体</p> <p style="color: rgb(0,0,255);"></p> </body> </html>