html基础-css样式设计

CSS
1、全称：层叠样式表（目的：将网页的内容和样式分离，利用代码维护）

2、css和html的结合方式
 （1）css和html有四种结合方式
 1：使用html标签属性 <div style="background-color:red;color:blue;">

 2：使用html的标签
   <style type="text/css">
  div {
   background-color:red;
   color:black;
  }
   </style>
 
 3：使用html标签link（html中head里面）
  * 1.创建css文件，写css代码  2.在html中使用link标签引入css文件
  * <link rel="stylesheet" type="text/css" href="1.css"/>
 
 4：使用html的style标签，在标签里面使用语句样式操作
  *1. 创建css文件，写css代码
  * 写style标签，在标签里面 @import url(css路径);

3、css的选择器
 （1）css优先级：一般而言，优先级是后加载的优先级高
 （2）规范： 属性名称1:属性值1;属性名称2:属性值2;
 （3）选择器概念：作用在哪个标签上（选择操作对象）
 
  css的基本选择器：
 第一种：标签选择器
  div {
      background-color: red;
  }

 第二种：class选择器（设置标签内class属性的值）
  .haha {
   background-color:red;
  }

 第三种：id选择器（设置标签内id的属性值）
  #hehe {
   background-color:green;
  }

 （4）选择器的优先级：  style > id选择器 > class选择器 > 标签选择器

4、css的扩展选择器
 （1）关联选择器（设置嵌套标签的样式）
 div p {
  background-color:red;
 }

 （2）组合选择器（标签同级的）
 div,p {
  background-color:green;
 }

 （3）伪元素选择器
 * 比如超链接为例，
 * 状态：原始状态、鼠标悬浮状态、点击状态、点击之后的状态
                   :link       :hover               :active         :visited

补充：
1.路径设置：相对路径 ../等     绝对路径（一般使用带有协议的路径）  使用http://开头
    
2.注释不可嵌套
    
3.建议标签小写、属性值引号引起、属性值区分下大小写
    
4.<a href="javascript:void(0);"></a>表示该超链接不作任何跳转
    
5.一个HTML文档中ID属性的值必须唯一
    
6.浏览器具有容错性、兼容性问题、缓存机制