day03CSS 基础

一、css：层叠样式表

作用：修饰网页样式

  1.语法：

  { 属性：属性值； 属性：属性值； 属性：属性值； ..... }

  2.css 样式：

   背景色 background-color：red； 宽度 width：200px； 高度 height：200px； 文字颜色 color：red；

二、css 样式

  1.行内样式（内联样式）

  <p style="background-color: aqua;"></p>

  2.内部样式

  <style> p{ width: 200px; height: 200px; background-color: brown; } </style>

  3.外部样式

   新建 css 文件

    1.link 方法

    <link rel="stylesheet" href=""> rel="stylesheet"关联样式表 href=""引入路径

    2.import 方法

    <style type="text/css"> @import url（目标文件的路径及文件名全称）； </style>

    3.link 和 import 差别

    差别 1：本质的差别：link 属于 XHTML 标签，而@import 完全是 CSS 提供的一种方式。 差别 2：加载顺序的差别：当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而@import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import 加载 CSS 的页面时开始会没有样式。 差别 3：兼容性的差别：@import 是 CSS2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5 以上的才能识别，而 link 标签无此问题。 差别 4：使用 dom（document object model 文档对象模型 ）控制样式时的差别：当使用 javascript 控制 dom 去改变样式的时候，只能使用 link 标签，因为@import 不是 dom 可以控制的

  4.css 引入样式的优先级

   行内样式（内联样式）>内部样式 行内样式（内联样式）>外部样式 内部样式和外部样式：当选择器相同时，要看引入的先后顺序，后面的会覆盖前面的

三、选择器（选择对应的容器）

  1.标签选择器|标记选择器|元素选择器

  标记{ 属性：属性值； ..... }

  2.类名选择器|class 选择器

   .类名{ 属性：属性值； .... } 一个类名可以给多个标签使用 一个标签可以起多个类名，多个类名之间用空格隔开

  3.id 选择器

  #id 名{ 属性：属性值； ..... } id 名具有唯一性，不能重复，行业规定

  4.群组选择器（用逗号隔开）

  选择器，选择器，选择器，.....{ 属性：属性值； ..... }

  5.后代选择器

   选择器 1 选择器 2{ }

  6.通配符选择器-----去除默认样式

  *{ padding: 0; margin: 0; }