CSS

属性

1. 宽高

   /*只有块级元素才有宽和高*/
   width:200px;
   height:200px;

    

2. 字体
   1. 显示字体

      /*后面可以跟多个字体，如果系统中不存在第一个字体，就用第二个以此类推。如果一直到最后都没有那么用系统默认的*/
      font-family: "Microsoft Yahei","微软雅黑","Arial";

       

   2. 字体大小

      font-size:10px

       

   3. 字重(粗细)

      font-weight:
                      bold    粗体
                      bolder  更粗 相对于父标签的字体，比父标签更粗
                      lighter 更细 相对于父标签的字体，比父标签更细
                      100     100~900设置具体粗细 400=normal 700=bold
                      inherit 继承父元素字体粗细值

       

       

   4. 文本颜色

      color:
                      颜色名称：white
                      十六进制：#FFFFFF
                      RGB形式：rgb(255,255,255)
                      RGB形式：rgba(255,255,255,0.4) 0.4表示透明度

       

   5. 文字对齐

      text-align:
                      left   :左对齐默认值
                      right  :右对齐
                      center :居中
                      justify:两端对齐

       

   6. 文字装饰

      text-decoration:
                      none:默认
                      underline:文本下一条线
                      overline:文本上一条线
                      line-through:穿过文本的一条线
                      inherit:继承父元素的text-decoration

       

   7. 首行缩进

      text-indent:
                  32px 缩进32像素，可以根据字体大小来设置首行缩进两个字符

       

3. 背景属性
   1. 背景颜色

      background-color:red;

       

   2. 背景图片

      background-image:url('1.jpg')

       

   3. 背景样式

      background-repeat:
          repeat 默认背景图片平铺满整个网页，背景重复
          repeat-x 背景图片只在水平方向上平铺
          repeat-y 背景图片只在垂直方向上平铺
          no-repeat 背景图片不平铺

       

   4. 背景位置

      background-position:
          right top
          200px 200px

       

   5. 背景图片动作

      background-attachment:
          scroll  默认值。背景图像会随着页面其余部分的滚动而移动。
          fixed   当页面的其余部分滚动时，背景图像不会移动。
          inherit 规定应该从父元素继承 background-attachment 属性的设置。

       

4. 边框

   border全部边框
      border-top上边框
      border-bottom下边框
      border-left 左边框
      border-right 右边框
      a.宽度
         border-width:
      b.样式
         border-style:
         solid 实线
         dashed 方块虚线
         dotted 圆点虚线
      c.颜色
         border-color:
   
      c.圆角边框
         border-radius:设置50%就会变成圆

    

5. 显示效果

   display:
      none 不显示，不占位置
      block 默认占满整个页面宽度，如果设置了宽度剩下的会用margin填充剩下的部分
      inline 按行内元素显示，设置width，height，margin-top,margin-bottom,float属性无效
      inline-block 同时具有块元素和行内元素的特点
      visibility: hidden; 不显示但是还占位置

    

6. 盒子模型

   padding:内容跟边框的距离
   margin: 两个标签之间的距离

    

7. 浮动

   浮动可以往左浮动，或者往右浮动，直到他遇到包含框，或者另一个浮动框的边框
   由于浮动框不在文档的普通流中，所以文档流中的普通块框，表现得就像浮动框不存在一样
   flot:
      left 左浮动
      right右浮动
      none 不浮动
   clear:用于撑开包含浮动元素的父标签
      left 表示左侧不允许有浮动元素
      right 表示右侧不允许有浮动元素
      both  表示两侧不允许有浮动元素
      none  默认值，表示允许两侧有浮动元素
      inherit 从父级继承clear的值
   
   使用伪元素撑开父级元素的方法,给父级元素加入prop类就可以
      .clearfix:after{content: "";clear: both;display: block}

    

8. 阴影

   box-shadow(x方向阴影大小，y方向阴影大小，将阴影模糊成多大(一般式阴影大小*2)，阴影颜色)
   
   或者

   <div  style="margin-top: 200px;padding: 50px;background-color: rgba(0, 0, 0, 0.2);width: 800px;margin-left: 295px;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.5);"></div>

    

9. 透明度

   opacity

    

选择器

1. 伪类选择器

   /*======================伪类选择器=====================*/
           /*   未点击的样式*/
           a:link {
               color: red
           }
   
           /*   已访问的样式 */
           a:visited {
               color: black
           }
   
           /*    鼠标移上去，不止是a标签，其他标签也可以使用*/
           span:hover {
               color: coral
           }
   
           /*    鼠标点中但是还没有弹起状态，不止是a标签，其他标签也可以使用*/
           span:active {
               color: red
           }
   
           /*    获取焦点*/
           input:focus {
               border: salmon solid 1px;
           }
   
           /*======================伪元素选择器=====================*/
           /*    段落首字母*/
           p:first-letter{font-size: 10px;color: coral;}
           /*    在标签内部第一个位子加入内容*/
           p:before{content: 'hahah';color: salmon}
           /*    在标签最后加入内容*/
           p:after{content: 'heiheihei';color: salmon}

    

2. 基本选择器

   /*======================普通选择器=====================*/
       /*  标签选择器*/
           div{color: red}
       /*  ID选择器*/
           #d2{color: green}
       /*  类选择器*/
           .a{color: aliceblue}
       /*  通用选择器*/
           *{color: brown;}
   /*======================组合选择器=====================*/
       /*    后代选择器，从div子子孙孙中找span*/
           div span{color: red}
       /*    儿子选择器*/
           #d5>span{color: blue}
       /*    毗邻选择器 只影响后面的标签，前面标签不变*/
           p+*{color: aqua}
       /*    弟弟选择器 选择p标签后面同级的span标签，中间是否隔着其他标签不影响*/
           p~span{color: yellow}
   /*======================属性选择器=====================*/
       /*    找到abc属性等于“999”的标签 class属性可以简写 例：div.c1表示找class有c1的div*/
           [abc="999"]{color: coral}
       /*    找到有abc属性的标签*/
           [abc]{color: gray}
       /*    找到有abc属性的span标签*/
           span[abc]{color: gray}
       /*    找到abc属性以9开头的标签*/
           [abc^="9"]{color: #000;}
       /*    找到abc属性以9开头的标签*/
           [abc$="9"]{color: #000;}
       /*    找到abc属性包含9开头的标签*/
           [abc*='9']{color: coral}
       /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
           [title~="hello"] {color: green;}
   /*======================分组和嵌套=====================*/
       /*同时为div和p设置属性*/
           div,p{color:red}

    

3. 定位

   /*
       相对定位：
           relative
               相对于自己原来的位置移动,但是在文档流中占得位置还是原来的位置
       绝对定位：
           absolute
               元素从文档流中删除(相当于浮动),位置移动相对于祖先元素，如果没有祖先元素则相对于body
       固定定位：
           fixed
               元素脱离原来的文档流，相对于窗口的位置定位，滚动页面位置也不移动
   
   */
   
       .c2{
           /*相对定位*/
           background-color: green;
           position: relative;
           left: 100px;
       }
       .c3{
           /*绝对定位*/
           background-color: blue;
           position: absolute;
           left: 200px;
           top:0
       }

    

4. 溢出

   /*==================溢出  */
   /*
      溢出
           overflow 水平和垂直方向均设置、overflow-x 设置水平方向、overflow-y 设置垂直方向:
               visible 默认值，内容不会被修剪，会曾现在元素框之外
               hidden  内容会被修剪，并且其余内容是不可见的
               scroll  内容会被修剪，但是浏览器会显示滚动条，以便查看其余内容
               auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
               inherit 规定应该从父元素继承overflow属性的值
   
   */