边框样式+文字样式

最新推荐文章于 2020-02-18 22:44:26 发布

honeyws

最新推荐文章于 2020-02-18 22:44:26 发布

阅读量881

点赞数 1

分类专栏： Web前端基础文章标签：边框样式+文字样式

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102831349

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

边框样式

边框样式的属性
设置边框的属性有
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>

honeyws

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
边框样式+文字样式

边框样式边框样式的属性设置边框的属性有border-color 定义边框颜色border-width 定义边框大小border-style 定义边框样式border-left 定义左边框border-right 定义右边框border-top 定义上边框border-bottom 定义下边框边框样式有实线(solid)虚线(dashed)点线(dotted)语法格式&l...
复制链接

扫一扫