css总结

css

    盒子的深入

        注意:里面所有的值加到一起一定不能大于父盒子的内容区的宽度width的值

 

总的宽度=内容区的宽度width+border(左、右)+padding（左、右）+margin(左右)

 

    定位

        position:fixed 固定定位

            QQ咨询栏、扫网页的二维码等

         position:relative 相对定位

         position: absolute 绝对定位

            商品活动等页面：比如限时抢（“父相子绝”）

    列表的属性

        去掉列表前面的项目符号: list-style:none;

用小图代替列表前面的符号: list-style-image:url(图片的地址)

    合并表格边框线

        合并表格的边框线 border-collapse:collapse;

    边框线的属性

        上边框:

    border-top-color:颜色值;上边框的颜色

    border-top-style:线型;线型有 solid 实线  dashed 虚线 dotted 点状线

    border-top-width:粗细；例如border-top-width:2px;

      简写为border-top:粗细 线型 颜色;

        右边框:

   border-right-color:颜色值;上边框的颜色

   border-right-style:线型;线型有 solid 实线  dashed 虚线 dotted 点状线

   border-right-width:粗细；例如border-right-width:2px;

       简写为border-right:粗细 线型 颜色;

        下边框:

    border-bottom -color: 颜色值;上边框的颜色

    border-bottom-style: 线型;线型有 solid 实线  dashed 虚线 dotted 点状线

    border-bottom-width: 粗细；例如border-bottom-width:2px;

          简写为border-bottom: 粗细 线型 颜色;

        左边框

    border-left-color:颜色值;上边框的颜色

    border- left -style:线型;线型有 solid 实线  dashed 虚线 dotted 点状线

    border- left -width:粗细；例如border- left -width:2px;

            简写为border- left:粗细 线型 颜色;

        简写：  border:粗细 线型 颜色；

 注意: 上右下左四条边框的样式一样

    内边距的写法

        内边距属性:

      padding-top：数值；内容和上边框之间的距离

      padding-right：数值；内容和右边框之间的距离

      padding-bottom：数值；内容和下边框之间的距离

      padding-left：数值；内容和左边框之间的距离

        简写:

       padding：10px 20px 30px 40px; 上右下左

       padding:10px 20px 30px;  上10px      左右  20px     下  30px

       padding:10px 30px;   上下10px   左右 30px

       padding:10px;   上右下左都是10px

    外边距

        外边距:

      margin-top:数值；上边框往外的距离

      margin-right:数值；右边框往外的距离

      margin-bottom:数值；下边框往外的距离

      margin-left:数值；左边框往外的距离

        简写:

      margin:10px 20px 30px 40px; 上边框以外的10px  右是20px  下30px  左40px

      margin:10px 20px 30px;   上边框以外的10px   左右是20px  下是30px

      margin:10px 20px;   上下为10px  左右为20px

      margin:10px;  上右下左都是10px

    浮动

        浮动属性:

    float:left;    float:right

        浮动的特点:

    设置浮动的元素，不占空间

    设置浮动的元素层级高于普通元素

    不管是什么元素，设置浮动之后一定是块元素

    如果在一行中的元素想横向排列，都设置浮动就可以

        三个块元素排列的思想:

    float:left float:left float:left

    float:left float:left float:right

        清除浮动

            属性：clear: both;

                清除浮动的作用：

1、清除浮动后，浮动元素之后的其它元素，不再继承浮动的特性，将恢复原始的默认排版方式。

2、清除浮动特性后，包围元素 “从视觉上”包住了浮动元素。

    背景属性

        background-color  背景颜色

background-image 背景图片

background-repeat 背景图片是否平铺

        取值：no-repeat 不平铺 repeat-x 横向平铺 repeat-y  纵向平铺

                     repeat横向和纵向都平铺 （默认）

background-attachment:背景附件，背景是否随着上方的内容一起滚动

        取值 ：fixed 背景固定 scroll 滚动

background-position:背景图片的展开方式

        例如：background-position:  水平 left  center  right

                     垂直 top  center bottom

background: 背景颜色 背景图片 背景图片是否平铺 水平 垂直；

    文本属性

        font-size       文本的大小             

font-weight  文本是否加粗        属性值：bold加粗   // normal 正常,不加粗

font-style      文本是否倾斜        属性值：italic ;倾斜 // normal 正常,不倾斜

font-family    文字的字体           属性值：字体（默认是宋体）

 

text-align     文本的对齐方式  属性值：left  左对齐//center居中对齐// right 右对齐

text-indent    文本首行缩进

text-decoration 文本装饰线

        ①underline      下划线

        ②overline        上划线 

        ③line-through    删除线

        ④none              没有线

text-transform 文本转大小写（扩展）

       ①capitalize单词首字母转大写

       ②uppercase全大写

       ③lowercase全小写

 

color                     文本的颜色

letter-spacing     字母和字母之间的距离 

word-spacing      单词和单词之间的距离

    选择器的分类

        基本选择器

            标签选择器（选择器的名称是"标签名"）

                语法：标签选择器名{ 属性:属性值;   }

 例如: p{font-size: 12px;}

            类选择器（选择器的名称是“. 类名"）

                 定义:  <标签 class=”选择器名”> </标签>

 例如:  <span class="myclass"></span>

                使用: .myclass{ font-size: 12px;  }

            Id选择器（选择器的名称是“#类名"）

                定义: <标签 id="id选择器名称"></标签>

例如: <span id="myclass"></span>

                使用: #id选择器名 { font-size: 12px; }

注意: 引用的方法，每一个标签都有id属性

            通用选择器（选择器的名称是“*"）

                （*所有）给所有的标签加样式

  *{属性:属性值;   }

注意: Ie6版本不支持

        复合选择器

            多元素选择器(  ， )

                语法: 选择器,选择器,选择器 {共有的属性：属性值;   }

例如: p,a,div { font-size: 12px;}

注意: 多个标签用逗号(,)链接

            后代元素选择器( 空格 )

                语法:  选择器1  选择器2  选择器3 {属性:属性值; }

例如: div p a {font-size: 12px;}

注意: 多个标签用空格链接

            子元素选择器（ > ）

                语法:选择器>选择器{属性:属性值;  }

例如:  .news>h3{color:blue;  } 

给第一层的子元素加，用大于号>链接

            伪类选择器（匹配的是超链接的四种状态）

                伪类:

   a:link: 未访问的链接

   a:visited 访问过的链接

   a:hover 鼠标移动链接上

   a:active 单击鼠标左键的那一时刻的样式

    引入css样式

        行内样式表

            行内样式，是写在标签的style属性值中

格式：<标签 style=”属性名:属性值;”> 内容 </标签>

 

 例如: <p style=“font-size:12px;color:green;”></p>

        内嵌样式表（ 常用）：

            内嵌样式，写在头部head标签中,用一对<style>标记引入

格式:       

          <style type=”text/css”>

              选择器{属性名:属性值;  }

          </style>

        外部样式表（ 常用）：

            <link   rel=”stylesheet”   type="text/css"  href=”外部样式表文件 xx.css” />

        导入样式

            @import  url(另外一个css样式)

    页面布局思想

        ①分析结构，用div画出骨架，划分好区域，    然后填充内容

        ②清除所有标记原有的margin和padding

比如：body,div,table,tr,td,h1,h2,h3,h4,h5,h6….{margin:0 ; padding : 0;}

         ③设置全局属性：

在body{ } 中： 设置背景颜色/背景图片  网页整体字体大小、字体颜色  字体类别、行间距

全局的超链接的全局样式

列表去除项目符号：ul,li,ol{list-style:none;}

图片去边框 img{border:none;}

等

            举例

                body,ul,li,ol,dl,dt,dd,p,img,a,h1,h2,h3,h4,h5,h6……{

     margin:0px;

     padding:0px;

}

body{

     background-color:#ccc;

     font-size:12px;

     color:#444;

     line-height:180%;

}

ul,li{list-style:none;}

img{border:none;}

.clear{clear:both;}

a:link,a:visited{……}

a:hover,a:active{…….}

 

    行内元素和块元素转换

        行转块：display:block;

        块转行: display:inline;

    控制内容溢出隐藏

        处理溢出的属性：overflow

①overflow : hidden  隐藏溢出的内容（用的较多）

②overflow : scroll 始终显示滚动条

③overflow : auto 系统自动判

④overflow : visible 默认(即使内容超出也可以显示)     

    继承和优先级

        继承性

            外层元素的样式，会被里面的元素所继承。

                可以继承的CSS属性有哪些？

字体、文本样式的属性：

font-size,font-family,font-weight,font-style,font,

text-align,text-decoration,text-indent,text-transform,

color,letter-spacing,word-spacing,line-height

 

列表样式的属性:

list-style,list-image,list-style-type,list-style-position

        优先级

            单个选择器的优先级

                 标签选择器  <类选择器 < id选择器 <行内样式表

            复合选择器优先级

                写的越精确，优先级越高。