web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出

CSS

• Cascading Style Sheet 层叠样式表. 作用: 美化页面

如何在html页面中添加css样式代码?总共有三种方式:

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

1.选择器

1. 标签名选择器

• 格式: 标签名{样式代码}
• 作用: 选取页面中所有同名标签

2. id选择器

• 格式: #id{样式代码}
• 作用: 如果需要给页面中某一个元素添加样式,则给元素添加id属性,通过id选择器选中

3. class选择器

• 格式: .class{样式代码}
• 作用: 用于选取页面中多个元素(需要给多个元素添加相同的class属性值)

4. 分组选择器

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

5. 属性选择器

• 格式: 标签名[属性名=‘值’]{样式代码}
• 作用: 可以通过元素的属性获取元素

6. 子孙后代选择器

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

7. 子元素选择器

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

8. 伪类选择器

• 格式: 标签名:link/visited/hover/active{样式代码}
• 作用: 选取元素的状态 状态包括(未访问状态,访问过状态,悬停状态,点击状态)

9. 任意元素选择器

• 格式: *{样式代码}
• 作用: 选取页面中所有元素

2.选择器练习:

1. 把d1字体改红色
2. 把d2,s2,h2,水煮鱼字体改绿色
3. 把密码框背景改红色
4. 把水煮肉,水煮鱼,红烧肉,d1背景改黄色
5. 把h2和文本框背景改蓝色

3.颜色赋值

• 三原色: 红绿蓝,red green blue, rgb 每个颜色取值范围0-255,
• 颜色单词赋值 red
• 6位16进制赋值 #ff0000 红255 绿0 蓝0
• 3位16进制赋值 #f00 每一位重复一次 f00=ff0000
• 3位10进制赋值 rgb(255,0,0)
• 4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度取值0-1 值越小 越透明

4.背景图片

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

5.如何查看目标页面元素样式(F12)

• 使用谷歌浏览器

1. 在元素上面右键->检查
2. 右侧窗口出现后 点击小箭头拾取器 选中想查看的元素

6.文本和字体相关

1. 文本修饰: text-docoration:overline上划线/underline下划线/line-through删除线/none去掉修饰
2. 文本对齐方式: text-align: left/right/center;
3. 文本颜色: color:red;
4. 文本阴影: text-shadow: 颜色 x偏移值 y偏移值 浓度(值越大越模糊)
5. 行高: line-height:20px; 可以通过行高实现垂直居中
6. 字体大小: font-size:20px;
7. 字体加粗: font-weight:bold加粗/normal去掉加粗;
8. 字体设置: font-family:xxxx,xxx,xxx,xxxx; font:20px xxx,xxx,xxx;
9. 斜体: font-style: italic;

7.元素显示方式display

1. block: 块级元素 ,独占一行,可以修改宽高, 包括: div h1-h6 p
2. inline: 行内元素, 共占一行,不能修改宽高, 包括: span b i small 超链接等
3. inline-block:行内块元素,共占一行,并且可以修改宽高, 包括: 图片img, input

• 每个元素都有自己默认的显示方式,但是有些场景需要修改元素的显示方式,比如行内元素是不能修改宽高的 如果有需求必须改宽高则只能先修改元素的显示方式为block或inline-block

圆角

• border-radius:5px; 值越大越圆 当值大于宽高一半时为圆形

8.盒子模型

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

8.1盒子模型之宽高

• width/height赋值,赋值方式两种:

1. 像素
2. 上级元素百分比

• 行内元素是不能修改宽高的

8.2盒子模型之外边距

• 外边距:元素距上级元素或相邻兄弟元素的距离称为外边距. 作用: 控制元素的显示位置
• 赋值方式:

1. 单独某个方向赋值 margin-left/right/top/bottom: 10px;
2. 四个方向赋值 margin:10px;
3. 上下和左右 margin:10px 20px; 上下10 左右20 margin:0 auto; 块级元素居中
4. 上右下左四个方向 margin:10px 20px 30px 40px 顺时针 上右下左
   ###CSS的三大特性
5. 继承:元素可以继承上级元素的文本和字体相关样式,部分标签自带效果不受继承影响 比如:超链接的字体颜色 h1-h6字体大小都不受继承影响
6. 层叠:多个选择器有可能选择到同一个元素,给元素添加样式时,如果添加的样式不同则全部层叠生效,如果样式相同则只能生效一个,由优先级决定哪一个生效
7. 优先级:作用范围越小优先级越高, id>class>标签名>继承(属于间接选中)

8.3盒子模型之外边距

• 元素距上级元素或相邻兄弟元素的距离为外边距.用来控制元素的显示位置
  margin-left/right/top/bottom:10px; 单独某一个方向赋值
  margin:10px 四个方向赋值
  margin:10px 20px 上下10 左右20
  margin:0 auto: 块级元素居中
  margin:10px 20px 30px 40px; 上右下左 顺时针
• 左右相邻外边距累加,上下相邻外边距取最大值
• 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距,会出现粘连问题,通过给上级元素添加overflow:hidden方式解决
• 行内元素上下外边距无效

8.4盒子模型之边框

• 赋值方式:
  1. border: 粗细 边框样式 颜色; 四个方向添加边框
  2. border-left/right/top/bottom: 粗细 边框样式 颜色; 单独某个方向添加边框
• 圆角: border-radius:5px; 值越大越圆

8.5盒子模型之内边距

• 什么是内边距: 元素边缘距内容的距离, 用来控制元素内容的位置
• 赋值方式:(类似外边距)
  1. padding-left/right/top/bottom: 10px; 单独某个方向赋值
  2. padding:10px; 四个方向赋值
  3. padding:10px 20px; 上下10 左右20
  4. padding:10px 20px 30px 40px; 上右下左
• 如果需要移动元素的子元素位置有两种方式:
  1. 给元素添加内边距移动,会影响元素宽高
  2. 给子元素添加外边距移动,不会影响元素宽高,但是需要考虑粘连问题

8-盒子模型回顾:

1. 宽高width/heigh: 控制元素的显示大小
2. 外边距margin:控制元素的显示位置
3. 边框border: 控制边框效果
4. 内边距padding:控制元素内容的位置

9.定位方式:

9.1文档流定位(默认)

• 又称为静态定位,元素默认的定位方式为文档流定位
• 格式: position:static;
• 元素显示特点: 块级元素从上往下排列 行内元素从左向右排列
• 如何控制元素的显示位置?
  通过给元素添加外边距

9.2相对定位

• 格式: position:relative;
• 元素显示特点: 元素不脱离文档流(不管元素移动到什么位置原来的位置仍然占着)
• 如何控制元素的显示位置?
  通过left/right/top/bottom 让元素相对于初始位置做位置偏移.

9.3绝对定位

• 格式: position:absolute;
• 显示特点: 元素脱离文档流(元素会把之前所占位置让出)
• 如何控制元素的显示位置?
  通过left/right/top/bottom 让元素相对于窗口或某一个上级元素做位置偏移(需要给上级元素添加position:relative)

9.4固定定位

• 当元素需要固定在窗口的某个位置的时候使用固定定位
• 格式: position:fixed;
• 显示特点:元素脱离文档流
• 如何控制元素的显示位置?
  通过left/right/top/bottom 让元素相对于窗口做位置偏移

9.5浮动定位

-格式: float:left/right;

• 显示特点: 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素停止.
• 当需要将纵向排列的元素改成横向排列时使用浮动定位
• 如果元素的所有子元素全部浮动则自动识别的高度为0,给元素添加overflow:hidden;解决此问题
• 浮动元素受上级元素宽度影响,如果一行装不下会自动换行,换行时有可能被卡主

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

1. baseline 基线对齐 (横格本第三条线)
2. top 上对齐
3. middle 中间对齐
4. bottom 下对齐

11. z-index样式

• 通过此样式控制元素显示层级,层级越高元素显示越靠前
• 需要结合position属性使用,一般position:relative; 因为使用其它值元素会脱离文档流会对之前效果产生影响.

12. overflow溢出设置

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