CSS-初识

发布于 7 天前  13 次阅读


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>