css一些基础知识

1.css基本语法

            选择器名称{

                    属性1：属性值1;

                    属性2：属性值2;

             }

            比如：#d1{

                      font-size:50px;

            }

2施加样式，将样式施加到指定的html标签之上，通过选择器来施加。

         a.标签选择器

         body{

              font-size:50px;

              background-color:#cccccc;

         }

        对具有相同标签名的所有标签起作用。

        b.class选择器

        .选择器名称{

         }

         对class属性值和选择器名称相同的标签起作用。

         另一种写法：

         标签名.选择器名称{

         }

        标签的class属性要与选择器名称相同，并且标签名要一致。

        c.id选择器

         #选择器名称{

         }

        标签的id属性要与选择器的名称相同。

        d.选择器分组

         div,h1,p{

               font-size:120px;

         }

        表示对div,h1,p都施加样式

        e.派生选择器

         div p{

              font-size:150px;

          }

3样式的继承：字样式会继承父样式

4样式优先级：

           浏览器默认样式

           外部样式：使用link引入的外部的.css文件

           内部样式：使用style定义的样式

           内联样式：使用标签的style属性定义的样式。

           从上往下，优先级依次增大。

5几个重要的属性：

          a.位置相关的属性：

                   margin:外边距

                   margin-left, margin-right, margin-top, margin-bottom.

                   也可以这样规定四个边距：顶，右，底，左

                   margin:20px  auto   左右剧中，顶底各20px;

                   padding:内边距

                   padding-(left,right,top,bottom)

                  内边距使用时候要注意，子标签会将父标签撑开。

           b.边框

                  border:宽度，样式，颜色

                  border-(left,right,top,bottom)

            c背景

                background-color:背景颜色

                background-image:url(图片的地址);

                background-repeat:no-repeat/repeat-x/repeat-y;   说明平铺的方式

                background-attachment:fixed/scroll(默认)  依附方式

                background-position:100px, 200px; 位置

           d.文字

               font-size:文字大小

               font-weight:粗细 100-900

               font-family:字体

               text-decoration:none/underline 下划线

               cursor:pointer/wait  当鼠标移动到一个位置到时候，鼠标的显示方式

               text-align:left/right/center 文字所在的位置

          e列表

              list-sytle-type:none;  除去小圆点

           f.关键属性

                float;浮动   left/right  其作用是取消标签独占一行的特性。

                clear:取消服从 both

6布局

          body,ul,li,img{

                margin:0px;

                padding:opx;

                font-size:12px;

          }

          对这四个标签，都有同样的作用。

7链接的伪样式

           a:link{color:red} 没有访问时

           a:visited{color.blue} 访问后

           a:active{color.lime}鼠标点击，但是还没有放开时

           a:hover {color:aqua}鼠标方块后。

8cassding style sheet 级联表样式