python_day13 CSS

!--思路：先定外层，再定内层-->
<!--注册网站简单示例-->
<div class="header">
    <div class="headerContent">
        <div class="keep">
            <a href="">*收藏本站</a>
        </div>
        <div class="action">
            <a href="">登录</a>
            <a href="">免费注册</a>
            <a href="">我的订单</a>
            <a href="">VIP会员俱乐部</a>
            <a href="">客户服务</a>
        </div>
    </div>
</div>

<div class="logo">
    <a href=""><img src="img/美乐乐.png" alt=""></a>
</div>

<div class="content">
    <div class="regForm">
        <h3>新用户注册</h3>
        <form action="">
            <p><label for="c1">用户名：</label><input type="text" id="c1"></p>
　　　　　　　<p><input type="submit" name="" id="" value="同意以上协议并提交" class="submit"></p>
        </form>
    </div>
    <div class="loginBtn">

    </div>
</div>

<div style="text-align: center;margin-top: 20px;background-color: grey;line-height: 40px">
    2004-2015 www.autohome.com.cn All Rights Reserved.汽车之家 版权所有
</div>

*{
    margin: 0;
    padding: 0;
}
.header{
    width: 100%;
    height: 30px;
    background-color: grey;
}
.headerContent{
    width: 80%;
    height: 30px;
    margin: 0 auto;
    line-height: 30px;
}
.keep{
    float: left;
}
.action{
    float: right;
}
.action a{
    margin-right: 10px;
}

.logo{
    width: 80%;
    margin: 0 auto;
}

.content{
    border: 1px solid red;
    width: 80%;
    height: 600px;
    margin: 0 auto;
}
.regForm{
    width: 60%;
    background-color: antiquewhite;
    height: 100%;
    float: left;
    /*border-right-style: dashed;*/
}
.loginBtn{
    width: 40%;
    height: 100%;
    background-color: aqua;
    float: left;
}

.regForm h3{
    margin-top: 20px;
    margin-left: 30px;
}
#form{
    margin-top: 20px;
    margin-left: 40px;
}
#c1{
    line-height: 30px;
}
#form .submit{
    padding: 5px 20px;
    background-color: red;
    margin-top: 10px;
    color: white;
    border: none;
}

CSS选择器
<div class="c1">DIV</div>
<p class="c1">PPP</p>
<p>PPPP</p>
div,p{color: red}
div,.c1{color: red}
p.c1{color: red}    
只有第二行，且的关系

<div class="c2 c1">div</div>
class可以有多个值，空格隔开

class为何要有多个值
<div class="btn left"><</div>
<div class="btn right"><</div>
.btn{
    width: 30px;
    height: 60px;
    background-color: darkgray;
    opacity: 0.5;
    font-size: 22px;
    color: white;
    text-align: center;
    line-height: 60px;
    margin-top: 10px;
}
.left{float: left;}
.right{float: right}

<div class="outer">
    <div class="inner"><p>P1</p></div>
    <p>P2</p>
</div>
<p>P3</p>
<p>P4</p>
后代选择器 作用P1 p2
.outer p{color: red}
子代选择器 作用p2
.outer >p{color: red}
毗邻元素选择器 作用紧挨着p3
.outer +p{color: red}
兄弟选择器 作用p3 p4
outer ～ p{color: red}

自定义属性 属性名=属性值
<div><p egon="xxx">P1</p>
<p egon="ooo">P2</p>
<p egon="xxx" alex="sb">P3</p>
</div>
[egon]{color:red;}
同时包含egon，alex
[egon][alex]{color:red;}
同时egon值xxx，alex
[egon="xxx"][alex]{color: red}
div标签下egon值ooo
div [egon="ooo"]{color:red}
<p egon="xxx sb row" alex="sb">P7</p>
[egon～="row"]{color:red;}
只匹配egon属性值开头为xx
[egon^="xx"]{color:red;}
只匹配egon属性值包含sb
[egon*="sb"]{color:bisque}

伪类选择器 ancher伪类
伪类都是选择的
<a href="">hello yuan</a>
a{color:red;}
a:link{color:blue;}
a;hover{color: green;}
a:active{color:yellow}
a:visited{color: aquamarine}

<div class="c1"></div>
.c1{
    width: 100%;
    height: 30px;
    background-color: yellow;
}
.c1:hover{color: red;}

下划线红色字体，悬浮
.headerContent a:hover{color: red;text-decoration: underline;}

.c2,.c3{width: 100px;height: 100px;background-color: darkgreen}
.box{border: 1px solid red;}
当悬浮到box时对c2操作
.box:hover .c2{background-color: green}

before,after用法
.outer:after{content: "world";color:red;}

CSS选择器优先级： id>class>element(p,div)
        内嵌式(style="color:red")(权值1000)>id(权值100)>class(权值10)>element(p,div)(权值1)
        不在规则内：!important;
!important会直接采用此部分格式
.c4{color:red !important;}

CSS继承
继承是在没设置时会继承父类
.c1{color:red;}
a标签有自己的格式，不会继承父类
颜色代码对应表 设置文本颜色 RGB(红，绿，蓝)（0-255）

文本：基线、底线、顶线、中线
img{vertical-align: middle;}
img{vertical-align: -30px;}
title: <img src="img/美乐乐.png" alt="">
    
.font_text{
    font-family: Tahoma; 字体格式
    font-weight: 600;   粗细
    font-size: 15px;
    font-style: italic; 斜线
    text-indent: 150px; 首行缩进
    letter-spacing: 10px; 字母间距
    word-spacing: 15px; 单词间距
}

背景属性
.c1{
    background-image: url("img/美乐乐.png");
    background-repeat: repeat-x; 只在x轴平铺 repeat-y,no-repeat.
    background-position: 200px 300px;   左右200px，上下300px.
    background: usl("img/美乐乐.png") no-repeat center center;
    background-position: -200px -200px; 调整img的位置
}

列表属性
line-style:none;
line-style:square;方块 lower-roman小写罗马字 upper-roman大写罗马字

display属性
    display: inline; 显示为内联标签
    display: block; 块级标签
    display: inline-block;
CSS布局关键点：如何能够在一行显示多个可以调节长宽的元素
思路1：float
思路2：display
.myHide{    display: none;会被隐藏，不占位置 } 希望哪个标签隐藏就将标签的class设置为myHide.

float属性  非完全脱离文档流/半脱离文档流
float清楚浮动
clear:none/left/right/both;
clear:left 左边不能有浮动元素。如果有，自己走。
clear:right 右边不能有浮动元素。如果有，自己走。
clear:both  左边右边都不能有浮动元素

float父级塌陷
.header{width: 100%;height: 60px;background-color: green;}
*{margin: 0;padding: 0;}
.item1,.item2,.item3{width:60px;height: 60px;background-color: yellow;float: left}
.item3{float:right}
.header:after{content: "";display: block;clear: both;}
一般命名：发生塌陷问题 命名为header即可直接引用
.clearfix:after{content: "";display: block;clear: both;}

定位position
返回顶部