Web_5 CSS样式

一、知识框架

CSS样式内容框架

框-讲解图

框解析图

行框

二、代码

test.html

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./style.css">
    
</head>

<body>
    <h1>Hello world</h1>
    <h2>hh</h2>
    <h3>h3</h3>
    <p>Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Et voluptatum officiis, saepe totam amet,
        ratione id possimus enim libero quae aliquam inventore dolorem
        porro omnis cumque incidunt debitis cum modi.
    </p>
    <div>Lorem ipsum dolor sit amet,
        consectetur adipisicing elit.
        Et voluptatum officiis, saepe totam amet,
        ratione id possimus enim libero quae aliquam inventore dolorem
        porro omnis cumque incidunt debitis cum modi.
    </div>
    <div id="logo">LOGO</div>
    <div class="red bold">
        AAA 
    </div>
    <p class="red">CCC</p>
    <div class="green bold">
        BBB
    </div>
    <button title="点击此处登录">登录</button>
    <button>注册</button>
    <a title="点击跳转淘宝" href="https://taobao.com">taobao</a>
    <div class="a">a
        <div class="b">b
            <div class="c">c

            </div>
        </div>
    </div>
    <div class="z">z</div>
    <div class="x">x</div>
    <div class="c">c</div>
    <a href="https://www.baidu.com">百度</a>
    <a href="https://www.jianshu.com">简书</a>
    <input type="text">
    <button>点我</button>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        Nulla, aspernatur earum? Tempora quas saepe dolore corrupti id. 
        Quaerat, ducimus. Modi ad dolor, 
        qui atque veritatis deserunt nihil dignissimos. 
        Veritatis, laborum.</p>
    <div class="block">块级元素</div>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        <div class="inline">行内元素</div>
        Nulla, aspernatur earum? Tempora quas saepe dolore corrupti id. 
        Quaerat, ducimus. Modi ad dolor, Nulla, aspernatur earum? Tempora quas saepe dolore corrupti id. 
        Quaerat, ducimus. Modi ad dolor, 
        <div class="inline-block">行内块级元素</div>
        qui atque veritatis deserunt nihil dignissimos. 
        Veritatis, laborum.
    </p>
    <div class="box">abc</div>
</body>

</html>

style.css

body{
    margin:0;
}
/*元素选择器*/
h1, h2 {
    color:gray;
    background:black;
}
/*类选择器*/
.red{
    color:red;
}
.green{
    color:green;
}
.bold{
    font-weight:900;
}
.red.bold{
    border:2px solid black;
}
/*ID选择器*/
#logo{
    color:gray;
}
/*属性选择器*/
[title]{
    color:gray;
}
[title="点击跳转淘宝"]{
    border: 2px solid black;
}
[title^="点击"]{
    border: 2px solid black;
}
div{
    padding:10px;
    background:rgba(255,0,0,0.2);
    margin:5px;
}
/*后代选择器*/
.a .b{
    border:2px solid black;
}
/*相邻选择器*/
.z + div{
    background:rgba(0,0,255,.2);
}
/*通用相邻选择器*/
.z ~ div{
    background:rgba(0,0,255,.2);
}
/*伪类 用:表示*/
a:link{
    color:blue;
}
a:visited{
    color:red;
}
button:hover{
    background:#eee;
}
input:focus{
    background:rgba(0,255,0,0.2);
}
/*伪元素选择器*/
p:first-letter{
    font-size:50px;
}
/*字体属性*/
p{
    font-family:"微软雅黑"; /*字体*/
    font-weight:bold; /*粗细 100-900 */
    font-size:14px;
    text-align: justify; /*left right justify center */
    line-height:1.2; /*行高：用比例或像素指定*/
    text-decoration: underline; /*文字装饰*/
}
.block{
    display:block;
    background:#80ffff;
}
.inline{
    display:inline;
    background:rgba(0,255,255,0.2);
    margin:20px;
}
.inline-block{
    display:inline-block;
    background:rgba(109, 88, 202, 0.2);
    margin:20px;
}
.box{
    background:#000;
    padding:10px;
    width:300px;
    height:300px;
    border:2px solid #777;
    margin:20px;
}

最后编辑于：2020.01.07 10:28:31

Web_5 CSS样式

一 、知识框架

二、代码

test.html

style.css

一、知识框架