CSS样式

• Casecading层叠 Style样式 Sheet表, 用于美化页面
  ####CSS的引入方式

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

####三种引入方式的优先级

1. 内联优先级最高
2. 内部和外部优先级相同,后执行覆盖先执行
   ####选择器
3. 标签名选择器

• 格式: 标签名{样式代码}
• 选取页面中所有的指定标签

2. id选择器

• 格式: #id{样式代码}
• 当需要选择页面中的某一个元素时使用id选择器

3. class选择器

• 格式: .class{样式代码}
• 当需要选取页面中某一类元素(多个)时使用class选择器

4. 属性选择器

• 格式: 标签名[属性名=‘属性值’]{样式代码}
• 通过标签的属性去选择元素

5. 分组选择器

• 格式: div,#id,.class{样式代码}
• 将多个选择器合并成一个选择器

6. 子孙后代选择器

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

7. 子元素选择器

• 格式: div>span{样式代码}
• 选取div里面所有的子元素span

8. 伪类选择器

• 用于选取元素的状态
• 未访问状态link/访问过状态visited/点击状态active/悬停状态hover

9. 任意元素选择器

• 格式: *{样式代码}
• 选中页面中所的元素
  ####颜色赋值
• 三原色:rgb red green blue 红 绿 蓝 每个颜色的取值是0-255

1. 通过6位16进制赋值 #ff0000
2. 通过3位16进制赋值 #f00
3. 通过3位10进制赋值 rgb(0-255,0-255,0-255)
4. 通过4位10进制赋值 rgba(0-255,0-255,0-255,0-1) a=alpha 透明度 值越小越透明

####背景图片
/* 设置背景图片 /
background-image: url("…/imgs/a.jpg");
background-size: 100px 100px;
/ 禁止重复 /
background-repeat: no-repeat;
/ 控制背景图片的位置
left right top bottom center*/
background-position: 10% 10%;
####盒子模型

• 盒子模型由 宽高+外边距+内边距+边框组成
  #####盒子模型之宽高
• 两种赋值方式:
  1. 像素
  2. 上级元素的百分比
• 行内元素不能修改宽高 宽高由内容决定
  #####盒子模型之外边距
• 什么是外边距:元素距上级元素或相邻兄弟元素的距离称为外边距
• 赋值方式:
  margin-left/top/bottom/right:20px;
  margin:10px; 四个方向10px
  margin:10px 20px; 上下10 左右20
  margin:0 auto; 水平居中
  margin:10px 20px 30px 40px; 上右下左 顺时针
• 行内元素上下外边距无效
• 左右相邻相加 上下取最大
• 当元素的上边缘和上级元素的上边缘重叠时会出现粘连问题,在上级元素中添加overflow:hidden 解决