一.CSS学习(一)

一、CSS简介

1、什么是CSS

1. CSS：Cascading Style Sheet 层叠样式表
2. 是一组样式设置的规则，用于控制页面的外观样式

2、为什么使用CSS

1. 实现内容与样式的分离，便于团队开发
2. 样式复用，便于网站的后期维护
3. 页面的精确控制，让页面更精美

3、CSS作用

1. 页面外观美化
2. 布局和定位

二.CSS语法及特性

1.CSS语法规范

• 选择器：要修饰的对象（东西）
• 属性名：修饰对象的哪一个属性（样式）
• 属性值：样式的取值

  2.CSS应用方式

  1. 内部样式

  也称为内嵌样式，在页面头部通过style标签定义

  对当前页面中所有符合样式选择器的标签都起作用

  2. 行内样式

  也称为嵌入样式，使用HTML标签的style属性定义

  只对设置style属性的标签起作用

  3. 外部样式

  使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入

  实例:

  link标签引入

  @import指令 引入

  3.CSS 选择器

  选择器分为基础选择器和复合选择器两个大类(本文先讲基础选择器)

  基础选择器是由单个选择器组成的，包括：标签选择器、类选择器、id 选择器和通配符选择器

  1. 标签选择器

  标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

  标签选择器可以把某一类标签全部选择出来，比如所有的  标签和所有的  标签。

  优点：能快速为页面中同类型的标签统一设置样式。

  缺点：不能设计差异化样式，只能选择全部的当前标签。

  标签名{
   属性1: 属性值1; 
   属性2: 属性值2; 
   ...
  }
  

  2. 类选择器

  想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器，类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。

  在标签class 属性中可以写多个类名，多个类名中间必须用空格分开。

  .类名 {
   属性1: 属性值1; 
   ...
  }
  

  3.id选择器

  id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

  HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

  注意：id 属性只能在每个 HTML 文档中出现一次。

  #id名 {
   属性1: 属性值1; 
   ...
  }
  

  4.通配符选择器

  在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

  * {
   属性1: 属性值1; 
   ...
  }
  

  基础选择器	作用	特点	使用情况	用法
  标签选择器	可以选出所有相同的标签比如p	不能差异化选择	较多	p { color: red;}
  类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color:red; }
  id选择器	一次只能选择1个标签	ID属性只能在每个 HTML文档中出现一次	一般和js搭使用	#nav {color: red;}
  通配符选择甜	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

  三.CSS 字体属性

  CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

  属性	含义	说明
  font-size	大小、尺寸	我们通常用的单位是px 像素，一定要跟上单位
  font-weight	粗细	记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
  font-family	字体	实际工作中按照团队约定来写字体
  font-style	样式	记住倾斜是 italic  不倾斜 是 normal 工作中我们最常用 normal
  font	简写

  使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开,不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

  四.文本属性

  CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

   

  五.背景属性

  1. background-color

  取值：transparent 透明

  2. background-image

  • 必须使用url()方式指定图片的路径
  • 如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件

    3. background-repeat

    取值：repeat(默认)，repeat-x，repeat-y,no-repeat

    4. background-position

    默认背景图显示在左上角

    取值：

    • 关键字：top、bottom、left、right、center
    • 坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向

      CSS雪碧图，即CSS Sprites,也称为CSS精灵,一种CSS图像合并技术

      含 义：将网页中许多非常小的图标/图片整合到一张大图中，当访问面面时只需要下载一次，可以减少访问服务器的次数，提高性能

      原理：使用background-position进行背景定位，使用坐标精确地定位出背景图片的位置

      5. background-attachment

      取值：scroll(默认)、fixed固定不动

      6. background

      简写属性：background:background-color|background-image|background-repeat|background-position以空格隔开，书写顺序没有要求

      六.列表属性

      1. list-style-type

      取值：none、disc、circle、square、decimal

      此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了

      2. list-style

      简写属性：list-style:list-style-type|list-style-image|list-style-position

      书写顺序没有要求