CSS笔记

一、基本阐述

div+css是一种目前比较流行的网页布局技术

div来存放需要显示的数据（文字，图标。。。。）css就是用来指定怎样显示，从而做到数据和显示相互分离的效果

table布局的分析

div+css布局

二、 引入CSS

   内联：<style type="text/css" >

                   img{

                         filter:gray;

                          }

              </style>

    外联：<link rel="stylesheet" type="text/css"  href="路径" />

    内嵌：

   优先级：行内样式>内联>外联 

    使用情况：1、行内样式在代码量较少情况下使用

                  2、内联主要用于单个网页

                  3、外联样式主要用于多个网页制作

   css的基本用法

三、选择器

     3.1、类选择器

           . class选择器名{

                           属性：属性值；

                             、、、、、、

               }

       3.2、id选择器

              # Id选择器名{

                           属性：属性值；

                             、、、、、、

 

                }

        3.3、html选择器(html元素的一种)

                 html选择器名{

                           属性：属性值；

                             、、、、、、

                  }

           

          3.4、通配符选择器(可以作用到所有html元素)

                   *{

                             属性：属性值；

                              、、、、、、

                    }

 

    优先权： id选择器 > class选择器 >html >通配符

    组合选择器（逗号隔开）h,p{ }

    后代选择器（空格隔开）ul li { }

    相邻选择器 （加号 /同级元素） 

     父子选择器（大于符号隔开） .div > p { }

四、字体样式

      4.1   color   颜色

        4.2   font-size    字体大小   lengthpx

        4.3   font-style    字体倾斜   normal正常 italic斜体

        4.4   font-weight   字体加粗  bold 加粗 100-900 

        4.5   font-family    设置文字字体   楷体/宋体

        4.6   text-decoration ： none  去掉下划线       文字装饰

                          overlive   上划线              underline : 下划线

                          line-throngh   贯穿线        blink ： 闪烁

        4.7   line-height     行高 两行文字中间的垂直距离  line-height:50px;

        4.8   list-style ： none       去掉 li 的点 

        4.9   letter-spacing : 数字px     字符间距离

        4.10  word -spacing  : 数字px      单词间距

五、文本样式

       5.1  text-align : left / center /right         水平对齐

         5.2   vertical - align : modile / top /bottom      垂直对齐

         5.3   text-indent : 数字px ；     首行缩进 

         5.4   border_bottom :1px   dottend / ashed / dashed  block ;  下划线

六、盒子模型

     宽：width:Xpx;

      高：height:ypx;

      边框： border : none/dottend(点线) / dashed 虚线 / solid 实线

      不同方向的边框 ： border-top / right / left / bottom

      内边距：padding :10 ;  表示上下左右内边距都是10px

                    padding : 10px 5px ;  表示上下内边距是10px，左右内边距是5px

                    padding : 10px 5px 15px ;  表示上内边距是10px，左右内边距是5px ，下内边距是15px

                    padding : 10px 5px 15px 20px ; 表示上内边距是10px，右内边距是5px ，下内边距是15px， 左内边距是10px

                    padding-top/right/left/bottom

      外边距： margin  同内边距

     display : none  不显示

                   block 表示使用块元素方式显示

                   inline  表示使用行内元素方式显示

      margin : 0 auto   上下为0左右为auto自动居中   盒子居中

      样式初始化：*{

                               margin:0;  padding:0;  font-size=12px;

                           }

 七、网页布局

           浮动：float : none / right / left

          注意：在float 操作时，子盒子的宽度综合必须小于父亲盒子宽度

                    同一行的浮动使用完毕，最好在最后清楚浮动（解决父亲盒子自动撑高的目的）

 八、属性选择器

         语法：[属性]{css样式}

                  [属性=”属性值“]{css样式}

         <style type="text/css">

                [align]{ border:1px solid red ; backgorund:green ; }

                [align="center"]{ border:1px solid red ; backgorund:green ; }

         </style>    

九、伪类选择器

   语法 ： a : link { css样式 }

    根据元素的状态进行选择

           未访问连接 link

           鼠标悬停上面 hover

           鼠标按下后的状态 active

           访问后的状态  visited

十、背景样式

      backgorund 复合属性

      backgorund-image = url 设置背景图片

      background -color : 背景颜色

      backgorund - repeat 设置背景平铺 x 横向平铺 y 纵向平铺

       注意：当父级元素宽度高度大于图片宽高时就会横纵向平铺

     background-position  : x y ;    图片定位

        .t1{

            width:50px;

            height:100px;

            background -repeat : no-repeat ; 不平铺

            background-position：100px 100px

          }

 十一、定位

         position :位置

                        属性：absolute 绝对定位  层次高于网页浮动（层次高于整个网页）

                                   relative 相对定位   层次不会高于整个网页

                                   fixed  固定定位

        一般position会结合位置的设定使用  left 距离左端的位置

                                                                                    top 距离上端的位置

                                                                                    right   右（弹框）

                                                                                     bottom 下 （弹框）

      所有的定位可以设定他的层次  Z-index : 数字    数字越大层次越高

   .pos{

           width : 100px;

           height : 100px;

           polition :absolute;

           left:400px;

           top:400px;

     }

 十一、其他一些常用总结

        1、overflow : hidden ; 超出区域影藏

         2、hspace = "20"水平方向的间距

         3、 vspace 文字和图片垂直方向的间距

         4、border-radins : 10% 设置圆角度

         5、outline 外边框

         6、border-collapse : collapse; 去掉表格边框合并

         7、鼠标移上去变成手型 cursor:pointer;

 

转载于:https://www.cnblogs.com/sanqiyi/p/6659829.html