web前端——css学习

问题

• 什么是css?
• 为什么会有css？
• css和HTML怎么样结合？

css (what)

这是W3School给的定义

W3school的定义

** 百度百科 **：
Cascading Style Sheets(层叠样式表缩写)。是一种用来表现 HTML（ 标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

css优点 （why）

主要为了弥补html的不足

• HTML的缺陷：
  1. 不能够适应多种设备
  2. 要求浏览器必须智能化足够庞大
  3. 数据和显示没有分开
  4. 功能不够强大
• CSS 优点：
  1.使数据和显示分开
  2.降低网络流量
  3.使整个网站视觉效果一致
  4.使开发效率提高了

具体实现（how）

首先看整个的思维导图

整个需要了解的几大方面

在了解了什么是css，之后最想了解的便是它是如何运用到html中去的。

格式：

标签选择器 { 属性名称：属性值} (中间以分号；隔开)

三种方式：

三种使用方式

• 外部样式表，需要在写在当前html文件之外的单独的一个文件以.css为扩展名的文件,具体实现如上图思维导图
• 内部样式表 , 一般写在标签中，用

  这是写的第一个css样式标签

  p的普通选择器标签

  label的类选择器标签
  i的ID选择器标签
  

  效果图

  上述简单的例子有一些选择器冲突 ，所以就产生了优先级，另外还有属性互补原则。

  

  选择器的优先级别

  扩展选择器

  基本分三类选择器：

    1，组合选择器
    2，关联选择器  
    3，伪类选择器 
  

  

  扩展选择器

  Demo:

  
  
      
      
  
  
  
  
      
  一级标题
      
  二级标题
      label的类选择器标签
  
  
      
  这是关联选择器里面的p标签
      
  这是不在关联选择器中的p标签
  
      这是一个嵌入伪类选择器的超链接
  
  
      
      这是一个class为two的伪类选择器的超链接
  
  
      
      请输入
  
      你好，明天
  
   
  

  运行结果

  
  
  

  运行结果

  各种属性

  这些属性其实就只需要记几个常用的就行了，不记得了，等要用的时候再查表

  
  
  

  基本属性
  

  文本属性
  

  背景属性
  

  字体文字属性
  

  其他

  至此，CSS的学习告一段落，基本都是从W3School那里学习得来，只不过自己用思维导图整理了一下，另外自己也实现了，有个印象，想提升则需要在项目中去历练。