html，css

CSS（一）

一、CSS概念
1. CSS是Cascading Style Sheet层叠样式表
给网页内容添加多种样式，美化网页


2. CSS三种样式
   内联样式（行内样式）
      <div style="样式"> </div>
 
   内部样式
     <style>
  div{
    样式
  }
</style>
   外部样式
       单独的一个css文件（后缀是.css)
  <link rel='stylesheet' href='文件路径（相对或绝对）' />
3. 优点 
   1）能够做到内容和样式分离，写起来比较简单
   2）样式重用
   3）提高浏览速度，节省网络流量
   
4. CSS的基本语法
   语法
      选择器{
    样式;
 }
 选择器：选择对谁修饰，
 样式：   属性:值;
   注释
/*注释内容*/
二、常用选择器
1.标签选择器
   html的标签都是选择器，会选中所有的同类标签
   标签{
   }
2.class选择器
   .类名{
   }
   选中所有类名相同的标签
  类名命名规则:由数字、字母、下划线组成，不能以数字开头  _x1  R_3
  
  class可以有多个类名 class="类名1 类名2"
  
3.ID选择器
   #id名 {
   }
  在同一文件中id名不能重复
  
4.组合选择器
  可以将多个选择器写在一起，用“，”隔开，选中内容
  方便书写
  .d1,#s1,p{
color:pink;
   }
5.层级选择器
层级选择器可以将有层级关系的选择器用空格隔开，选中某个后代标签
标签之间包含关系就是层级
.grandpa .father .son{
color:green;
font-size:70px;
}

6.伪类选择器
link visited  hover  active  focus first-child last-child
对a标签来说：
link 正常状态
   visited：访问过后的状态
hover: 鼠标放到a标签上的状态
active：鼠标点击a标签的时候的状态
要按照l-v-h-a (love hate)顺序
hover可以针对任何标签，鼠标放到上面的时候的状态
active:激活状态,鼠标按下的状态，针对任何标签
focus:获得焦点的状态，只针对有焦点的标签

first-child：选中父标签里的第一个标签
last-child:选中父标签里的最后一个标签
类型：first-child
:last-child
span:first-child 是说第一个孩子是span类型

7.属性选择器
  [属性] 选中所有具有该属性的标签
  [属性='值']选中属性等于某个值得标签
  [属性]{
  }
8.通用选择器(*) 
  *是通用选择器，选中所有标签，一般不使用
  *{
  }
9.优先级和继承


父标签里设置字体，子标签会自动继承

定位越精确优先级越高
行内样式 > ID选择器 > 类选择器 >标签选择器 >标签本身

三、常用属性
1.单位
常用单位(px\em\rem\%)
 px 像素 
 em 父标签字体的大小 2em  0.4em
 rem 根标签字体的大小
 % 不光用于字体，也可以用于宽高，大小 相对单位
 浏览器字体默认12 14 16px
 
颜色表示方式
      第一种方式：单词 red  green
   
0-9 abcdef
 
 第二中方式：#rgb  #1a801f  rgb红绿蓝
 第三种方式：rgb(r,g,b)  rgb(20,99,20)
2.尺寸(width height)

3.字体
font-size\color\font-weight\font-family\font-style
    font简写(style,weight,size,family)