HTML基础-css样式

头像
chain_xx_wdm
    阅读 6 分钟

    边框

    <!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
-->

    image.png

    尺寸

    <!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
* 备 注:
-->

    image.png

    转换: display

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

    <style>
        div {
            border: 2px dotted pink;
        }

        span {
            border: 5px solid black;
        }
    </style>
</head>
<body>

    <!--
    属性display 用于行级元素与行内元素间转换
    1. 将行级元素转换为行内元素 div => span 属性值: inline
    2. 将行内元素转换为行级元素 span => div 属性值: block
    3. 将指定的元素消失 属性值: none 位置也消失
    4. 将指定的元素隐藏 属性visibility-属性值hidden 位置不消失
    -->

    <div id="one" class="mystyle" style="display:inline;">第一个div</div>
    <span id="two" class="mystyle" style="display:block;">唯一的span</span>
    <div id="three" class="mystyle" style="display:none;">第二个div</div>
    <div id="four" class="mystyle" style="visibility:hidden;">第三个div</div>
    <div id="five" class="mystyle">第四个div</div>
</body>
</html>

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

    image.png

    字体: color, font-size

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

<body>
    <a href="#" style="color:red;">第一个超链接</a><br/>
    <a href="#" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif">Number Two</a><br/>
    <a href="#" style="font-size:30px">第三个超链接</a><br/>
    <a href="#" style="text-decoration:none;">第四个超链接</a><br/>
</body>
</html>

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

    image.png

    背景色: background-color

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo23-CSS样式-背景色及背景图片</title>

    <style>

    #div1 {
    width: 200px;
    height: 200px;
    border: 1px dashed red;
    background-color: grey;
    }

    #div2 {
    width: 200px;
    height: 200px;
    border: 1px dotted black;
    background-image: url(img/xi.jpg); /* 需要加url() */
    }

    </style>
</head>
<body>
    <div id="div1"></div>
    <hr/>
    <div id="div2"></div>
</body>
</html>

<!--
* 项目描述: 学习CSS 之 CSS样式-背景色及背景图片
* 作 者: chain.xx.wdm
* 备 注:
-->

    image.png

    布局: float, clear

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

    <style>

    /* div1 设置样式 50 50 red */
    #div1 {
    width: 50px;
    height: 50px;
    background-color: red;
    float: left;
    }

    /* div2 设置样式 100 100 blue */
    #div2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    float: right;
    }

    /* div3 设置样式 150 150 green */
    #div3 {
    width: 150px
    height: 150px;
    background-color: green;
    float: left;
    }
    </style>
</head>
<body>
    <!--
    1.准备工作
    div1 设置样式 50 50 red
    div2 设置样式 100 100 blue
    div3 设置样式 150 150 green

    2.设置浮动
    a. div1 左浮动
    b. div2, div3 左浮动
    c. div2右浮动, div1和div2不浮动
    d. div2右浮动, div1和div3左浮动
    --
    <div id="div1" class="mystyle"></div>
    <div id="div2" class="mystyle"></div>
    <div id="div3" class="mystyle"></div>
</body>
</html>

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

    image.png

    htmlcss
    chain_xx_wdm
    64 声望2 粉丝

    1.领养代替买卖

    « 上一篇
    HTML基础-css选择器
    下一篇 »
    JavaScript基础-概述

    引用和评论

    推荐阅读
    头像
    [解决]ssh: connect to host xxx port 22: Network is unreachable

    chain_xx_wdm赞 1阅读 16.8k

    头像
    网页设计的垂直居中

    寒青赞 39阅读 5k评论 3

    头像
    CSS团队协作规范

    寒青赞 37阅读 4.9k

    头像
    前端开发工具

    寒青赞 18阅读 4.9k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.8k

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.6k评论 3

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1.2k

    0 条评论
    得票最新