这是我参与「第五届青训营」笔记创作活动的的第2天

CSS简介

Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

CSS可以做什么？

• 设置字体和眼色
• 设置位置和大小
• 添加动画效果

css的三种使用方式

• 外链:使用单独的 .CSS 文件定义，然后在页面中使用 link标签 或 @import指令 引入
• 嵌入:使用HTML标签的style属性定义
• 内联:在页面头部通过style标签定义

css中有什么布局

布局分为三种：文档流、浮动、定位

1. 文档流:块级(block)、行内块(inline-block)、行内盒(inline)

• 块级元素独占一行，可设置width、height
• 行内块元素可以与行内元素(行内和行内块)从左到右排列,可设置width、height
• 行内元素可以与行内元素(行内和行内块)从左到右排列,但不可设置width、height

2.浮动布局 浮动元素的特点： 脱离文档流 浮动元素从左到右排列 浮动元素不会覆盖文字(可以用来实现图片环绕文字的效果)

3.定位

1. 相对定位

先设置元素的position属性为relative,然后再设置偏移量

2. 绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置偏移量

注意：

• 一般来说都会将父标签设置为非static定位
• 如果父标签不是非static定位，则会相对于浏览器窗口进行定位
• 设置元素为绝对定位后，元素会浮到页面上方

3. 固定定位 先设置元素的position属性为fixed，然后再设置偏移量

设置元素为固定定位后，元素会浮动在面面上方

CSS的选择器

• 元素选择器:

    作用：选中对应元素/标签里面的内容 语法：标签名{}
  

• id选择器

    作用：选中对应id属性值的元素  语法：#id属性值{}
  

               

• 类选择器

    作用：选中对应class属性值的元素 语法：.class属性值{}
  

• 通配选择器

        作用：选中页面中所有元素   语法：*{}
  

调试CSS

浏览器快捷键F12和cttrl+shift+I看下面的样式就可以看CSS代码了