CSS

1.css介绍

css指的是层叠样式表（cascading style sheets）

官方文档：https://www.w3school.com.cn/css/index.asp

• 为什么需要css？

1. 在没有css之前，我们想要修改html元素的样式需要为每个html元素单独定义样式属性，费心费力。所以css就出现了。
2. 使用css将html页面的内容与样式分离，提高web开发的工作效率（针对前段开发）

• css快速入门-例子

  创建html文件完成如下网页显示：

  

  
  
  
      
      
      
      
  
  
  hello,北京
  
  
  hello,上海
  
  
  hello,天津
  
  
  
  
  

  

2.css语法

1. css语法可以分成两部分：（1）选择器（2）声明

2. 声明由属性和值组成，多个声明之间用分号分隔

   

3. 最后一条声明可以不加分号（建议加上）

4. 一般每行只描述一个属性

5. css注释：/*注释内容*/，类似java，快捷键是ctrl+/

3.css常用样式

3.1字体颜色和边框

• 字体颜色

  颜色可以写颜色名，比如green；也可以写rgb值，比如rgb(200,200,200)；十六进制表示值，比如#708090

  

  
  
  
      
      
      
  
  
  一只小猫咪
  
  
  

  

• 边框：属性border

  例子

  
  
  
      
      
      
  
  
  一只小猫咪
  
  
  

  

3.2宽度和高度

• 宽度width和高度height的值，可以用像素：100px，也可以是百分比：50%

  /*width: 300px;*/
  width: 50%;/*百分比*/
  

使用百分比可以自适应浏览器的宽度和高度

3.3背景颜色和字体样式

• 背景颜色

  属性background-color

  
  
  
      
      
      
  
  
  hello,北京
  
  
  

  

• 字体样式

  • font-size：指定大小，可以按照像素大小
  • font-weight：指定是否是粗体
  • font-family：指定类型

  例子

  
  
  
      
      
      
  
  
  hello,北京
  
  
  

  

3.4div和文本居中

• div居中

属性margin-left 和 margin-right 都设置为auto的话，表示左右居中

例子

    
    
    


hello,北京

• 文本居中

属性text-align，值为center时表示文本居中

例子

    
    
    


hello,北京

3.5超链接去下划线

属性text-decoration，值为none时表示无修饰

    
    
    


点击百度

3.6表格细线

设置边框 : border: 1px solid black

将边框合并: border-collapse: collapse;

指定宽度： width

设置边框： 给 td, th 指定即可 border: 1px solid black;

1. table, tr, td 表示组合选择器
2. 就是 table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性

例子

    
    
    



    

        
星期一菜谱
    
    

        
素菜
        
青草茄子
        
花椒扁豆
    
    

        
小葱豆腐
        
炒白菜
    
    

        
荤菜
        
油闷大虾
        
海参鱼翅
    
    

        
红烧肉
        
烤全羊
    

3.7列表去修饰

属性list-style的值为none时，表示去掉默认的修饰

例子

    
    
    



    
三国演义
    
红楼梦
    
西游记
    
水浒传

4.css三种使用方式

• 方式1：在标签的style属性上设置css样式

  问题分析：

  • 标签多了，样式多了，代码量庞大
  • 可读性差，维护麻烦
  • css代码没有复用性

  例子

  
  
  
      
      
  
  
  hello,北京
  
  
  hello,上海
  
  
  hello,天津
  
  
  
  
  

  

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

  例子

  
  
  
      
      
      
  
  
  hello,北京
  
  
  hello,上海
  
  
  hello,span
  
  
  
  
  

  

• 方式3：把css样式写成单独地css文件，在通过link标签引入（推荐使用）

  例子

  
  
  
      
      
      
      
      
      
      
  
  
  hello,北京~
  
  
  hello,上海
  
  
  hello,span
  
  
  
  
  

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

  

5.css选择器

5.1css元素选择器

1. 最常见的css选择器是元素选择器。换句话说，文档的元素就是最基本的选择器
2. css元素/标签选择器通常是某个html元素，比如p、h1、a等
3. 元素选择器会修饰所有的对应的元素

例子

    
    
    


一只大猫咪
一只小猫咪

5.2ID选择器

元素选择器会修饰所有的对应的元素，但是假如希望某一个html元素使用特定的样式，而这个元素已经用了元素选择器修饰，这时候就可以使用id选择器来进行特殊的指定

1. id选择器可以为标有特定id的html元素指定特定的样式
2. id选择器以#来定义

例子

    
    
    
    


Hello，北京
hello，上海

5.3class选择器(类选择器)

假如html文件中有三个div标签：

如果使用元素选择器的话，所有的div元素都会受到影响；

如果使用id选择器的话，可以唯一地修饰其中某一个div元素；

但是如果想要修饰其中两个div，这时就不能用id选择器，因为id选择器只能唯一地修饰一个div元素，也不能使用元素选择器，这时候就需要使用class类选择器。

class类选择器可以在许多元素（不一定是相同的元素）当中，挑选出其中的一部分来进行修饰。

唯一修饰使用id选择器，部分修饰使用类选择器，全部修饰使用元素选择器

1. class类型选择器，可以通过class属性选择去使用这个样式

2. 基本语法

   .class 属性值{属性:值;}
   

例子

    
    
    
    


Hello，北京
Hello，world
ni hao
hello，上海

5.4组合选择器

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

2. 语法格式

   选择器1,选择器2,选择器n{属性:值;}
   

例子

    
    
    


Hello，北京
hello，上海

5.5优先级说明

行内样式优先级 > id选择器优先级 > class选择器优先级 > 元素选择器优先级

例子

    
    
    


选择器的优先级说明

一只猫猫在睡觉

两只猫猫在睡觉

三只猫猫在睡觉

6.练习

CSS 测验 (w3school.com.cn)