前端-css

一 css基础
     1.派生选择器：已经定义好的样式不会被覆盖
     css写法 例子：p strong{}
      2.id选择器：以“#”定义
       html中<p id="pid"></p>
       css中   #pid{
                       color: red;
                       }
      3.两者结合：
       <p id="pid">hello<a href="http://www.baidu.com">你好</a></p>
        css中 #pid a{
                    color: red;
                    }
       4.类选择器：以一个点表示（也可用作派生选择器）
       html中<p class="pclass"></p>
       css中   .class{
                       color: red;
                       }
       5.属性选择器（对带有指定属性的HTML元素设置样式）
         <style type="text/css">
           [title]{
                 color: blue;        //属性选择器
                }
           [title=te]{
                     color: red;       //属性和值选择器
                      }
          </style>
           <p title="t">属性选择器</p>   //值任意写
           <p title="te">属性和值选择器</p>  //值必须一致
二 css样式
     1.背景
      （1）background-attachment      背景图像是否固定或随页面其余部分滚动
               background-attachment：fixed；  //背景图片不滚动
      （2）background-color                设置背景颜色
         例 ： body{
                    background-color: gray;
                   }
              p{
                   width: 150px;
                   background-color: aqua;    
                   padding: 10px;          //背景颜色内边距加宽
                }
      （3）background-image               将图片设置为背景
         例：    body{
                    background-image: url("images/me.jpg");
                    }
      （4）background-position            设置背景的起始位置
                background-position: right;   //从整个页面的右面和该图片的中间显示
                background-position: right top;//从整个页面的右面和顶部显示
      （5）background-repeat               设置背景图片是否及如何重复
      （6）background-size                    规定背景图片的尺寸
      （7）background-origin                 规定背景图片的定位区域
      （8）background-clip                     规定背景的绘制区域
      2.文本
        （1）color       颜色
        （2）text-align      对齐文本中的元素  left  right等
        （3）text-indent     缩进元素中文本的首行
                 例：text-indent：-2em；
                        padding-left：2em；  //整体离左边的距离
        （4）text-transform   元素中的字母
                 1）text-transform：capitalize；//每个单词首字母大写
                 2）text-transform：lowerform；//全部小写
                 3）text-transform：uppercase；//全部大写
        （5）text-shadow   向文本添加阴影
        （6）word-wrap   规定文本换行规则