HTML基础-css样式

时间:2020-9-10 作者:admin

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo18-CSS样式-边框</title>
</head>
<body>
    <!--
    属性border-style值
    - none 默认无边框
    - dotted 点线边框
    - dashed 虚线边框
    - solid 实线边框
    - double 两个边框,两个边框间宽度和border-width的值相同

    属性border-width: 设置线条的粗细
    属性border-color: 设置线条颜色

    需求:创建5个p标签
    1. 第一个p标签设置线条为 点状线条, 宽度为1px, 颜色为红色
    2. 第二个p标签设置线条为 虚线, 宽度为2px, 颜色为蓝色
    3. 第三个p标签设置线条为 单实线, 宽度为3px, 颜色为黄色
    4. 第四个p标签设置线条为 双实线, 宽度为4px, 颜色为粉色
    5. 采用简化写法设置边框 1px 单实线 金色
    -->

    <p style="border-style:dotted; border-width:1px; border-color:red;">我是第一个p标签</p>
    <p style="border-style:dashed; border-width:2px; border-color:blue;">我是第二个p标签<br/>我又换行啦</p>
    <p style="border-style:solid; border-width:3px; border-color:yellow;">我是第四个p标签</p>
    <p style="border-style:double; border-width:4px; border-color:pink;">我是第四个p标签</p>
    <p style="border:1px solid gold">我要用简化写法</p>
</body>
</html>

<!--
* 项目描述: 学习CSS 之 CSS样式-边框
* 作 者: chain.xx.wdm
-->

HTML基础-css样式

尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo19-CSS样式-尺寸</title>

    <style>
        div {
        border: 1px dashed red;
        width: 100px;
        height: 100px;
        }
    </style>
</head>
<body>
    <div>我看看尺寸</div>
</body>
</html>

<!--
* 项目描述: 学习CSS 之 CSS样式-尺寸
* 作 者: chain.xx.wdm
* 备 注:
-->

HTML基础-css样式

转换: display

字体: color, font-size

背景色: background-color

布局: float, clear

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。