Web_5 CSS样式

一 、知识框架

CSS样式内容框架

框-讲解图

框解析图

行框

二、代码

test.html

    
    
    
    
    
    
    



    
Hello world
    
hh
    
h3
    
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.
    
    
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.
    
    
LOGO
    

        AAA 
    
    
CCC
    

        BBB
    
    登录
    注册
    taobao
    
a
        
b
            
c

            
        
    
    
z
    
x
    
c
    百度
    
    
    点我
    
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.
    
块级元素
    
Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
        
行内元素
        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, 
        
行内块级元素
        qui atque veritatis deserunt nihil dignissimos. 
        Veritatis, laborum.
    

    
abc

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;
}