HTML5教程

html基本认识+文字文本属性+盒子模型+子代选择器

本文主要是介绍html基本认识+文字文本属性+盒子模型+子代选择器，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

　　1.html的基本认识。快速创建页面用!+enter，标签有嵌套关系以及并列关系。标签选择器可以直接选择所有同名的标签，格式为标签名{属性：属性值；}类名选择器类似，且类名可以重复，一个标签可以有多个类名。

 

<!-- 快速创建页面
    1.!+enter -->
<!-- 标签
    1.嵌套关系
    2.并列关系 -->
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/ 1.标签选择器：选择所有同名的标签

格式：标签名{

属性：属性值；

} /

div {

height:200px;

width:200px;

background-color:pink;

}

/ 2.类名选择器：会选择所有相同的类名

格式： .类名{

属性：属性值

}

类名可以重复；

一个标签可以有多个类名；

/
.son </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    width</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 300px</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">
    background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> yellowgreen</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;">
.sson</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">
    background-color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> darkblue</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
<span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>

</head>

<body>

<!-- 嘿嘿嘿

<div style="height: 200px;width:200px;background-color: black;">

<div style="height: 100px;width:100px;background-color:cornflowerblue;"></div>

</div>-->

<div class="son sson"></div>


<div></div>
1111111
</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo"</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span>

</body>

</html>

 

　　2.文字属性。font可以设置文字的各个属性，例如font-size:12px;可以设置字体大小为12，还有font-weight、font-family等指令可设置文字加粗、字体等。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            height: 200px;
            width: 200px;
            background-color: yellowgreen;
            /* 文字属性
                1.font-size 文字大小
                 */
                font-size: 12px;
            /*  2.font-weight 文字加粗
                    bold 加粗 */
                font-weight: bold;
            /*  3.font-family 字体*/
                font-family: "宋体";
        }
    </style>
</head>
<body>
    <div class="demo">
        今天星期二
    </div>
</body>
</html>

 

　　3.文本属性。设置文本对齐方式、行高（文本垂直居中）、字间距等。text-align:center;为居中，左对齐右对齐分别是text-align:left/right;行高设置是line-height:200px;可以通过line-height=height实现文本垂直方向上居中。字间距为word-spacing:40px;。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demo{
            height: 200px;
            width: 500px;
            background-color: pink;
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 1.text-align 文本对齐方式 
                left 左对齐
                center 居中
                right 右对齐</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
        text-align</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">center</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;"> 2.line-height 行高
            line-height=height  实现文本垂直方向上居中</span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
            line-height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 200px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
        <span style="background-color: #f5f5f5; color: #008000;">/*</span><span style="background-color: #f5f5f5; color: #008000;">  3.word-spacing 字间距
            </span><span style="background-color: #f5f5f5; color: #008000;">*/</span><span style="background-color: #f5f5f5; color: #ff0000;">
            word-spacing</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 40px</span><span style="background-color: #f5f5f5; color: #000000;">;</span>
    <span style="background-color: #f5f5f5; color: #000000;">}</span>
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000ff;">&gt;</span>

</head>

<body>

<div class="demo">

主页 热点 新闻 个人中心

</div>

</body>

</html>

 

　　4.盒子模型。标准盒子模型：content(height+width)+padding+border+margin。

　　padding中按照上右下左的顺序设置，例如padding:10px 20px;就是上下10px，左右20px，padding:10px 20px 30px;就是上10左右20下30，padding:10px 20px 30px 40px;上10右20左30右40。

　　margin用法和padding类似，单独改变某一条边的内边距用margin-left/right/top/bottom，例如margin-left:50px;。margin还可以实现水平居中：margin:auto;。同时可以通过margin-top/bottom/left/right来调整自己的位置。

　　border标准写法：border:width style color例如：border:2px solid red;设置某一条边框：border-left/right/top/bottom:10px solid pink;设置某一条边框样式：border-left/right/top/bottom-width/style/color。另：border-top-style:dashed;设置边框为虚线，border-right-style:dotted;设置边框为圆点。border-radius实现边框圆角，

　　border-radius:50%;border-top-left-radius:20px;。

盒子模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fa{
            width: 234px;
            height: 420px;
            padding: 20px 0;
            background-color: #A2A0A0;
            border-top-left-radius:20px;
            border-top-right-radius:20px;
            border-bottom-left-radius:20px;
            border-bottom-right-radius:20px;
        }
        .son{
            width: 204px;
            height: 42px;
            padding-left: 30px;
            /* background-color: red; */
            line-height: 42px;
            color: #ffffff;
            font-size: 14px;
            word-spacing: 120px;
        }
    </style>
</head>
<body>
    <div class="fa">
        <div class="son">手机 ></div>
        <div class="son">电视 ></div>
        <div class="son">笔记 ></div>
        <div class="son">出行 ></div>
        <div class="son">耳机 ></div>
        <div class="son">家电 ></div>
        <div class="son">智能 ></div>
        <div class="son">电源 ></div>
        <div class="son">健康 ></div>
        <div class="son">生活 ></div>
    </div>
</body>
</html>

 

      5.子代选择器。用于选择所有同名的子代，格式：选择器>选择器{属性：属性值}。

.fa>div {
    width: 204px;
    height: 42px;
    padding-left: 30px;
    background-color: red;
    line-height: 42px;
    color: #fff;
    font-size: 14px;
}

 

小技巧：1.div*10快速写出十对<div>

　　　　2.QQ截图ctrl+c可以直接复制颜色色号

To be continued......

这篇关于html基本认识+文字文本属性+盒子模型+子代选择器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航