乐趣区

关于html:HTML基础css样式

jiezi

边框 

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

尺寸 

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

转换: 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
-->

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

背景色: 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
* 备 注:
-->

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

退出移动版