前端基础----CSS

#前端三件套之CSS

一、基本概念
C cascading 一层一层的 层叠
C style     风格、样式
S sheet     表
层叠样式表，必须依托于HTML

#/* css的注释 */

#书写位置
 -写在标签的style属性中（内联样式）
    <a href=""  style="属性名：属性值；属性名：属性值；"></a>
   弊端：如果样式太多，整个标签就很臃肿

 -写在页面的style标签中
    <style>

     CSS代码

    </style>
   弊端：如果要美化的目标太多，整个页面就很臃肿

-写在外部的CSS文件中 .css
   在页面上通过<link>标签外部的文件引入进来

#语法规范
  -内联样式
   <a href=""  style="属性名：属性值；属性名；属性值;"></a>

-style标签中以及外部css文件中
  -id选择器
    #id名{
        属性名：属性值；
        属性名：属性值；
        属性名：属性值；
            }

  -class选择器
    .class名{
        属性名：属性值；
        属性名：属性值；
        属性名：属性值；
            }

  -元素选择器/标签选择器
    标签名{
            属性名：属性值；
            属性名：属性值；
            属性名：属性值；
         } 

#css常见美化操作
  -页面美化布局的标签
    -<div></div>块级元素，通常用于整体布局             纯净
    -<span></span>行内元素，通常用于布局文字美化      纯净

  -美化基本功
    -位置
      外边距 margin
          上margin-top  bug描述：如果一个块级元素的第一个儿子设置了上外边距这个元素也会跟着儿子一起下来。（上外边距合并）
          左margin-left
          右margin-right

    -大小
      width 宽
      height 高

    -背景
      background-color
      background-image

    -字体
      font-size   大小
      font-weight 粗细度
      font-family 字体类型

    -颜色
      color

    -边框
      border

    -文本内容
      text-align

    -显示模式
   disply(块级block  行内inline  隐藏none)

支线任务：div背景的透明
  通过background-color:rgba();来设置透明度，例如：background-color:rgba(;255,255,255,0.65)；

补充：属性名
-位置
  margin:0;
margin-left:  px;
margin-right:  px;
margin-top:  px;
使用margin-top时会产生Bug,解决方法是在他的父级加上overflow:hidden;

-宽和高
width:  xp;
height  xp;

-背景设置
background-color:rgb(  ,  ,  );
background-size:  xp;
background-image:url(   /  );

-边界
border:0;
border-radius;

-字体
font-size:  xp;
font-color:  ;

-文本
text-indent:  xp;
text-align:center/right/left;
text-decoration:none;

#-display:block;  将元素显示为块级元素
 -display:inline; 将元素设置为内联元素

-块级元素特点：
 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。
 2、元素的高度、宽度、行高以及顶和底边距都可设置。
 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

- 内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

#padding-top:     指一个元素在内边距区域（padding area）中上方的高度
 padding-bottom:  指一个元素在内边距区域（padding area）中下方的高度
 padding-left:
 padding-right:

#cursor : 网页浏览时用户鼠标指针的样式或图形形状。
属性值：default：默认光标（通常是一个箭头）
       auto：默认，浏览器设置的光标
       crosshair：光标为十字线
       pointer：光标为一只手
       move：光标为某对象可移动
       text：光标指示文本
       wait：光标指示程序正在忙（通常是一只表或者一个沙漏）

二、页面布局

#布局方式

 -表格布局
  优点：页面整齐，知识点简单
  缺点：如果页面元素太多或者太复杂，就会出现表格的，页面的渲染效率下降

 -浮动布局（div+css）
  优点：代码相对简洁，舍弃了复杂的表格嵌套，开发效率高
  缺点：如果命名不规范，维护成本很高，学习成本比表格高
 
#定位（细节的微调，不影响其它标签） 
 -相对定位
  概念：相对于自己原来的位置进行定位调整
  position:relative;

 调整：top left right bottom

 -绝对定位
  概念：默认情况下相对于浏览器进行定位调整
  如果要让元素相对于父级进行调整，就要把父级设置成相对定位或者绝对定位。
  position:absolute
  调整：top let right bottom

记几个属性：float:left;                     左浮动
       border-collapse:collapse；      表格和单元格的边框合并
       border:1px solid black;         边框
       border-right:1px solid black;   右边框
       background-repeat:no-repeat;    背景图像的重复方式