css插入方式、选择器、文字排版@慕课网原创_慕课网

css插入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css简介和样式插入方式</title>
    <link rel="stylesheet" type="text/css" href="base.css">
    <style type="text/css">
    div
    {
        border:2px solid #DE1E1E;
        margin:2px 2px 2px 2px;
    }
    .divcss
    {
        border:2px dotted #4B95D2;
    }
    .pcss
    {
        color:red; /*颜色*/
        font-family: 宋体;  /*字体*/
        font-size:24px;   /*字号*/
        font-weight: bold;  /*加粗*/
        font-style: italic;   /*斜体*/
        text-decoration: underline;  /*下划线*/
        text-indent: em;   /*首行缩进*/
        line-height: 1em;   /*行高*/
        letter-spacing:10px;   /*字间距*/
    }
    span
    {
        color:blue;
        font-size:24px;
    }
    .divid
    {
        color:#EED71D;
        font-size:24px;
    }
    </style>
</head>
<body>
    <div id="css简介" class="divcss">
        <p class="pcss">
        css全称为“层叠式样式表”。<br/>
        是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言<br/>
        选择符{属性：值}<br/>
        选择符：又称选择器，指明网页中要应用样式规则元素<br/>

    </p>
    </div>

    <div id="样式插入方式" class="divcss">
        <div id="内联式">
        <p>
        一个人可以<span >毫无道理</span>跟你做一辈子亲戚,但一个人不会毫无道理跟你做一辈子朋友
        </p>

        </div>

        <div id="嵌入式">
        <p>
        一个人可以<span >毫无道理</span>跟你做一辈子亲戚,但一个人不会毫无道理跟你做一辈子朋友
        </p>

        </div>

        <div id="外部式">
        <p>
        一个人可以<em>毫无道理</em>跟你做一辈子亲戚,但一个人不会毫无道理跟你做一辈子朋友
        </p>
        </div>

        <div id="优先级" class="divid">
            内联式、嵌入式、外部式都遵循就近原则进行调用。
        </div>
    </div>

</body>
</html>

css选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style type="text/css">
        div
        {
            border:2px dashed #F03A3A;
        }
        *{
            color:#24D1A9;
        }
        h3
        {
            font-style:italic;
            color:red;
        }
        .lei
        {
            color:blue;
            font-weight: bold;
        }
        #idcss
        {
            color: yellow;
            text-decoration: underline;
        }
        .firsta>li
        {
            color: #ACD819;
        }
        .firstb li
        {
            color: #ACD819;
        }
        a:hover
        {
            color:red;
        }
    </style>
</head>
<body>
    <div id="元素选择符">
        <p>
            通配选择符：*{...}<br/>
            使用所有标签。

        </p>
        <p>
            类型选择符：标签名称{...}<br/>
            <h3>这是一个类型选择符</h3>
        </p>

        <p>
            类选择符：.类名{...}<br/>
            这是一个<span class="lei">类选择符</span>
        </p>

        <p>
            ID选择符：#类名{...}<br/>
            这是一个<span id="idcss">ID选择符</span>
        </p>
    </div>

    <div id="关系选择符">
        <ul class="firsta">
            <li>水果</li>
            <ol>
                <li>苹果</li>
                <li>桃子</li>
            </ol>
            <li>电子产品</li>
            <li>，，，，</li>
        </ul>
    </div>

    <div id="关系选择符">
        <ul class="firstb">
            <li>水果</li>
            <ol>
                <li>苹果</li>
                <li>桃子</li>
            </ol>
            <li>电子产品</li>
            <li>，，，，</li>
        </ul>
    </div>

    <div id="伪类选择符">

        <a target="_blank" href="http://www.baidu.com">点击取百度</a>
    </div>
</body>
</html>

文字排版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字排版</title>
    <style type="text/css">
        body
        {
            font-family: 华文行楷;
            font-size:48px;
            color:#20B3E0;
            font-weight:bold;
            font-style:italic;
            text-decoration: underline;
            text-decoration-color: #F31818;
            text-indent:2em;
            line-height: 1.5em;
            letter-spacing: 3px;
        }
    </style>
</head>
<body>
    <div>
        <p>
        当不幸降临在他人头上时，他们往往都能像智者一样劝慰别人；而当同样的不幸降临自己身上时，人往往很难同样地开导自己。人最大的不智不是不知道，而是知道了却迟迟不愿去做，所以平庸却又自怜的人很多。
        </p>
    </div>
</body>
</html>