前端之CSS

1、CSS样式是啥？

*{margin:0;padding:0}html,body{font:12px arial;background:#fff;height:100%;overflow-y:auto}body,form{position:relative}img{border:0}a{color:#00c}a:active{color:#f60}input{border:0;padding:0}#wrapper{min-width:810px;height:100%;min-height:600px;position:relative}#head{position:relative;height:100%;min-height:600px;text-align:center}
#head .head_wrapper{height:100%}.s_form{position:relative;top:38.2%}.s_form_wrapper{position:relative;top:-191px}#form{margin:22px auto 0;width:641px;text-align:left;z-index:100}.s_ipt_wr{border:1px solid #b6b6b6;background:#fff;display:inline-block;vertical-align:top;width:539px;height:34px;border-right-width:0;border-color:#b8b8b8 transparent #ccc #b8b8b8;overflow:hidden}.s_ipt_wr:hover{border-color:#999 transparent #b3b3b3 #999}.s_ipt_wr.iptfocus{border-color:#4791ff transparent #4791ff #4791ff}
.s_ipt{width:526px;height:22px;font:16px/18px arial;line-height:22px\9;margin:6px 0 0 7px;background:transparent;border:0;outline:0}.s_btn_wr{display:inline-block;*position:relative;z-index:0;vertical-align:top;width:auto;height:auto;border-bottom:1px solid transparent;*border-bottom:0}.s_btn{padding-top:2px\9;cursor:pointer;width:100px;height:36px;color:white;font-size:15px;letter-spacing:1px;background:#3385ff;border-bottom:1px solid #2d78f4;outline:medium;*border-bottom:0}

2、CSS样式有啥用？

　　CSS控制html元素的显示效果，大小宽度，颜色。。。。比如说都是图片，但是大小，边距啥的，内容啥的都是CSS控制的

3、CSS的引入方式

　　1、行内式：就是直接在元素内部写，优先级最高

　　行内式是在标记的style属性中设定CSS样式。CSS样式多时，不推荐使用。

<p style="background-color: rebeccapurple">hello skiler</p>

　　2、嵌入式：在文件的头部加入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>

　　3、链接式：在头部将一个.css文件引入到HTML文件中

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

　　4、导入式：@import语句，不推荐使用

<style type="text/css">
 
          @import"mystyle.css"; 此处要注意.css文件的路径
 
</style>　

　　不推荐原因：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。所以基本看不见这种方式

 
posted @ 2017-04-12 08:58  skiler  阅读(120)  评论(0)    收藏  举报