首页 > 代码库 > css之基础及布局属性

css之基础及布局属性

css之基础及布局属性


1.CSS三种关联方式

行间样式
  如<p style=”color:#f00” >divcss8</p>
内联表方式
  

  (1):先在<head></head>之间加上<style>*********样式***********</style>

  (2):html里面采用选择器 调用所有的样式;

  <head>

  <style>
    div{color:red  font-weight:hold}
  </style>
  </head>
  <div></div>


  外联表方式

  • 外联表的原则:结构(html)与表现(css)进行分离
  • 在css文件夹里新建文件,写样式,在原html文件中写<link href=http://www.mamicode.com/“css/css.css”rel=“stylesheet” type=“text/css”> (放在head里面)

2.常用样式选择器

  <div>
  <p>文本</p>
  <div class=“body”></div>
  <div id=“top”></div>
  </div>

  • html标记符选择器:选择原页面上的元素;在css样式中 div{color:red; border:1px solid #000; width:200px;height:200px;}
  • 有上下文关系的定义:div p{color:blue;}
  • 选择定义类(class)选择器:.body{color:yellow}   
  • id选择器:只能唯一存在;#top{color:pink}

 

盒子四大元素:content(内容),margin(外边距),padding(内填充),border(边框)

--------------------------选择器( css有就近原则)-------------------------------

  选择器名称                 在css表的形态                在html中的调用

  • html标记符选择器:        p,a,img,div,span....          不用另外加任何东西
  • 具有上下关系的选择器:     div span a (中间是空格)       不用另外加任何东西
  • 类(class)选择器:         .    ( 比如:   .header)     <div class="header "></div>
  • id选择器  (一般不用id,留给js来操作)                 #     ( 比如:    #text  )    <div id="text "></div>
  • 群组选择器 (优化代码)              .left , .right , p , ul , li
  • 伪类选择器 (选择器上加上:hover)       a:hover{color:#ccc}

选择器的优先级: 行间  >  id选择器  >  class选择器  >  标记符选择器

3.盒子模型之外边距(margin)

  框边界属性
  1、margin-bottom:底边距       margin-left:左边距        margin-right:右边距           margin-top:上边距

---------------------margin(外边距)-------------------------

margin:1数字------上右下左                         margin:10px;

            2数字------上下    左右                     margin:10px 10px;

            3数字------上    左右    下                 margin:10px 10px 10px;             

            4数字------上   右   下   左                margin:10px 10px 10px 10px;


  这四个属性用来设置元素与其相邻元素间的距离。
  2、margin功能:简写属性,
    用于设置元素的所有边界。这是用于描述元素的内容的边缘到框边缘的距离的。

4.盒子模型之内填充(padding)
  框填充属性
  1、padding-bottom                padding-left               padding-top                 padding-right

  功能:毎个容器都有边框,这些属性设置边框与框內元素间的距离

  用法同margin.

---------------------padding(内边距/内填充)------------------------- padding:缩写与外边距一样;

注意:使用了padding之后,要减去宽高的值;

5.盒子模型之边框(border)
  框边框属性
  1、border-top                    border-bottom                  border-right             border-left
  功能:这四个属性都是简写属性,分别设置上,下,右,左的边框属性。缺少情况下,边框没有样式设置。

  包含的数值:共有三个边框属性:border{1px solid red;}                     border:宽度  线的样式 颜色;----------属性没写完敲空格;

  
  2、border-color:功能:简写属性,设置四个边框的颜色值。
  数值:可以用颜色名或RGB值。
  如果指定单个颜色,则四个边框都显示为这个颜色;
  如果指定两个颜色,则顺序为上下,左右;
  如果指定三种颜色,则顺序为上,左右,下;
  如果指定四种颜色,则顺序为上,右,下,左。
  

  3、border-width:边框的宽度指定长度。

  功能:简写属性,可同时设置四个边框的 宽度。

  数值:thin -细边框。  medium -中等线宽。    thick -粗线。

  长度 -用相对或绝对单位设置边框宽度

       border-top-width        border-bottom-width          border-right-width       border-left-width功能:分别设置各个边框的厚度。


  4、border-style:设置用于修饰边框的底纹。可以设置下列样式:

    none -不显示边框,为缺省值    dotted -点线
    dashed -虛线
    solid -实线
    double -双线
    groove - 3D陷入线
    ridge - 3D山脊狀线
    inset -使页面有沉入感
    outset -使页面有浮出感

6.浮动(float)

  功能:用于在普通元素流布置规则以外放上元素。
  数值: none -无改动。
     left -将其它元素内容放到浮动元素右边。
       right -将其它元素内容放到浮动元素左边

 

---------------------float(浮动)-------------------------

为什么要 清除浮动????

浮动带来的负面影响:会使父级对象的高度消失,导致背景图片,边框不能正常显示,margin,padding设置值不能正确显示(特别是上下边的padding和margin不能正确显示);

清除浮动的三种方式:( 1 ):直接给父级确定的高度; (项目中的扩展,不现实 )

            ( 2 ):在父级的css里直接加上 overflow:hidden;  但是不能和height同时出现;  overflow:hidden;和height同时出现(功能:超出部分被隐藏; )

            ( 3 ):a:在css里面 .***{ clear:both;}  b:在父级结束之前新添 <div class="***"></div>

            <div>

              <div class="***"></div>

            </div>

 

css之基础及布局属性