前端笔记2-CSS

###CSS层叠样式表

• Casecading Style Sheet: 层叠 样式 表
• 作用: 美化页面 类似装修
  ###CSS的三种引入方式

1. 内联样式: 在标签的style属性中添加css样式代码,弊端: 不能复用
2. 内部样式: 在head标签里面添加 style标签,标签体内写样式代码, 弊端: 只能当前页面复用,不能多页面复用
3. 外部样式: 在单独的css文件中写样式代码,在html页面中通过link标签引入样式文件, 可以多页面复用

• 优先级: 内联优先级最高, 内部和外部优先级一样,后执行覆盖先执行的.
  ###选择器

1. 标签名选择器

• 格式: 标签名{样式代码}

2. id选择器

• 格式: #id{样式代码}

3. 类选择器

• 格式: .class{样式代码}

4. 属性选择器

• 格式: 标签名[属性名=‘值’]{样式代码}

5. 分组选择器

• 将多个选择器合并到一起的选择器称为分组选择器
• 格式: #id,.class,div{样式代码}

6. 子孙后代选择器

• 格式: div div p{样式代码} 匹配div里面的div里面的所有p(包括子元素p和所有后代p)

7. 子元素选择器

• 格式: div>div>p{样式代码} 匹配div里面的div里面的所有子元素p

8. 伪类选择器

• 选择的是标签的状态: 未访问状态link 访问过状态visited 悬停状态hover 点击状态active

9. 任意元素选择器

• 格式: *{样式代码}

###常用样式
####颜色赋值

• 三原色: 红 绿 蓝 rgb 每个颜色的取值范围0-255

1. 通过颜色单词 red/green/blue…
2. 6位16进制赋值 #ff0000 红色
3. 3位16进制赋值 #f00 红色
4. 3位10进制赋值 rgb(255,0,0) 红色
5. 4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度 值越小越透明
   ####背景图片
   /* 设置背景图片 /
   background-image: url("…/imgs/a.jpg");
   / 图片尺寸 /
   background-size: 100px 100px;
   / 禁止重复 /
   background-repeat: no-repeat;
   / 设置位置 横向和纵向百分比 */
   background-position: 0% 100%;
   ####浏览器中查看元素样式值
6. 在元素上面右键 检查
7. f12 选中Elements 然后点击拾取器箭头->然后把鼠标放到需要查看的标签上面单击左键
   ####显示方式display

• block: 块级元素, 独占一行,可以修改宽高 包括: h1-h6,p,div等
• inline: 行内元素, 共占一行,不能修改宽高 包括: b,a,i,small,span(分区标签)
• inline-block: 行内块元素, 共占一行也可以修改宽高 包括:img
  ####盒子模型
• 盒子模型=宽高+外边距+边框+内边距
  #####盒子模型之宽高
• 赋值方式: width/height
  2种: 1.像素 2.上级元素的百分比
• 行内元素不能修改宽高
  #####盒子模型之外边距
• 什么是外边距: 元素距上级元素或相邻兄弟元素的距离
• 赋值方式: margin
  margin-left/right/top/bottom: 10px;
  margin: 10px; 4个方向10
  margin: 10px 20px; 上下10 左右20
  margin: 0 auto; 水平居中
  maring: 10px 20px 30px 40px; 上 右下左 顺时针

box-sizing:border-box;
盒子尺寸是否随着边距的增加而增加
默认是content-box;

• 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden解决

####盒子模型之边框

• 赋值方式:
  border: 边框粗细(像素) 边框样式 边框颜色;
  border-left/right/top/bottom: 边框粗细(像素) 边框样式 边框颜色;
  ####盒子模型之内边距
• 什么是内边距: 元素边缘距内容的距离
• 赋值方式:
  padding-left/right/top/bottom:10px;
  padding:10px;
  padding:10px 0;
  padding:10px 20px 30px 40px;
  ###盒子模型总结:

1. 宽高: 控制元素的显示大小
2. 外边距: 控制元素的显示位置
3. 边框: 控制边框样式的
4. 内边距: 控制内容位置
   ###文本和字体相关样式
5. 水平对齐方式 text-align:left/right/center;
6. 文本修饰 text-decoration: overline/underline/line-through/none(去掉文本修饰);
7. 文本颜色 color:red;
8. 文本阴影 text-shadow: 颜色 x偏移值 y偏移值 浓度(值越大越模糊)
9. 行高 line-height: 30px;
10. 字体大小 font-size:20px;
11. 加粗 font-weight: bold/normal;
12. 斜体 font-style:italic;
13. 字体设置 font-family: cursive,xxx,xxx,xxx;
14. 字体大小+字体设置 font: 20px xxx,xxx,xxx;
    ###CSS的三大特性
15. 继承性: 元素可以继承上级元素文本和字体相关的样式,部分标签自带效果不受继承影响,比如: 超链接的字体颜色,h1-h6字体大小
16. 层叠性: 不同的选择器有可能选择到同一个标签,如果作用的样式不同,则全部层叠到一起全部生效, 如果作用的样式相同则由优先级决定.
17. 优先级: 各个选择器之间的优先级, 作用范围越小 优先级越高. id>class>标签名>继承(属于间接选中)
    ###定位方式:4+1
    ####position定位4种
    #####position静态定位(文档流定位)

• 元素默认的定位方式,特点: 块级元素从上到下排列,行内元素从左向右排序
• 格式:position:static;
• 通过外边距控制元素所在位置
  #####position相对定位
• 特点: 元素不脱离文档流
• 格式:position:relative;
• 通过left/right/top/bottom相对于元素初始位置做偏移.
  ####position绝对定位
• 格式: position:absolute;
• 元素脱离文档流, 通过left/right/top/bottom相对于窗口或某一个上级元素做位置偏移
  ####position固定定位
• 格式: position:fixed;
• 元素脱离文档流, 通过left/right/top/bottom相对于窗口做位置偏移
  ####浮动定位
• 格式: float:left/right;
• 元素脱离文档流, 元素从当前所在行向左或向右浮动,当撞到上级元素边框或其它浮动元素时停止
• 一行如果装不下会自动换行,换行时会被卡住
• 如果元素的所有子元素全部浮动,则自动识别的高度为0, 通过给元素添加overflow:hidden; 解决此问题.
• 应用场景: 当纵向排列的元素需要改成横向排列时使用浮动定位
  ####溢出设置overflow
• hidden 超出隐藏
• visible(默认) 超出显示
• scroll 超出滚动显示