css
- 层叠样式表
- 样式表
- 行内(内联)样式表
- 生成一个style的html属性
- 属性值为 css属性：css属性值;
<p style="300px;height:300px;background-color:olive"> 今天 天气真好，但是我真的好困 </p> - 内部样式表
- 生成style的双标签
- 将标签放到head标签里面
<head> <style> div { 200px; height: 200px; background-color: orange; color: orchid; } p { 300px; height: 300px; color: palegreen; } </style> </head> - 外部样式表
- link引入css
- 在站点下面创建一个css文件夹
- 在文件夹里创建.css后缀的文件
- 创建一个link的单标签，放到head标签里面
<link rel="stylesheet" href="" type="text/css"> rel:确定关联的文件类型 href: css文件路径 type: css文件类型- 在css文件中直接写css对应的语法，不需要加style标签
- @import引入css文件
- 创建style的双标签，放到head里面
<style> @import url("css文件的路径"); </style> - 两者的区别
- 老祖宗的差别：link属于HTML提供的引用方式，@import是css提供的引用方式，link还可以引入其他文件类型，@import只能引入css文件
- link引入css
- 行内(内联)样式表
- css语法
选择器{ 声明 css属性名：css属性值; css属性名：css属性值; ----- } - css样式
- 宽度 width 数字+px 值为0可以省略单位,只对独占一行的元素才有效果
- 高度 height 数字+px 值为0可以省略单位,只对独占一行的元素才有效果
- 字体颜色 color 颜色单词
- 背景色 background-color 颜色单词
- 样式表的选择
- 内联样式表 一般不使用，如果有简单的几个属性的话可以写
- 内部样式表 样式较少，平时写小案例
- 外部样式表 开发整页或者整站项目进行使用，做到结构和表现分离
- 样式表的权重(优先级)
- 行内样式表>内部样式表
- 行内样式表>外部样式表
- 内部样式表和外部样式表根据书写顺序，后写的优先级高（就近原则）
- 选择器
- 标签选择器
- id选择器
- 标签添加id属性
- #id名{}
- id名不能重复
- 一个标签内id名不能有多个 多个之间用空格隔开
- id用来划分网页的外围结构
- class选择器
- 标签添加class属性
- .class名{}
- class名可以重复
- 一个标签可以有多个class名，多个之间用空格隔开
- 通用选择器 可以选择到页面中所有的标签
- *{ margin:0;去掉外边距 padding:o;去掉内填充 }
- 伪类选择器
- 选择器:hover{}
鼠标放在div身上，所执行的样式 div:hover { color: blue; 500px; background-color: brown; }
- 命名方式
- 驼峰命名法（bigBox）
- 下划线连接命名法(big_box）
- 横线链接(big-box)
- ps的使用
- ctrl+r 显示/隐藏参考线
- ctrl+k 单位与标尺，修改单位为像素
- alt+滚轮 放大或缩小
- 层叠