Web前端第二季（CSS） - SiKi学院|SiKi学堂 - unity|u3d|虚幻|ue4/5|java|python|人工智能|视频教程|在线课程

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>外边距自动合并</title>
    <style type="text/css">
        .one,.two{
            width:300px;
            height:300px;
        }
        .one{
            background-color: red;
            margin-bottom:30px;
        }
        .two{
            background-color: green;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

上下元素的外边距，采用了更大的30px。红绿色块之间的间隔是30px。

合并外边框，变大，采取最大的那个。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>外边距自动合并</title>
    <style type="text/css">
        .one{
            width:300px;
            height:300px;
        }
        .two{
            width:100px;
            height:100px;
        }
        .one{
            background-color: red;
            margin-top:30px;
        }
        .two{
            background-color: green;
            margin-top:50px;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two"></div>
    </div>
</body>
</html>

都是距离顶部的外边距，采取更大的外边距。so距离顶部是50px

[展开全文]

遗失的星空 · 2022-02-09 · 307-外边距自动合并 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>外边距margin</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            /* margin:10px; */
            width:500px;
            height:500px;
            /* margin:10px 20px 30px 40px;/* 上右下左 
            margin:10px 20px;/* 10 20 
            margin:10px 20px 30px; /* 20 
            padding:10px 20px; */
            margin:0 auto;
        }
        .parent{
            width:500px;
            height:500px;
            background-color:red;
        }
        .child
        {
            width:200px;
            height:100px;
            background-color:green;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">

        </div>
    </div>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

外边距
margin : 0.25in;
margin : 10px 0px 15px 5px;上右下左
margin : 10%; 按照父元素的width来计算百分比
margin: 0.5em 1em; 值复制
margin-left...
margin:auto;左右居中

外边框自动合并

[展开全文]

遗失的星空 · 2022-02-09 · 306-盒子模型的外边距 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>内边距padding</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            margin:0px;
            width:500px;
            height:500px;
            /* padding:10px; /* 1em|xx% */ /* 百分比相对于父元素的width来计算的 */
            /* padding-top:20px;
            padding-right:10px;
            padding-bottom:15px;
            padding-left:5px; */
            padding:10px 20px 30px 40px;/* 上右下左 */
        }
    </style>
</head>
<body>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

内边距
padding: 10px;
padding: 10px 0.25em 2ex 20%;上右下左

padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
注意：
百分比是相对于父元素的width来计算的。

[展开全文]

遗失的星空 · 2022-02-09 · 305-盒子模型的内边距 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            margin:0px;
            width:50%;/* 相对于父元素来说 */
            height:50%;
        }
    </style>
</head>
<body>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

高宽
width:90px;
width:50%;相当于父元素的width来计算。
height:90px;
height:80%;

[展开全文]

遗失的星空 · 2022-02-09 · 304-盒子模型的高宽 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{
            margin:0px;
            padding:0px;
        }
        p{
            margin:0px;
        }
    </style>
</head>
<body>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <p>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </p>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
    <div>
        一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
    </div>
</body>
</html>

[展开全文]

遗失的星空 · 2022-02-09 · 303-p标签和盒子模型 0

酒盒举例
对应网页中的盒子模型 http://www.w3school.com.cn/css/css_boxmodel.asp
盒子三要素：内边距，外边距和边框。（内边距和外边距也就是内填充和外填充）
内边距：padding 外边距：margin 边框：border
高宽指的是内容的高宽 width height

盒子宽度计算
width+(padding+border+margin)*2

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>基本盒子</title>
    <style type="text/css">
        body{
            padding:0px;
            margin:0px;
        }
        div{
            width:300px;
            height:300px;
            border:10px solid;
            padding:20px;
            margin:30px;
        }
    </style>
</head>
<body>
    <div>
        1111122223333444444555556666
    </div>
    eqwqweqweqweqw
</body>
</html>

[展开全文]

遗失的星空 · 2022-02-09 · 302-块元素和盒子模型 0

[展开全文]

遗失的星空 · 2022-02-09 · 301-什么是盒子模型 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style type="text/css">
        .one{
            display: block;
        }
        .three{
            display:inline;
        }
    </style>
</head>
<body>
    <span class="one">第一个</span>
    <span class="two">第二个</span>
    <div class="three">第三个</div>
</body>
</html>

css中的单位
第一种：px像素，显示大小收到显示器分辨率的影响。
第二种：相对大小em : https://www.w3cplus.com/css/px-to-em
em是相对大小1em就是相当于父元素大小的1倍。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

块级元素和行内元素
display:linline block;

[展开全文]

遗失的星空 · 2022-02-09 · 208-css中的单位 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style type="text/css">
        ul{
            list-style-type:square;/* disc实心圆; circle空心圆; square实心正方形; none无样式 */
            list-style-image:url(img/html-tags2.png);
        }
        .one{
            /* list-style-position:outside; */
            list-style:none url(img/html-tags2.png) inside;
        }
        .two{
            list-style-position:inside;
        }
        ol{
            list-style-type:lower-alpha;/* decimal数字; lower-roman小写罗马数字; upper-roman大写罗马数字; lower-alpha小写字母;  */
            list-style-image:url(img/html-tags2.png);
        }
    </style>
</head>
<body>
    <ul class="one">
        <li>多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）</li>
        <li>网络编程（UDP TCP Socket）</li>
        <li>枚举类型</li>
        <li>类的加载机制和反射（Reflect）</li>
    </ul>
    <ul class="two">
        <li>多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）多线程（Thread Runnable）</li>
        <li>网络编程（UDP TCP Socket）</li>
        <li>枚举类型</li>
        <li>类的加载机制和反射（Reflect）</li>
    </ul>
    <ol>
        <li>多线程（Thread Runnable）</li>
        <li>网络编程（UDP TCP Socket）</li>
        <li>枚举类型</li>
        <li>类的加载机制和反射（Reflect）</li>
    </ol>
</body>
</html>

列表
ul
list-style-type:circle; none square http://www.w3school.com.cn/cssref/pr_list-style-type.asp
ul li
list-style-image:url(xxx.jpg);
ul
list-style-position:inside;

ul {list-style : url(example.gif) square inside}

[展开全文]

遗失的星空 · 2022-02-09 · 207-有序和无序列表相关属性设置 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        /* body{
            font-size:10px;
        } */
        div{
            /* font-family:"幼圆","微软雅黑","宋体";
            font-size:2em;/*small larger 1em 20px
            color:rgb(255,0,0);/*red #addddd
            font-style:oblique;/* italic斜体 oblique倾斜 
            font-weight:lighter;100-900|bolder|lighter 字体粗细 */
            font:oblique bold 20px "幼圆";
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

字体
font-family:"楷体","幼圆","黑体";
font-size:12px; 2em
color:rgb(255,255,255); #000000 red;
font-style:normal;italic 斜体显示 oblique 倾斜显示(区别不明显)
font-weight:normal; bold bolder lighter 100~900
font-variant:small-caps; 小型大写字母
简写
font:"楷体" 20px
书写顺序：http://www.w3school.com.cn/cssref/pr_font_font.asp

[展开全文]

遗失的星空 · 2022-02-09 · 206-字体的其他设置 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
    <style type="text/css">
        /* body{
            font-size:10px;
        } */
        div{
            font-family:"幼圆","微软雅黑","宋体";
            font-size:2em;/*small larger 1em 20px*/
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

[展开全文]

遗失的星空 · 2022-02-09 · 205-css样式字体和字体大小 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style type="text/css">
        div{
            text-indent:2em;/* 字体设置大小*2 */
            text-align:justify;/* center|justify|left|right */
            color:blue;
            word-spacing:20px;/* 通过空格是否设置间距 *//* 英文单词之间的间距；不会设置中文字之间的间距，例外的话，中文之间有空格，会设置；通过空格来区分单词。 */
            text-decoration:underline;/* blink闪烁; line-through叫中线; overline叫文字上面的线; underline叫底部的线 */
            line-height:30px;
        }
        p{
            text-indent:2em;
            text-align:left;
            /* letter-spacing:20px; */
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

[展开全文]

遗失的星空 · 2022-02-09 · 204-css样式设置文本二 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style type="text/css">
        div{
            text-indent:2em;/* 字体设置大小*2 */
            text-align:justify;/* center|justify|left|right */
            color:blue;
            word-spacing:20px;/* 通过空格是否设置间距 *//* 英文单词之间的间距；不会设置中文字之间的间距，例外的话，中文之间有空格，会设置；通过空格来区分单词。 */
        }
        p{
            text-indent:2em;
            text-align:left;
        }
    </style>
</head>
<body>
    <div>
        HTML的 英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </div>
    <p>
        HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
    </p>
</body>
</html>

文本
text-indent: 5em;缩进
text-align:left; right center justify文本对齐
不止可以设置文本居中，还可以设置图片等其他内容，其他东西的对齐，使用别的方式
word-spacing:10px; 字间隔（单词）
letter-spacing:10px;字母间隔
text-decoration:none;underline overline line-through blink 文本装饰
line-height:20px; em 或者百分比

[展开全文]

遗失的星空 · 2022-02-09 · 203-css样式设置文本 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">    
    <title>css样式设置背景颜色</title>
    <style type="text/css">
        body{
            background-color:transparent;
        }
        .one{
            width:800px;
            height:2000px;
            /* background-color:aqua;
            background-image:url(img/api.jpg);
            background-repeat:no-repeat;
            background-position:right top;
            background-position:30px 10px;
            background-attachment:fixed; */
            background:aqua url(img/api.jpg) no-repeat right top fixed;
        }
        /* .two{
            width:800px;
            height:2000px;
            background: green;
        } */
    </style>
</head>
<body>
    <div class="one">
        1sdfssjajdfaldfjoaldfladfls
        www.w3school.com.cn/cssref/pr_background.asp
    </div>
    <!-- <div class="two">
        1sdfssjajdfaldfjoaldfladfls
    </div> -->
</body>
</html>

同时设置了right top 和 fixed 就是以浏览器为基准。

[展开全文]

遗失的星空 · 2022-01-28 · 202-css样式设置背景图片 0

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">    
    <title>css样式设置背景颜色</title>
    <style type="text/css">
        body{
            background-color:transparent;
        }
        .one{
            width:500px;
            height:500px;
            background-color:aqua;
        }
    </style>
</head>
<body>
    <div class="one">
        1
    </div>
</body>
</html>

[展开全文]

遗失的星空 · 2022-01-28 · 201-css样式设置背景颜色 0

其他选择器
1，群组选择器
多个选择器应用同一组样式，多个选择器之间用逗号隔开。
p,h1,h2,.c1,.c2,#id{}
2，全局选择器
*{} 对所有html元素有效
3，后代选择器
标签1 标签2{}
选择器标签2{}
控制标签1下面的标签2的样式。（对标签1下面的其他标签不影响）
4，属性选择器
标签名[属性名=‘属性值’]{}
控制标签相同属性相同的元素的样式。
5，伪类选择器
超链接有四种状态，不同状态下的样式怎么设置？
a:link {color: #FF0000}       /* 未访问的链接 */
a:visited {color: #00FF00}   /* 已访问的链接 */
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接（点击鼠标不松开） */
和CSS类搭配
.red : visited {color: #FF0000}
注意1：
link和visited时候超链接的伪类
hover和active不止可以对超链接使用，别的html元素也可以
注意2：
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类（选择元素的第一个子元素）

使用F12工具查看网页指定部分的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /* a{
            color:green;
        } */
        a:link{
            color:yellow;
        }
        a:visited{
            color:burlywood;
        }
        a:hover{
            color:red;
            font-size:30px;
        }
        a:active{
            color:#008000;
            font-size:10px;
        }
        .one:link{
            color:blue;
            font-size:12px;
        }
        .one:visited{
            color:pink;
            font-size:10px;
        }
        img:hover{
            width:300px;
        }
        img:active{
            width:200px;
        }
        /* div:first-child{
            color:blue;
        }
        span:first-child{
            color:green;
        } */
        .one{
            color:blue;
        }
    </style>
</head>
<body>
    <div>我是body的第1个孩子</div>
    <!-- 1，正常状态；2，鼠标移上；3，鼠标按下，不抬起；4，被点击过，被打开过 -->
    <a href="https://www.baidu.com">GoTo百度</a>
    <a href="http://www.sikiedu.com" class="one">SiKi学院</a>
    <a href="https://www.taobao.com">淘宝</a>
    <img src="img/640.jpg" />
    <div class="one">
        <span>我是第1个孩子
            <span>我是第1个孙子</span>
        </span>
        <span>我是第2个孩子</span>
    </div>
</body>
</html>

[展开全文]

遗失的星空 · 2022-01-07 · 112-其他伪类 0

5，伪类选择器
超链接有四种状态，不同状态下的样式怎么设置？
a:link {color: #FF0000}       /* 未访问的链接 */
a:visited {color: #00FF00}   /* 已访问的链接 */
a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接（点击鼠标不松开） */
和CSS类搭配
.red : visited {color: #FF0000}
注意1：
link和visited时候超链接的伪类
hover和active不止可以对超链接使用，别的html元素也可以
注意2：
超链接伪类顺序
link visted hover active
其他伪类
:first-child 伪类（选择元素的第一个子元素）

使用F12工具查看网页指定部分的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        /* a{
            color:green;
        } */
        a:link{
            color:yellow;
        }
        a:hover{
            color:red;
            font-size:20px;
        }
        a:active{
            color:#008000;
            font-size:10px;
        }
        a:visited{
            color:burlywood;
        }
    </style>
</head>
<body>
    1，正常状态；2，鼠标移上；3，鼠标按下，不抬起；4，被点击过，被打开过
    <a href="https://www.baidu.com">GoTo百度</a>
    <a href="https://www.sikiedu.com?564452152">SiKi学院</a>
    <a href="https://www.taobao.com">淘宝</a>
</body>
</html>

[展开全文]

遗失的星空 · 2022-01-07 · 111-伪类选择器 0

使用F12工具查看网页指定部分的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>选择器变形</title>
    <style type="text/css">
        /* 后代选择器 */
        div p{
            font-size:20px;
        }
        div p span{
            color:#0000FF;
        }
        div.one{
            color:red;
        }
        .two{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div><div>我是第1个div标签里面的内容<p>我是<span>p标签</span>里面的内容</p></div></div>
    <div class="one two">我是第2个div标签里面的内容</div>
    <div class="one">我是第3个div标签里面的内容</div>
    <p class="one">我是p标签里面的内容</p>
</body>
</html>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>其他选择器</title>
    <style type="text/css">
        /* div{
            font-size:30px;
            color:blue;
        }
        span{
            font-size:30px;
            color:blue;
        }
        p{
            font-size:30px;
            color:blue;
        } */
        
        /* 1，群组选择器 */
        /* div,span,p,.one,#header{
            font-size:30px;
            color:blue;
        } */
        
        /* 2，全局选择器 */
        /* *{
            color:green;
            font-family:宋体;
        } */

        /* 3，属性选择器 */
        input[type="text"]{
            background-color:yellow;
        }
    </style>
</head>
<body>
    <div>我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <span>我是第1个span标签里面的内容</span>
    <span>我是第2个span标签里面的内容</span>
    <span>我是第3个span标签里面的内容</span>
    <p>我是第1个p标签里面的内容</p>
    <p>我是第2个p标签里面的内容</p>
    <p>我是第3个p标签里面的内容</p>
    <input type="text" />
    <input type="password" />
</body>
</html>

[展开全文]

遗失的星空 · 2022-01-07 · 110-其他三种选择器 0

优先级 id选择器 > 类选择器 >标签选择器
其他时候：就近原则

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">    
    <title>选择器的优先级</title>
    <style type="text/css">
        /* id选择器 优先于> 类选择器 优先于> 标签选择器*/
        div{
            font-size:30px;
        }
        .one{
            font-size:10px;
        }
        #header{
            font-size:20px;
        }
    </style>
</head>
<body>
    <div class="one" id="header">我是第1个div标签里面的内容</div>
    <div>我是第2个div标签里面的内容</div>
    <div>我是第3个div标签里面的内容</div>
    <p>我是p标签里面的内容</p>
</body>
</html>

[展开全文]

遗失的星空 · 2022-01-07 · 109-选择器的优先级 0

使用F12工具查看网页指定部分的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>选择器变形</title>
    <style type="text/css">
        div p{
            font-size:20px;
        }
        div p span{
            color:#0000FF;
        }
        div.one{
            color:red;
        }
        .two{
            font-size:30px;
        }
    </style>
</head>
<body>
    <div><div>我是第1个div标签里面的内容<p>我是<span>p标签</span>里面的内容</p></div></div>
    <div class="one two">我是第2个div标签里面的内容</div>
    <div class="one">我是第3个div标签里面的内容</div>
    <p class="one">我是p标签里面的内容</p>
</body>
</html>

[展开全文]

遗失的星空 · 2022-01-07 · 108-选择器的变形 0

授课教师

课程特色

最新学员

学员动态

UnityA计划

虚幻A计划

JavaA计划

PythonA计划

微信小程序A计划