CSS

标签的分类

1.块级元素 

典型代表: div  h1-h6  p  ul  li 
特点:  独占一行
         可以设置宽高
         

2.行内元素

典型代表:span  a  strong
特点:   在一行显示
          不能设置宽高

3.行内块元素

典型代表: input   img

标签之间的转换

1.块元素转行内

display:inline

  

  

 

css的四种引入方式  

 

 1.行内式

 

 2.嵌入式

 

 3. 链接式

 

 将一个.css文件引入到HTML文件中  

 

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

 

 4.导入式

 

 

 css选择器

1.基本选择器

  

二.组合选择器

E,F   多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔      :div,p { color:#f00; }
 
E F   后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔 :li a { font-weight:bold;}
 
E > F   子元素选择器,匹配所有E元素的子元素F            :div > p { color:#f00; }
  
E + F   毗邻元素选择器,匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟选择器(以破折号分隔)                 :.div1 ~ p{font-size: 30px; }

注意嵌套规则:

  1. 块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。

  2. 有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

  3. li内可以包含div

  4. 块级元素与块级元素并列、内联元素与内联元素并列。

三.属性选择器

E[att]          匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略)。
                  
E[att=val]      匹配所有att属性等于“val”的E元素   
 
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
 
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
 
E[attr$=val]    匹配属性值以指定值结尾的每个元素   
 
E[attr*=val]    匹配属性值中包含指定值的每个元素   




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        [alex]{
            color: red;          #E[att]   
        }
        
        div[alex="sb"]{
            color: red;          #E[att=val] 
        }
        
        div[alex~="xx"]{
            color: red;          #E[att~=val]  
        }
        
        div[alex^="sb"]{
            color: red;           #E[attr^=val] 
        }

        div[alex*="sb"]{
            color: red;           E[attr*=val]
        }
    </style>

</head>
<body>
    <div alex="sb">123</div>
    <p alex="sb">123</p>
    <div alex="sb xx">123</div>
</body>
</html>    

 伪类(Pseudo-classes)

  CSS伪类是用来给选择器添加一些特殊效果。

a:link(没有接触过的链接),用于定义了链接的常规状态。

a:hover(鼠标放在链接上的状态),用于产生视觉效果。

a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。

a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。

伪类选择器 : 伪类指的是标签的不同状态:

           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<style type="text/css">
    a:link{
        color: red;
    }
    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }
</style>
</head>
<body>
    <a href="01-hello-world.html">hello-world</a>
</body>
</html>
例子
<style type="text/css">
    .box{
        width: 100px;;
    }

    .top,.bottom{
        width: 100px;
        height: 100px;
        background-color: chartreuse;

    }

    .top:hover{
        background-color: red;      鼠标移动到top区域,颜色变红色
    }

    .box:hover .top{
        background-color: red;      鼠标移动到box区域,top区域变红色
    }

</style>
</head>
<body>
    <div class="box">
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
</body>
</html>
:hover 背景黄色 鼠标上去红色 例子
:before    p:before       在每个<p>元素之前插入内容
:after       p:after         在每个<p>元素之后插入内容


----------举例------------------

p:before     p:before{content:"hello";color:red}
p:after        p:after{ content:"hello";color:red}
:before :after

选择器的优先级  

  所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。

  样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

    1 内联样式表的权值最高                 style=""------------1000;

    2 统计选择符中的ID属性个数。        #id --------------100

    3 统计选择符中的CLASS属性个数。  .class -------------10
    4 统计选择符中的HTML标签名个数。 p ---------------1

  按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。

1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。
   
  2、有!important声明的规则高于一切。

  3、如果!important声明冲突,则比较优先权。

  4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。

  5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择符*定义的规则)。
优先级顺序

 css属性操作

1.css text

a. 颜色属性

<div style="color:blueviolet">ppppp</div>
 
<div style="color:#ffee33">ppppp</div>
 
<div style="color:rgb(255,0,0)">ppppp</div>
 
<div style="color:rgba(255,0,0,0.5)">ppppp</div>

b. 字体属性

font-size: 20px/50%/larger
 
font-family:'Lucida Bright'
 
font-weight: lighter/bold/border/                      #粗细
 
<h1 style="font-style: oblique">老男孩</h1>    #斜体

c. 背景属性

background-color: cornflowerblue
 
background-image: url('1.jpg');
 
background-repeat: no-repeat;(repeat:平铺满)
 
background-position: right top(20px 20px);

----简写----
background: #ffffff url('1.png') no-repeat right top;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        .back{
            border:1px solid red;
            width: 800px;
            height: 800px;
            background-image: url("meinv.png");
            background-repeat: no-repeat;    #不平铺满
            background-repeat: repeat-x;     #横向平铺满
        }
        
        .back{
            border:1px solid red;
            width: 800px;
            height:800px;
            background-image: url("meinv.png");
            background-repeat: no-repeat;
            background-position: 0 0;
        }
    </style>
</head>
<body>
    <div class="back">

    </div>
</body>
</html>
背景属性 示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>


    <span></span>
    <span></span>
    <span></span>
    <span></span>

</body>
</html>
抽屉 小图标显示

d.文本属性

font-size:        10px;

text-align: center;        横向排列

line-height: 200px;        文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:-4px       设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效

text-indent: 150px;        首行缩进
letter-spacing: 10px;      字符于字符之间的距离 
word-spacing: 20px;        单词与单词之间的距离
text-transform: capitalize;    单词首字母大写 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        div{
            height:100px;
            background-color: aquamarine;
            text-align: center;   #水平居中
            line-height:100px;    #文本设置为和div一样的高度,显示居中
        }
    </style>

</head>
<body>
    <div>文本属性</div>
</body>
</html>
text-align line-height

e.边框属性

border-style: solid;
  
border-color: chartreuse;
  
border-width: 20px;

-----------简写---------------

border: 30px rebeccapurple solid;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        .foo{
            width:200px;
            height:200px;
            border:1px solid red;
        }
    </style>

</head>
<body>
    <div class="foo"></div>
</body>
</html>
示例

f.列表属性

list-style-type         设置列表项标志的类型。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
 
list-style          简写属性。用于把所有用于列表的属性设置于一个声明中


--------------------------------

#使用图像来替换列表项的标记:

ul {
     list-style-image: url('');
            }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        ul,ol{
            list-style: none;   #取消列表前面的小图标
        }
    </style>
</head>
<body>

    <ul>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ul>

    <ol>
        <li>123</li>
        <li>456</li>
        <li>789</li>
    </ol>
</body>
</html>
View Code

e.dispaly属性

none
block
inline
inline-block

#none(隐藏某标签)  p{display:none;}

注意与visibility:hidden的区别:

visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。


#block(内联标签设置为块级标签)  span {display:block;}
注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 


#inline(块级标签设置为内联标签)  li {display:inline;}


#inline-block 
display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决
    #outer{
            border: 3px dashed;
            word-spacing: -5px;
        } 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span,a{
            width:100px;
            height:100px;
        }
        span{
            background-color: yellow;
            display: inline-block;
        }
        a{
            background-color: firebrick;
            display: inline-block;
        }
        div{
        word-spacing: -5px;     #取消边距间隔
        }
    </style>
</head>
<body>
    <div>
        <span>span</span>
        <a href="#">a</a>
    </div>
</body>
</html>
word-spacing 取消边距间隔

 外边距(margine)和内边距(padding)

margin:            用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离;   
Border(边框):       围绕在内边距和内容外的边框。
Content(内容):     盒子的内容,显示文本和图像。

margine(外边距)

单边外边距属性:
    margin-top:100px;
    margin-bottom:100px;
    margin-right:50px;
    margin-left:50px;

简写属性:------------------

margin:10px 20px 20px 10px;

        上边距为10px
        右边距为20px
        下边距为20px
        左边距为10px

margin:10px 20px 10px;

        上边距为10px
        左右边距为20px
        下边距为10px

margin:10px 20px;

        上下边距为10px
        左右边距为20px

margin:25px;

        所有的4个边距都是25px

 float属性

  • 常见的块级元素有 div、form、table、p、pre、h1~h5、dl、ol、ul 等。
  • 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container:after{
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
            font-size:0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</div>

<div>footer</div>
</body>
</html>
清除浮动

 

 position(定位)

a. static

  static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

b. position: relative/absolute

   position: relative

    1. 参照物是元素之前文档流中的位置

    2. 元素不脱离文档流(之前的空间位置依然存在)

   position: absolute   

     定义:设置为绝对定位的元素框从文档流完全删除,并相对于最近的已定位祖先元素定位,如果元素没有已定位的祖先元素

              那么它的位置相对于最初的包含块(即body元素)。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框

                     而不论原来它在正常流中生成何种类型的框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }


        .div1{
            width: 300px;
            height: 200px;
            background-color: red;
        }
         /*.div2{*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*background-color: rebeccapurple;        */
             /*position: relative;*/
             /*top:100px;*/
             /*left:100px;*/
         /*}*/

         .div2{
            width: 300px;
            height: 300px;
            background-color: rebeccapurple;
             position: absolute;
             top:100px;
             left:100px;
         }

         .div3{
            width: 300px;
            height: 200px;
            background-color: green;

        }


    </style>
</head>
<body>

<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>




</body>
</html>
relative absolute例子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            margin: 0px;
        }


        .item1{
            width: 200px;
            height: 200px;
            background-color: red;
        }


         .item2{
            width: 200px;
            height: 200px;
            background-color: yellow;
             position: absolute;
             top:200px;
             left:200px;
         }

         .item3{
            width: 200px;
            height: 200px;
            background-color: green;

        }
        .outer{
            border: 1px solid red ;
            position: relative;
        }

    </style>
</head>
<body>


<div class="item1"></div>

<div class="outer">
    <div class="item2"></div>
    <div class="item3"></div>
</div>




</body>
</html>
常用设置

 c. position:fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width: 100%;
            height: 1200px;
            background-color: darkgrey;
        }
        .return_top{
            width: 80px;
            height: 80px;
            background-color: burlywood;
            color: white;
            text-align: center;
            line-height: 80px;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>

    <div class="content"></div>
    <div class="return_top">返回顶部</div>

</body>
</html>
fixed 右下角定位

 

  

 

 

posted @ 2017-05-17 15:40  golangav  阅读(361)  评论(0编辑  收藏  举报