码迷,mamicode.com
首页 > Web开发 > 详细

CSS详解

时间:2017-12-07 00:38:34      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:www   组成   维多利亚   pos   常用   允许   ext   otto   max   

前面加一条:
<link  href="  "   type="text/css"  rel="stylesheet">
 

一.CSS基础语法:

   1.  格式:selector {
                    property:value;
                      }
例如:h1{color:red;  font-size:14px; }
属性大于1个之后,属性之间用分号隔开
如果值大于1个单词,则需要加上引号:
p{font-family: "sans serif"; }
 
二.CSS高级语法:
  1、选择器分组:
    h1,h2,h3,h4,h5,h6{color:red;}     给多个元素加上同一个样式
  2、继承:
      body{ color: green; }
   出过在body中,除了单独定义外的元素,其他没有定义样式的元素,则继承body的样式。
 
三、派生选择器:
        通过依据元素在其位置的上下文关系来定义样式。
       例如:li strong{color :red;}    中间加一个空格。  改变了li标签下的strong标签的效果,而不会改变别的位置的strong标签的效果。
 
四、CSS 选择器:
    *{   }     *号是通配符
  1.id选择器:
     id选择器可以为标有id的HTML元素指定特定的样式
     id选择器以"#"来定义
     派生选择器的用法:
     例如:    <p id="pid">hello css <a href="http://www.baidu.com">百度</a></p>
     其中样式表中写:    #pid  a{ color:red; }       则只有"百度" ,这两个字变成了红色。
  2.类选择器:
     类选择器以一个点显示
     class也可以作派生选择器
 
3.属性选择器:
    对带有指定属性的HTML元素设置样式
    第二种:属性和值选择器
    在<head>中写
<style type="text/css">
    [title]{
        color: red;
    }
    [title="tt"]{
        color: aqua;
    }
</style>
效果不同:
<p title="t">属性选择器</p>
<p title="tt">属性和值选择器</p>
 
五、盒子模型:
内容包括:margin(外边距) , border(边框) , padding(内边距) , content(内容)部分组成。
 
(1).内边距:
     内边距在content外,边框内
    内边距属性:
    padding                  :设置所有边距
    padding-bottom    :设置底边距
    padding-left           :设置左边距
    padding-right         :设置右边距
    padding-top           :设置上边距
 
(2)边框的样式:
     border-style:定义了10个不同的非继承样式,包括none,如实线,虚线等等
  1.边框的单边样式:
     border-top-style:
     border-left-style
     border-right-style
     border-bottom-style
   2.边框的宽度:
     border-width
   3.边框单边的宽度:
     border-top-width:
     border-left-width
     border-right-width
     border-bottom-width
   4.边框的颜色
     border-color
   5.边框单边的颜色
     border-top-color:
     border-left-color
     border-right-color
     border-bottom-color
CSS3边框:
     border-radius  :圆角边框 ,它的值可以取10px等等
     box-shadow    :边框阴影
     border-image :边框图片
  
(3)CSS外边距
    外边距:围绕在内容边框的区域就是外边距,外边距默认为透明区域
              外边距接受任何长度单位,百分数值
     外边距常用属性:
      margin                :设置所有边距,是左右都跟着变化
      margin-bottom  :设置底边距
      margin-left         :设置左边距
      margin-right       :设置右边距
      margin-top         :设置上边距
其中:  在CSS中设置body{margin:0;}   ,则居左,居上没有空格
 
六、CSS定位:
    改变元素在页面上的位置
CSS定位机制:
    普通流:元素按照其在HTML中的位置顺序决定排布的过程
    浮动
    绝对布局
CSS定位的属性:
     position          :把元素放在一个静态的,相对的,绝对的,或固定的位置中
     top                  :元素向上的偏移量
     left                  :元素向左的偏移量
     right                :元素向右的偏移量
     bottom           :元素向下的偏移量
     overflow         :设置元素溢出其区域发生的事情
     clip                  :设置元素显示的形状,主要操作的是图片
     vertical-algin  :设置元素垂直对齐方式
     z-index           :设置元素的堆叠顺序
 position属性:
    static, relative ,absolute  ,fixed
 
七、CSS浮动
   浮动:
    float属性可用的值:
       left      :元素向左浮动
       right    :元素向右浮动
       none   :元素不浮动
       inherit :从父级继承浮动属性
clear属性:
    去掉浮动属性(包括继承来的属性)
     clear属性值:
        left,right:去掉元素向左、向右浮动
        both:左右两侧均去掉浮动
        inherit:从父级继承来clear的值
 
八、尺寸操作:
     属性:
     height             设置元素高度
     line-height     设置行高
     max-height    设置元素最大高度
     max-width      设置元素最大宽度
     min-width      设置元素最小宽度
     min-height     设置元素最小高度
     width               设置元素宽度
 
九、分类操作:
     属性:
     clear         设置一个元素的侧面是否允许其他的浮动元素
     cursor       规定当指向某元素之上时显示的指针类型,设置鼠标指针的效果
     display     设置是否及如何显示元素
     float         定义元素在那个方向浮动
     position    把元素放置到一个静态的,相对的,绝对的,固定的位置
     visibility    设置元素是否可见或不可见
 
十、导航栏:
     1.垂直导航栏
     2.水平导航栏
     3.导航栏效果
 
十一、图片:
     <div class="image">
    <a href="#" target="_self">
        <img src="1.JPG" alt="风景" width="200px" height="200px">
    </a>
    <div class="text">8月份的维多利亚</div>
</div>
    其中CSS样式中,opacity:1;设置图片不透明,如果参数是0.5的话,就是半透明的。
                     取值是从0到1,去透明度。
 
 
 
 
 

CSS详解

标签:www   组成   维多利亚   pos   常用   允许   ext   otto   max   

原文地址:http://www.cnblogs.com/FocusIN/p/7995178.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!