HTML-常用CSS解析

来源：互联网发布：烟袋斜街10号网络剧9 编辑：程序博客网时间：2024/06/05 02:15

Div和Span演示效果

Div效果演示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>div效果演示</title>        <style>            div{                border: 1px solid red;                /*width: 400px;                height: 200px;*/            }        </style>    </head>    <body>        <div id="">            <!--samuelandkevin-->        </div>        samuelandkevinAAA    </body></html>

span演示

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>span演示</title>        <style>            span{                font-size: 30px;            }        </style>    </head>    <body>        <span>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！        </span>    </body></html>

元素选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>元素选择器</title>        <style>            div{                font-size: 30px;                color: pink;            }        </style>    </head>    <body>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55        </div>    </body></html>

类选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>类选择器</title>        <style>            .div2{                font-size: 30px;                color: gold;            }        </style>    </head>    <body>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11        </div>        <div class="div2">            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33        </div>        <div class="div2">            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55        </div>    </body></html>

id选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>id选择器</title>        <style>            #div5{                font-size: 30px;                color: yellow;            }        </style>    </head>    <body>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11        </div>        <div class="div2">            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33        </div>        <div class="div2">            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44        </div>        <div id="div5">            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55        </div>    </body></html>

层级选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>层级选择器</title>        <style>            div p{                font-size: 30px;                color: green;            }        </style>    </head>    <body>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33        </div>        <div>            <p>                逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44            </p>        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55        </div>        <p>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66        </p>    </body></html>

属性选择器

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>属性选择器</title>        <style>            input[type='text']{                background-color: red;            }            input[type='password']{                background-color: blue;            }        </style>    </head>    <body>        用户名；<input type="text" name="username"/><br />        密码：<input type="password" name="password"/>    </body></html>

CSS的引入方式

1.内部引入

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>元素选择器</title>        <style type="text/css">            div{                font-size: 30px;                color: pink;            }        </style>    </head>    <body>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55        </div>    </body></html>

2.行内引入

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>元素选择器</title>        <style type="text/css">            div{                font-size: 30px;                color: pink;            }        </style>    </head>    <body>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44        </div>        <div style="font-size: 20px;color: blue;">            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55        </div>    </body></html>

3.外部引入

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>元素选择器</title>        <link rel="stylesheet" href="style.css" type="text/css"/>    </head>    <body>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44        </div>        <div>            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55        </div>    </body></html>

阅读全文

0 0