CSS基础介绍2

CSS使用三种方式

方式1：在标签的style属性上设置CSS样式（行内样式）

  
    
    
  
  
    
hello,北京
    

    
hello,上海
    

    
hello,天津
    

  

问题分析
*标签多了，样式多了，代码量庞大
*可读性差
*CSS代码没有复用性

方式2：在head标签中，使用style标签来定义需要的css样式（head标签style指定）

  
    
    
    
  
  
    
hello,北京
    

    
hello,上海
    

    hello,span
  

问题分析
*只能在同一页面内复用代码维护不方便
*实际项目中会有很多页面，需要到对应页面去修改。工作量大

方式3：把CSS样式写成单独的CSS文件，再通过link标签引入（引入外部CSS文件）

div{
  width:200px;
  height:100px;
  background-color:brown;
}
span{
  border:2px dashed blue;
}

  
    
    
    
    
  
  
    
hello,北京
    

    
hello,上海
    

    hello,span
  

CSS选择器

CSS元素选择器

1.最常见的CSS选择器是元素选择器。换句话来说，文档的元素就是最基本的选择器
2.CSS元素/标签选择器通常是某个HTML元素，比如p、h1、a div等
3.比如：

4.应用实例

  
    
    
    
    
  
  
    
夏目友人帐
    
hello,world
  

ID选择器

1.id选择器可以为标有特定id的HTML元素指定特定的样式
2.id选择器以“#”来定义
3.比如：

4.应用实例 id-selector.html

  
    
    
    
    
  
  
    
夏目友人帐
    
hello,world
  

class选择器（类选择器）

1.class类选择器，可以通过class属性选择去使用这个样式
2.基本语法

3.应用实例 class-selector.html

  
    
    
    
    
  
  
    
韩顺平教育
    
hello,world
  

组合选择器

1.组合选择器可以让多个选择器共用同一个css样式代码
2.语法格式

3.应用实例 all-seletor.html

  
    
    
    
  
  
    
韩顺平教育
    
hello,world~
  

优先级说明

行内样式>ID选择器>class选择器>元素选择器
CSS课后练习
CSS 测验

/*顺时针方向指定的*/