CSS教程

2017-10-25  本文已影响29人  Francis__

CSS基本语法

p{
    color:red;  /*将(字体)颜色设置为红色*/
    font-size:30px;    /*将字体大小设置为30px*/
}

CSS选择器

简单选择器

1.++id选择器++

#id名称{
    font-size:20px;
    
}
<div id="id名称">随便写点什么东西</div>

id属性的值是我们自己定义的，定义值的过程我们可以称作给id命名！命名需要遵循一定规则

2.++类(class)选择器++

.类名{
    /*看清楚类名前面得有个点啊！*/
    color:red;
    font-size:40px;
}
<p class="类名">不知道该写点啥</p>
<div class="类名">还不知道该写啥</div>

<p class="red size40">段落</p>
/*将段落 二字改为红色，40px*/

3.++标签选择器++

div{
    color:red;
}
p{
    font-size:30px;
}
<body>
    <div>此处为红色字</div>
    <p>此处为30像素的字</p>
</body>

复杂选择器

4.++交集选择器:++

p.mycolor{
    font-size:40px;
    color:green;
}
div#mydiv{
    font-size:4px;
    color:blue;
}
<body>
    <p class="mycolor">40像素绿色</p>
    <div class="mycolor">无变化</div>
    <div id="mydiv">4像素蓝色</div>
    <p id="mydiv">无变化</p>
</body>

4.++并集选择器++

p,mycolor,li.happy,div#mydiv{
    color:pink;
    font-size:90px;
}
<body>
    <div>这个没被选中</div>
    <ul>
        <li class="happy">这个被选择</li>
        <li>这个没被选择</li>
    </ul>
    <div id="mycolor">这个被选中</div>
    <div class="mycolor">这个被选中</div>
    <p id="mydiv">这个没被选中</p>
    <div id="mydiv">这个被选中</div>
</body>

div p span{
    color:red;
    /*删除中间的p亦可*/
}
<body>
<div>
    <p>
        我是div里面的p
        <span>
            我是div的后代(只有这条变红)
        </span>
    </p>
    <p>我是div里面的p</p>
</div>
</body>

继承：

body{
    color:red;
}
<body>
    <div>....</div>
    <p>....</p>
    <div>
        ....
        <span>....</span>
    </div>
</body>

使鼠标指上去后出现不同效果————伪类选择器（hover）

a:hover{
    color:red;
}
div:hover{
    font-size:80px;
}
<body>
    <a herf="http://www.baidu.com">百度一下你就知道</a>
    <div>百度一下你就知道</div>
</body>
/*鼠标指上去后出现不同效果(字体颜色、大小变化之类的)*/

*{
    ......
}

构造文本

CSS长度值的单位

p{
    text-indent:10%;
}

p{
    text-align:right;
}

p{
    font-family:字体1,字体2;
}
/*以逗号间隔多种字体，若未找到前者则自动向后跳转，直至找到相应字体为止*/

用CSS给网页装潢[4]--构造块级元素

1.块级元素

/*在此全部默认为在css文件中，暂且不管html中的代码*/
#div{
    background-repeat:repeat-y;     /*竖直平铺*/
    background-repeat:repeat-x;     /*水平平铺*/
    background-repeat:no-repeat;    /*不要背景平铺*/
}

后代元素长度大于祖辈元素大小时的处理方法：

#div1{
    width:200px;
    height:200px;
    background:#CCFF66;
    border:1px solid #000000;
    overflow:hidden;
}
#div2{
    width:300px;    /*注意，此处子元素宽度已经超过父元素*/
    height:150px;
    background:#FF00FF;
}
<body>
    <div id="div1">
        <div id="div2">Hello World!</div>
    </div>
</body>

盒模型概念

a{
    width:200px;
    height:200px;
    border:1px solid #000000;
    display:block;
}
<body>
<a href="http://www.baidu.com">百度一下，你就知道</a>
</body>

padding-top:10px;
padding-right:10px;
简写：padding:上 右 左 下;
亦可写作：padding:10px(上下) 20px(左右);

margin-top:10px;
margin:上 右 左 下;

浮动

image 
<head>
<style type="text/css">
    #div1{clear:left;}
    #div2{clear:left;}
    #div3{clear:left;}
    #div4{clear:left;}
</head>
<body>
<div id="">我是一个div块</div>
</body>

相对定位与绝对定位

<head>
<style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:#FFC00;
        position:relative;
        left:20px;      /*左边空出20px;*/
        top:30px;       /*上边空出20px;*/
        /*用左无右，用上无下【只能用一个。相对于原来的位置进行定位（偏移）】*/
        /*方位词后的像素偏移量可以为负*/
    }
    #div2{
        width:100px;
        height:100px;
        background:#6633FF;
    }
</style>
</head>
<body>
    <div id=div1>div1</div>
    <div id=div2>div2</div>
</body>
image 
<head>
<style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:#FFC00;
        position:relative;
    }
    #div2{
        width:100px;
        height:100px;
        background:#6633FF;
        position:absolute;
    }
    #div3{
        width:100px;
        height:100px;
        background:#8844FF;
        position:relative;
    }
</style>
</head>
<body>
    <div id=div1>div1</div>
    <div id=div2>div2</div>
    <div id=div3>div3</div>
</body>
image 
<head>
<style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:#FFC00;
        position:absolute;
        z-index:1;  /*若无此属性则默认z-index值为0*/
    }
    #div2{
        width:100px;
        height:100px;
        left:50px;
        top:50px;
        background:#6633FF;
        position:absolute;
        z-index:2;  /*哪个值大哪个在上（值亦可为负）*/
    }
</style>
</head>
<body>
    <div id=div1>div1</div>
    <div id=div2>div2</div>
</body>

构造列表

<!Doctype html>
<html langg="zh-CN">
<head>
<meta charset="utf-8" />
<title>构造列表</title>
<style type="text/css">
    ul{
        list-style:none;
        /*去掉列表后那个点*/
        margin:0px;/*去掉外边距*/
        padding:0px;/*去掉内边距*/
        /*双重保险*/
    }
    #nav ul.list{
        width:130px;    /*给li添加一个长度值限定下边框长度*/
        background:#F8F8F8;/*添加背景色*/
        border:1px solid #BBBBBB;
        padding:0px 20px;/*继续微操，控制左端边距为20px调距离*/
    }
    nav ul.list li{
        height:31px;
        line-height:31px;  
        /*设置字的行高（目的为使之居中）*/
        /*工作中一般将其设置的和下边框（height）距离一样,来达到文字上下居中的效果*/
        border-bottom:1px solid #dedede;    /*下边框*/
        text-index:35px;        /*控制缩进*/
        font-size:14px;
        font-weight:400;
        font-family:微软雅黑;
        color:#3c3c3c;
    }
    #nav ul.list li a{
        color:#3c3c3c;
        text-decoration:none;
    }
    #nav ul.list li a:hover{
        text-decoration:underline;
    }
    
    /*用双重坐标更加精确*/
    ul.list li.li-0{
        background:url(小图标地址) 0px center/*x轴最左边，y轴居中*/ no-repeat/*只显示一个*/;
    }
    ul.list li.li-1{
        background:url(小图标地址) 0px center no-repeat;
    }
    ul.list li.li-2{
        background:url(小图标地址) 0px center no-repeat;
    }
    ul.list li.li-3{
        background:url(小图标地址) 0px center no-repeat;
    }
    
    /*亦可如此*/
    .li-4{
        background:url(小图标地址) 0px center no-repeat;
    }
    .li-5{
        background:url(小图标地址) 0px center no-repeat;
    }
</style>
</head>
<body>
<div id="nav">
    <ul class="list">
        <li class="li-0"><a href="http://baidu.com" target="_blank">服装内衣</li>
        <li class="li-1"><a href="http://baidu.com" target="_blank">鞋包配饰</li>
        <li class="li-2"><a href="http://baidu.com" target="_blank">运动户外</li>
        <li class="li-3"><a href="http://baidu.com" target="_blank">珠宝手表</li>
        <li class="li-0"><a href="http://baidu.com" target="_blank">手机数码</li>
        <li class="li-0"><a href="http://baidu.com" target="_blank">家电办公</li>
    </ul>
</div>
</body>

布局初探

Tips

不想受浮动（float）影响：选中你想要的部分去除浮动（clear:both;）

去掉/添加<a></a>默认下划线（鼠标不指上去的情况下）：text-decoration:none/underline;

边框边界：border-bottom/top/right/left:npx dashed(虚线)/(实线) 颜色;

一般来说文字上下有距离时应用盒模型的内边距挤距离：padding:apx bpx cpx dpx;当然，亦可用外边距margin挤（二者看上去没什么区别）

更改背景图片位置：backfround:url() apx(距离左端距离apx) no-repeat()

div居中：

一段居中文字（中间有间距，大小需要设置，在此定为30px）.因为最后一段后仍会有30px的间距，造成不居中，故我们可以将最后一段选中用margin消除最后一段的间距

<style type="text/css">此处写CSS代码
    a{
        margin:0 30px 0 0;
    }
    a.last{
        margin:0;
        /*将上边的margin覆盖掉*/
    }
</style>
<body>
    <a herf="#" target="_blank">首页</a>
    <a herf="#" target="_blank">美站</a>
    <a herf="#" target="_blank">酷文</a>
    <a class="last" herf="#" target="_blank">联系我们</a>
</body>

提升用户体验

/*利用id将input表单和label（提升用户体验用的标签）联系起来*/
/*标签for属性与相关 input 的 id 属性相同*/
<div>
<form action="#" name="form1">

    <label for="label1">您的姓名</label>
    <input type="text" name="name" id="label1" />
    /*二者id相同*/
    
    <label for="label2">您的联系方式</label>
    <input type="text" name="contact" id="label2" />
    /*二者id相同*/
    
</form>
</div>
image

调整input框的大小

CSS:
    form input{
        width:;
        height:;
    }
HTML:
    <input type="text" name="name" id="label" size="50px">
/*size="50px"即是将表单的长度调为了50px，但是高度只能在CSS中控制*/    

<div>
<form action="#" name="form1">

    <label for="label1">您的姓名</label>
    <input type="text" name="name" id="label1" size="50"/>
    /*二者id相同*/
    
    <label for="label2">您的联系方式</label>
    <input type="text" name="contact" id="label2" size="50/>
    /*二者id相同*/
    
    <label for="label3">站点网址</label>
    <input type="text" name="contact" id="label3" size="50/>
    
    <label for="label4">站点介绍</label>
    <textarea name="info" id="label4" cols="50" rows="8"></textarea>
    /*                                   50列       8行       */
    
</form>
上一篇下一篇

猜你喜欢

热点阅读