css入门学习笔记（一）

2022-06-27 164 阅读2分钟

一.认识css

css作用
- 层叠式样式表：cascading style sheets。
  
  给网页添加样式
css的历史

并不存在真正意义上的css3,4
css官方文档链接

官方文档地址 www.w3.org/standards/t… www.w3.org/TR/CSS22/ www.w3.org/TR/CSS22/pr… developer.mozilla.org/zh-CN/docs/…

由于浏览器版本、CSS版本等问题，有些CSS属性是无法使用的可以到caniuse.com/查询CSS属性的可用性

二.css的引入方式

内联样式

直接添加到body里的元素属性里

`<h1 style="color:bkack;background:red;">index</h1>`

文档样式表
- 需要把
```
`<style>    </style>`
```
  写在head里
外部样式表
- 需要写在单独的css文件里，然后在<head> <style> </style></head>里用link元素引用。
```
<link rel="stylesheet" href="index.css">
```
  元素的type属性值默认是text/css
- 可以在单独的css文件使用@import导入其他css文件或者在html文件的style元素中使用@import导入
@import (./css/style.css); @import url(./css/style.css);
@import导入css文件效率比link低,不建议
在CSS文件中使用@charset指定文件编码，一般都是UTF-8
```
  `@charset UTF-8;`
```

三.css基础选择器

通用选择器
- 选定全部元素
  - 效率低
```
`*{color:red;}`
```
元素选择器
- 或者叫标签选择器，直接选标签
类选择器
- 给元素加上class
  
  引用时：.className{color:red;}
- 一个元素可以有多个class，每个class用空格隔开
  - 作用：CSS的模块化设计，可以减少css的重复代码，提高类的复用性。
- 同时选定多个class用逗号隔开。
  - (并集选择器)，用逗号隔开，不仅仅是类。
id选择器
- 给元素加上id
  
  引用时：#idNanme{color:red}
- 一个HTML的文档里面的id是唯一的，不能重复

四.css常见的属性

color

前景色
bgc
font-size
width
height

五.颜色空间rgb

单词关键字；red，green，blue
rgb/rgba

rgba
- alpha:0-1
#ffffff

六.查看网页框架outline:

查看网页框架结构