前端基础-CSS介绍
- 2020 年 4 月 7 日
- 笔记
一、css介绍
引子：html是网页的结构，css是网页的化妆师，让网页更美观。
传智官网删除css后会变得横七竖八，加上后又变美观了，这就是css样式的魔力。css就是给网页设置一些样式，让网页变的漂亮，更具有可读性。
css全称为Cascading Style Sheets 翻译过来叫层叠样式表
作用：设置网页的文字（大小，颜色，字体风格，对齐方式等）图片和排版等，简单点说就是给网页化妆
感知css
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width:200px; height:200px; background:red; transition:all 2s ease; } div:hover{ transform:rotate(720deg) scale(0.2); background:green; } </style> </head> <body> <div>盒子</div> </body> </html>
语法
1.构建css的运行环境：在头部加入style标签
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> </style> </head> <body> <div>这是一个盒子</div> </body> </html>
2.选择对应的目标元素，使用大括号
<style type="text/css"> div{} </style>
3.语法：属性：值; 键值对
<head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{color:red;} </style> </head> <body> <div>这是一个盒子</div> </body>
