css3语法、尺寸与边框

1、html 属性所带来的问题
   1、相同的效果，不同的标签会通过不同的属性来表示
   2、使用属性 很不通用，一对一的修改，而不是整体修改
2、使用 CSS  来解决上述问题
   1、什么是CSS
      CSS : Cascading Style Sheet ,层叠样式表,级联样式表,样式表
   2、作用
      1、实现内容和表现分离
      2、提高代码的可重用性和可维护性
   3、HTML属性 &  CSS样式
      能有CSS的话，一定使用CSS来实现样式
      如果CSS实现不出来效果，则选择使用html属性
3、使用CSS样式表
   1、使用CSS的方式
      1、内联方式(行内样式)
         将css样式定义在某个单独的标签中
<div style="color:red;"></div>
      2、内部样式表
         将CSS样式定义在网页中的 <head></head> 中
特点：针对当前网页网页有效
      3、外部样式表
         将CSS样式定义在一个外部 .css 的文件中，哪个网页用，哪个网页进行引用
特点：所有网页公用，真正意义的实现了重用性 和 可维护性
   2、内联方式(行内样式)
      将  样式内容  写在 html元素中的style属性中
      CSS语法:
       属性:属性值;


       <div style="属性:属性值;属性:属性值;...."></div>
       常用属性:
           color : 修改当前标签中文本的颜色
  background-color : 修改当前标签的背景颜色
   3、内部样式表
      【样式规则】 存放在 html文档头部 【head标签】中的 【style 标签】内
      样式规则:
          选择器{
样式声明
属性:属性值;
属性:属性值;
属性:属性值;
属性:属性值;
 }
 选择器：
     1、定义了一组样式的名称
     2、哪些元素能够使用定义好的样式
 p{
color:red;
background-color:blue;
 }


   4、外部样式表
      将 样式规则 单独存放在 样式表文件中(**.css),哪个页面想使用，哪个页面就引入当前的样式表文件
      step 1 :
           创建一个文本文件，将其后缀修改为 .css
  在该文件中编写若干 样式规则
      step 2 :
           在想使用的页面上， 通过 <link /> 引入外部样式表
  <link rel="stylesheet" type="text/css" href="样式表文件路径" />
4、样式表特征
   1、继承性
      大多数的css样式规则可以被继承的。
   2、层叠性
      为同一个元素 定义多个 样式规则
      多个样式规则同时存在时不冲突，多个样式规则会合并成一个，属性重复时以最后一个出现为准。
   3、优先级
      各级样式表冲突时(行内、内部、外部)，会按照不同的优先级来应用样式
      0 : 浏览器缺省设置
      1 : 内部样式表 或 外部样式表
          冲突时：就近原则，谁在下，以谁为主
      2 : 行内样式(内联样式)
   4、!important 规则
      通过 !important 显示调整样式规则的优先级
      放在属性值之后，用 空格 来区分。
      由!important 标识的属性值，优先级别最高
      谨慎使用
  
5、CSS基础选择器
   1、元素选择器
      别名:标签选择器、标记选择器


      特点：通过元素名称作为选择器名称
      作用：修改某一元素的默认样式
      body{}
      h1{}
      h2{}
   2、类选择器(类样式)
      特点：通过元素的 class 属性来进行引用
      作用：定义某一组标签的统一样式
      语法：.className{color:red;bakcground:yellow;}
           注意：className不能以数字开头
  引用：<div class="className"></div>
<h3 class="className"></h3>


      注意：在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开
   3、分类选择器
      由类选择器衍生出来的新选择器
      将类选择器 与 元素选择器 结合使用
      目的：为了更精准的定位的页面的元素
      语法：元素选择器.类选择器{}
             p.important{}
   4、通用选择器
      作用：适配页面上所用的元素，改变他们的样式
      语法：*{}
   5、id选择器(id样式)
      作用：通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。
      语法：#id{}
      eg : #top{background-color:red;}
           <div id="top"></div>
  id的作用：
     1、定义元素在页面中的唯一标识
     2、引用样式表中的id样式
   6、群组选择器
      选择器声明是以 , 隔开的 选择器列表
      作用：定义一组元素的样式
      h3,p,.new,#test,div.newDiv,p.test{}
   7、后代选择器
      根据元素的嵌套关系来定义的样式
      根据一个元素 去定位 它里面的其他元素
      语法：
          selector1 selector2{}
 selector1 selector2 : 是之前学习过的任何一种选择器


 <div>
<div>
<p>
<span></span>
</p>
</div>
<span></span>
 </div>
   8、子代选择器
      要求选择器之间只能存在父子关系
      语法:
         selector1>selector2
#test>.news{
修改 id为test里面的 class为news的元素(下一级)
}


      后代选择器 和 子代选择器 目的是为了精确匹配范围
   9、伪类选择器
      匹配元素 不同状态时候的选择器 
      语法：selector1:伪类选择器
      伪类选择器分类：
        1、链接伪类
  :link : 适用于尚未访问的链接(使用较少)
  :visited : 适用于访问过的超链接(使用较少)
2、动态伪类
  :hover : 适用于鼠标悬停在元素上面时候的状态
  :active : 元素被激活的一瞬间的状态
  :focus : 适用于元素获取焦点时的状态(input(text,password))
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
6、颜色值:
   1、颜色的英文表示法(没人用)
   2、rgb(R,G,B)
      R : red  0-255
      G : green 0-255
      B : blue 0-255
      rgb(0,0,0) : 表示黑色
      rgb(255,255,255) : 表示白色
      rgb(125,16,72) :
   3、rgb(x%,x%,x%)
      rgb(30%,25%,78%)
   4、#rrggbb
       r:0-9 A-F
       g:0-9 A-F
       b:0-9 A-F


       #000000 : 黑色
       #ffffff : 白色
       #ff0000 : 红色
       #e4393c : 京东红
   5、#rgb
      #rrggbb 的缩写


      #ff0000 --> #f00;
      #77aaee --> #7ae;
      #e4393c --> 无


      #000;
      #111
      #222
      ...
      #eee
      #fff;
7、属性 - 尺寸
   设置元素的 宽度  高度
   1、宽度 
      width :


      max-width:
      min-width: 与 max-width一同定义元素宽度的范围，与width冲突
   2、高度
      height :


      max-height:
      min-height:
   注意：
        只有 块级以及行内块 能够更改 width 和 height
行内元素不能修改 width  和  height
   3、溢出
      属性：overflow
      作用：当内容溢出元素框时，如何处理
值: visible 显示(默认)
   hidden 隐藏(常用)
   scroll 有滚动条
   auto 自动,溢出则显示滚动条，不溢出，没有滚动条
      属性:overflow-x : 横向溢出时处理
           overflow-y ： 纵向溢出时的处理方式
8、边框
   属性:
简写方式:
border:width style color;
   width:边框线条的宽度
   style:边框线条的样式,如实现(solid)、虚线(dotted)
   color:边框线条的颜色


   一次性 设置 上下左右 四个边框的 宽度 样式 颜色
   border:1px solid #f00;
单边定义：
   border-方向:width style color;
     方向:top,bottom,left,right
     border-top:2px solid #000;
border-width:四个边框的宽度
border-style:四个边框的样式
border-color:四个边框的颜色


border-方向-属性:
  方向：top,bottom,left,right
  属性：color,width,style
注意：边框颜色 除了可以设置正常颜色值之外，还可以设置为 transparent(透明)
border-color:transparent;
border:2px solid transparent;
9、边框倒角(非重点)
   元素 的四个方向的圆角设置
   属性：border-radius
   取值：
1、给定4个值， 分别表示从左上角开始 按顺时针方向的四个角圆角半径
2、给定1个值，表示四个角的圆角半径


给定指定数值，2px , 10px
   百分比,当前元素的宽度 的百分比 作为圆角半径
   单独定义:
     border-top-left-radius:
     border-top-right-radius:
     border-bottom-left-radius:
     border-bottom-right-radius:
10、边框阴影(非重点)
    属性:box-shadow : 给指定元素边框增加阴影
      box-shadow:h-shadow v-shadow blur spread color inset;
         h-shadow:阴影水平位置
v-shadow:垂直位置
blur : 可选,模糊程度
spread :可选,阴影尺寸
color : 可选,颜色
inset : 可选,将阴影改为 内阴影 


      常用写法:box-shadow:h-shadow v-shadow blur color;
11、图片边框(非重点)
    让图片作为元素的边框出现
    属性:border-image:source width repeat
12、轮廓(非重点)
    元素的周围绘制一条线，位于边框之外
    outline:width style color;
    outline:10px solid red;