CSS

CSS

什么是CSS

• Cascading Style Sheet: 层叠样式表 , 作用: 美化页面
• 如何在html页面中添加样式代码(引入方式) , 总共有三种方式:

1. 内联样式: 在标签的style属性中添加样式代码,不能复用
2. 内部样式: 在head标签里面添加style标签,在标签体内写样式代码,仅可以在当前页面复用,不
   可以多页面复用
3. 外部样式: 在单独的css样式文件中写样式代码, 在html页面通过link标签引入,可以实现多页面
   复用,并且可以将html代码和css样式代码分离开

三种引入方式的优先级: 内联优先级最高,内部和外部优先级一样,后执行的覆盖先执行的

选择器

用来选择页面中的元素

• 标签名选择器:
  格式: 标签名{样式代码}
  选取页面中所有同名标签
• id选择器
  格式: #id{样式代码}
  选取页面中对应id的元素,页面当中的元素要保证id是唯一的,当需要选择页面中的某一个元素时使用
• 类选择器:
  格式: .class{样式代码}
  选取页面中某一类元素,给需要选取的元素添加相同的class属性
• . 分组选择器
  格式: #id,.class,div{样式代码}
  将多个选择器合并成一个选择器
• 任意元素选择器:
  格式: *{样式代码}
  选取页面中所有的元素
• 属性选择器
  格式: 标签名[属性名=‘值’]{样式代码}
  通过元素的属性去选择元素
• 子孙后代选择器
  格式: body div span{样式代码}
  匹配body里面的div里面的所有span(包括后代)
• 子元素选择器
  格式: body>div>span{样式代码}
  匹配body里面的div里面的span子元素
• 伪类选择器
• 格式: a:visited/link/hover/active{样式代码}
  该选择器选中的是元素的状态(未访问/访问过/悬停/点击)

样色赋值

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

1. 颜色单词 red
2. 6位16进制 #ff0000 每两位表示一个颜色 ff=255
3. 3位16进制 #f00 每一位表示一个颜色 f00=ff0000
4. 3位10进制 rgb(255,0,0)
5. 4位10进制 rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明

背景图片

1. 设置背景图片 background-image:url(路径)
2. 设置背景图片尺寸 background-size: 200px 300px;
3. 禁止重复 background-repeat: no-repeat;
4. 设置背景图片位置 background-position: 50% 100%;

如何查看页面元素样式

1. 在元素上面右键检查
2. 在页面中按f12出现和右键检查一样的工具, 点击拾取箭头 然后将鼠标放在元素上面点击

文本和字体相关样式

• 文本修饰
  1.text-decoration: overline;上划线
  2.text-decoration:underline下划线
  3.text-decoration:line-through删除线
  4.text-decoration:none去掉下划线
• 对齐方式
  text-align:left/right/center
• 文本颜色
  color:red:
• 行高 可以实现垂直居中
  line-height: 20px;
• 文本阴影
  text-shadow: 颜色 x偏移值 y偏移值 浓度(值越大越模糊)
• 字体大小 默认大小16px
  font-size:20px;
• 字体设置
  font-family: xxxx,xxx,xxx,xxx;
  font: 20px xxx,xxx,xxx;

元素显示方式display

1. block: 块级元素, 独占一行,可以修改元素宽高 , 包括:h1-h6,p , div等
2. inline: 行内元素, 共占一行,不能修改元素宽高, 包括:span,b,i,small,超链接等
3. inline-block:行内块元素, 共占一行并且可以修改元素宽高, 包括:input, img等
   元素默认的显示方式可以修改,常见的修改就是将行内元素的显示方式改成块级或行内块,因为行内
   元素不能改宽高

盒子模型

• 盒子模型=宽高+外边距+内边距+边框 , 作用:控制元素的显示效果
  宽高: 控制元素的显示大小
  外边距: 控制元素的显示位置
  内边距: 控制元素内容的位置
  边框: 控制元素边框效果

• 盒子模型之宽高width/heig
  赋值方式:1. 像素 2. 上级元素百分比
  行内元素不能修改宽高
• 盒子模型之外边距margin
  什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外边距.
  赋值方式:

/* 单独某个方向添加外边距 */
 /* margin-left: 50px; 
 margin-bottom: 50px; 
 margin-top: 50px; 
 margin-right: 20px; */
  /* 给四个方向添加外边距 */ 
  /* margin: 20px; */
  /* 上下和左右赋值 */ 
  /* margin: 20px 40px; */
  /* 元素居中 */ 
  /* margin: 0 auto; */ 
  /* 上右下左赋值 顺时针*/ 
  margin: 10px 20px 30px 40px;

外边距

• 什么是外边距: 元素距上级元素或相邻兄弟元素的距离称为外
• 赋值方式

/* 单独某个方向添加外边距 */
/* margin-left: 50px; 
margin-bottom: 50px;
 margin-top: 50px; margin-right: 20px; */
  /* 给四个方向添加外边距 */ 
  /* margin: 20px; */ 
  /* 上下和左右赋值 */ 
  /* margin: 20px 40px; */ 
  /* 块级元素居中 */ 
  /* margin: 0 auto; */ 
  /* 上右下左赋值 顺时针*/ 
  margin: 10px 20px 30px 40px;` `

• 上下相邻两个元素外边距取最大值, 左右相邻外边距累加
• 粘连问题: 当元素上边缘和上级元素上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元
  素添加overflow:hidden解决此问题

边框

• 赋值方式: border:粗细 样式 颜色;
  单独方向赋值: border-left/right/top/bottom:粗细 样式 颜色
• 圆角:
  border-radius: 5px; 值越大越圆 值大于宽高一半时为圆形
• border:none; 去掉边框 border:0;

内边距

• 什么是内边距: 元素内容距离元素边缘的距离称为内边距
• 给元素添加内边距会影响元素所占的宽高
• 赋值方式: 和外边距类似

padding-left/right/top/bottom:10px; 单独某个方向赋值 
padding:10px; 四个方向10 
padding:10px 20px; 上下10 左右20 
padding:10px 20px 30px 40px; 上右下左 顺时针

CSS三大特性

1.继承性: 元素可以继承上级元素的文本和字体相关样式, 部分标签自带效果不受继承影响,比如:超链
接的字体颜色, h1-h6字体大小不受继承影响
2.层叠性: 多个选择器有可能选择到同一个元素,如果添加的样式不同则全部层叠生效,如果样式相同
则由优先级决定哪个生效
3.优先级: 选择器作用范围越小优先级越高, id>class>标签名>继承

定位方式

• 文档流定位(静态定位)
  元素默认的定位方式
  特点: 块级元素从上到下排列,行内元素从左向右排列
  通过外边距控制元素位置
  格式: position:static;
• 相对定位
  格式: position:relative;
  特点: 元素不脱离文档流(仍然站着原来的位置)
  通过left/right/top/bottom控制元素的显示位置, 值是相对于元素的初始位置
  场景: 当需要移动某个元素,并且其它元素位置不变的时候使用相对定位
  `
• 绝对定位:
  格式: position:absolute;
  特点: 元素脱离文档流(不占原来的位置)
  通过left/right/top/bottom控制元素的显示位置,值是相对于窗口(默认)或某一个上级元素 (需
  要在上级元素中添加position:relative)
  场景:当需要在页面中添加一个元素,这个元素不会影响其它元素的位置,这时使用绝对定位
  相对定位和绝对定位总结: 如果需要实现多个元素的层叠效果,则需要将默认的文档流定位改成相对
  定位或绝对定位,如果元素需要保留原有位置 则使用相对定位,不需要保留原有位置则使用绝对定位
• 固定定位position:fixed;
  格式: position:fixed
  特点: 元素脱离文档流
  通过left/right/top/bottom相对于窗口做位置偏移
  场景: 当需要将元素固定在窗口的某个位置时使用固定定位.
• 浮动定位
  格式: float:left/right;
  特点: 元素脱离文档流, 元素从所在行向左或向右浮动,当撞到上级元素或其它浮动元素时停止.
  如果一行装不下会自动换行,换行时有可能会被卡主
  应用场景: 当需要将纵向排列的元素改成横向排列时使用浮动定位

如果需要对页面中的某一个元素进行位置微调, 可以使用相对定位进
行调整,这种方式不会影响其它元素的显示效果.

行内元素垂直对齐方式vertical-align

• top:上对齐

• bottom:下对齐

• middle:中间对齐

• baseline:基线对齐(默认)

溢出设置overflow

• hidden: 超出范围隐藏
• visible(默认):超出范围显示
• scroll:超出范围滚动显示

图片悬停缩放

• 需要先设置图片动画持续时间

img{
		/* 设置缩放动画持续时间 单位是秒*/
		transition-duration: 1s;
}

• 悬停时设置动画缩放倍数

img:hover{
		/* 设置缩放动画为1.2倍 */
			transform: scale(1.2);
}

元素显示层级

• 当修改了元素的定位方式后, 有可能元素会出现层叠效果, 通过z-index属性控制元素显示的层级,默
  认值是0 值越大越靠前.