css--基础
### 图片格式
- JPEG
- 支持颜色多. 可以压缩. 不支持透明
- 一般显示颜色丰富的图片可以使用jpeg
- GIF
- 支持的颜色少. 支持简单的透明. 支持动态图
- 一般显示单一颜色的图片或动图
- PNG
- 支持的颜色多. 支持复杂的透明
- 可以用来显示颜色丰富,透明度复杂的图片
- 图片格式选择原则
- 效果一致 选择小的
- 效果不一致 选择效果好的
## CSS样式
- CSS负责页面的样式 (表现)
- CSS又叫做层叠样式表
### 内联样式
- 将样式编写到标签style属性中称之为内联样式
- 内联样式只对当前标签起作用
- 缺点:
- 不方便复用
- 会造成结构和表现的耦合
- 例子:
<p style="color:red;font-size:60px;">测试</p>
### style标签
- 可以将样式表编写到head中的style标签里
- 然后通过CSS选择器来选中指定的元素.并为其设置样式
- 优点:
- 可以同时为多个相同标签设置样式
- 方便后期维护
- 使结构和表现进一步分离
- 缺点:
- 只能在当前的页面中使用
- 例子:
<style type="text/css">
p{
color:red;
font-size:60px;
}
</style>
### 外部的css文件
- 通过link标签引入到当前页面中
- ````<link rel="stylesheet" type="text/css" href=""/>````
- 优点:
- 可以在不同的页面中同时应用相同的CSS样式
- 使结构和表现完全分离
- 方便后期的维护
## CSS基本语法
- 选择器
- 通过选择器选中页面中指定的元素
- 选择器后的声明块样式将会应用到这个元素上
- 声明块
- 使用大括号表示
- 名值对结构
- 样式名和值之间用冒号连接.以分号结束
- 选择器 声明块
- ````p {color:red}````
- CSS注释: /**/
##### 块元素 (block)
- 块元素无论大小. 都会独占页面一行
- 一般页面使用块元素进行布局
- 块元素中会包含内联元素
- p元素中不能任何的块元素
- a元素中可以包含任何元素. 除了a本身
- 块元素代表 --> div元素
##### 内联元素 (inline)
- 内联元素只会占用自身大小的位置
- 使用内联元素选中文本来为其设置样式
- **内联元素不可以设置宽高(与块元素最大的区别)**
- 内联元素代表 --> span元素
### 样式的继承
- 祖先元素上设置的样式同时也会应用到后代元素上
- 继承实际上简化了开发. 但不是所有的样式都会被继承
- 可继承类型:
- 字体系列
- 文本系列
- color
- visibility 元素可见性
- 表格布局属性
- 列表布局属性
- 生成内容属性
- 光标属性
- 页面样式属性
- 声音样式属性
- 不可继承类型:
- display
- vertical-align
- text-decoration
- text-shadow
- 盒模型相关
- 背景相关
- 定位相关
- 宽高相关
## CSS 选择器
- 元素选择器
- 根据标签名选中元素
- 语法: 标签名 {}
- p {}
- ID选择器
- 根据元素的ID属性值选中元素
- 语法: #id {}
- #box {}
- 类选择器
- 根据元素的class属性值选中元素
- 语法: .class {}
- .box1 {}
- 并集选择器
- 同时选中多个选择器对应的元素. 以逗号隔开
- 选择器1 , 选择器2, 选择器3 {}
- p , #box , .box1 {}
- 交集选择器
- 层层筛选出相交符合的具体选择器元素. 中间没有任何分隔
- 标签名选择器1选择器2
- p.box1 {}
- 通配选择器
- 可以选中页面所有的元素
- 性能差
- * {}
- 后代元素选择器
- 选中指定祖先元素的指定后代
- 祖先元素 后代元素 {}
- div span{}
- 以空格隔开. 越短性能越好
- 子元素选择器
- 选中父元素的指定子元素
- 父元素>子元素 {}
- p>.class{}
- 伪类选择器
- 伪类表示元素所处的一种特殊状态
- a:link 未访问过的普通链接
- a:visited 访问过的链接
- a:hover 鼠标移入时的链接
- a:active 鼠标点击时的链接
### 选择器的优先级
- 当使用不同的选择器为同一个选择设置相同的样式时, 此时样式可能会发生冲突
- 优先级
- 内联样式 1000
- ID选择器 100
- 类和伪类选择器 10
- 元素选择器 1
- 通配选择器 0
- 继承的样式 无
- !important 最高优先级
- 如果在样式最后添加!important 则获取最高的优先级
- 计算优先级时, 先将所有选择器优先级相加再比较. 相加不会超过选择器的最大数量级
- 如果两个选择器优先级一致. 则谁在后面就用谁
### 元素之间的关系
- 父子元素
- 祖先后代元素
- 兄弟元素
----------
### 单位
##### 长度单位
- PX 像素
- 固定值. 开发用的最多单位
- % 百分比
- 使用百分比的值会自动根据父元素的属性来计算
- 在自适应页面中会大量使用百分比
##### 颜色单位
- 颜色单词
- RGB值
- **十六进制的RGB值**
- rgba 带透明度的十六进制的RGBA值
## 盒子模型 (box Model)
- CSS将网页中每一个元素都设计成一个矩形的盒子
- 每一个盒子从内到外都包括如下几个内容:
- 内容区 (content)
- 内边距 (padding)
- 边框 (border)
- 外边距 (margin)
)
##### 内容区 content
- 内容区相当于盒子的内部的空间. 所有的内容和子元素都在内容区中
- 相关属性:
- width 设置内容区宽度
- height 设置内容区高度
##### 内边距 padding
- 内容区和边框之间的距离
- 修改内边距会影响盒子可见大小
- 可有四个方向的内边距
- padding-top
- padding-right
- padding-bottom
- padding-left
- 简写属性
- padding: 上 右 下 左
- padding: 上下 右左
- 背景会自动延伸到内边距上
##### 边框 border
- 边框是盒子的边缘
- 修改边框会影响盒子可见大小
- 修改边框至少要设置三个样式:
- border-width
- border-color
- border-style
- 简写属性
- border : color width style(solid)
- 也可指定具体某一边的边框 border-(right bottom top left)
- 盒子的可见框大小由内容区、内边距和边框共同决定
##### 外边距 margin
- 外边距表示当前盒子和其他盒子之间的距离
- 外边距不会影响盒子的可见大小
- 可有四个方向的外边距
- margin-top
- margin-right
- margin-bottom
- margin-left
- 外边距可设置负值. 如果为负值,元素会向相反方向移动
- 设置盒子居中: ````margin｛0 auto｝````
- 外边距特点:
- 由于元素在页面中默认是靠左靠上显示
- 默认情况下,修改左上外边距会影响当前元素的位置
- 而修改右下外边距时, 会影响其他元素的位置
- 外边距重叠:
- 水平方向外边距相邻不会重叠而是求总和
- 垂直方向相邻的外边距会发生重叠的现象
- 兄弟元素相邻外边距会取最大值
- 父子元素相邻外边距会传递给父元素
- 可使用padding或者border来解决
##### 内联元素盒模型
- 内联元素不可以设置width和height
- 内联元素支持水平方向内边距. 可以设置垂直方向内边距不影响布局
- 内联元素支持水平方向边框. 可设置垂直方向边框不影响布局
- 内联元素支持水平方向外边距. 不支持垂直方向的外边距
## CSS部分属性设置
##### dispaly
- 用来设置元素的显示类型
- 可选值
- none 元素不会在页面中显示并且不会占据页面位置
- block 元素作为块元素显示
- inline 元素作为内联元素显示
- inline-block 元素作为行内块元素显示
##### visibility
- 用来设置元素显示状态
- 可选值
- visible 默认值. 元素在页面中可见
- hidden 元素在页面中隐藏.但会占据页面位置
##### overflow
- 设置元素如何处理溢出内容
- 可选值
- visible 默认值. 溢出内容会在父元素以外位置显示
- hidden 移除内容会被剪裁不会显示
- scroll 会为父元素添加水平和垂直双向滚动条
- auto 根据需要自动添加滚动条
##### opacity
- 设置元素透明
- 样式值是0-1之间的值
- 1 表示完全不透明
- 0 表示完全透明
##### 清除默认样式
*{
margin:0
padding:0
}
//清除ul列表的项目符号
list-style:none
#### CSS 文档流
- 文档流指的是网页中的一个位置. 文档流可以说是网页的基础.默认情况下所有元素都在文档流中
- 块元素在文档流中的特点:
- 块元素在文档流中自上向下垂直排列
- 块元素在文档流中默认宽度是父元素的100%.
- 默认高度被内容(子元素)撑开
- 内联元素在文档流中的特点:
- 内联元素在文档流中自左向右水平排列
- 如果不足一行容纳所有元素会另起一行继续水平排列
- 内联元素在文档流中高度和内容都被内容撑开
