CSS-初识

3,523次阅读
没有评论

CSS 应用方式

在标签上

<image src="..." style="height:100px" />
<div style="color:red;">hello world</div>

在 head 标签中写 style 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {color:red;}
    </style>
</head>
<body>
    <h1 class="c1"> 登陆 </h1>
<form method="post" action="/login">
    用户名: <input type="text" name="username">
    密码: <input type="password" name="password">
    <input type="submit" value="提交">
</form>
</body>
</html>

写入文件内

在网页的 <head></head> 标签对中使用 <link> 标记来引入外部样式表文件,使用 html 规则引入外部 css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" herf="static/common.css"/>
</head>
    <body>
        <h1 class="c1"> 登陆 </h1>
        <h1 class="c2">C2</h1>
        <form method="post" action="/login">
            用户名: <input type="text" name="username">
            密码: <input type="password" name="password">
            <input type="submit" value="提交">
        </form>
    </body>
</html>

选择器

ID 选择器

        #c2{color: gold;}
    <div id="c2">america</div>

类选择器

        .c1{color: red;}
    <div class="c1">china</div>

标签选择器

        li{color: blue;}
    <ul>
        <li>beijing</li>
        <li>shanghai</li>
    </ul>

属性选择器

        input[type='text']{border: 2px solid red;}
        .v1[xx="456"]{color: red;}
    <input type="text">
    <input type="password">
    <div class="v1" xx="123">s</div>
    <div class="v1" xx="456">f</div>
    <div class="v1" xx="999">a</div>

后代选择器

        .yy li{color: blue;}
        .yy >a{color: red;}
   <div class="yy">
        <a>hello world</a>
        <div>
            <a>hello hello</a>
        </div>
        <ul>
            <li> 中 </li>
            <li> 日 </li>
            <li> 韩 </li>
        </ul>
    </div>

样式

高度和宽度

     .c1{
            height: 300;
            width: 50%;
      }
注:宽度有百分比 

块级和行内标签

行内和块级都了解,就忽略了,记录下既有行内特性和块级特性的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;
            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <span class="c1">hello world</span>
    <span class="c1">hello world</span>    
</body>
</html>

字体和颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: #008B8B;
            font-size: 18px;
            font-weight: 100px;
            font-family: Microsoft Yahei;
        }
    </style>
</head>
<body>
    <div class="c1"> 中国联通 </div>
    <div> 中国移动 </div>
</body>
</html>

文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 60px;
            width: 300px;
            border: 1px solid red;
            text-align: center; /* 水平方向局中 */
            line-height: 59px;
        }
    </style>
</head>
<body>
    <div class="c1">guozhi</div>
</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>left</span>
        <span style="float: right">right</span>
    </div>
</body>
</html>

使用 div- 浮动后,就会脱离文档流,通过 style=clear: both 恢复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 200px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: blue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both"></div>
    </div>
</body>
</html>

内边距

内部布局设置距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            border: 1px solid red;
            height: 300px;
            width: 200px;
            padding-top: 20px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            /* padding: 20px 10px 5px 20px; 上右下左 */
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: red;"> 听妈妈的话 </div>
        <div>
            小朋友,你是否有很多问号
        </div>
    </div>
</body>
</html>

外边距

外边距,我与别人加距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;background-color: red;"></div>
    <div style="background-color: blue;height: 100px;margin-top: 20px"></div>
</body>
</html>
正文完
 0
评论(没有评论)
验证码