2021-07-09

最新推荐文章于 2021-08-10 20:29:07 发布

In NauHix

最新推荐文章于 2021-08-10 20:29:07 发布

阅读量117

点赞数

分类专栏： css

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识CSS

学习目标

能够说出什么是CSS
熟悉CSS的语法规范
掌握CSS的三种引入方式，能够使用3种引入方式写一个红色的小方块

什么是CSS?

全称

Cascading Style Sheets
通常称为CSS样式表或层叠样式表（级联样式表）

CSS语法规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XyBT1pD4-1625817440448)(image-20210427204717914.png)]

CSS 规则由两个主要的部分构成：选择器、一条或多条声明

选择器:通常是需要改变样式的 HTML 标签。

声明组：以大括号{}括起来

每条声明由一个属性和一个值组成,
属性与属性值之间以【冒号】分隔
多个声明，用【分号】将每个声明分开

CSS引入方法

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种:行间样式表，内部样式表，外部样式

行间样式

概述：

通过HTML元素的style属性设置样式称为行间样式

代码示例

<div style="width:100px;height:100px;background-color:red;">div</div>

注：任何HTML元素都可以设置行间样式

内部样式

概述：

在HTMLhead标签的内部，由style标签包含的样式称为内部样式
代码示例
```
<head>
	<style>css样式
</style>
```

外部样式

概述
- 外部样式表是指将CSS编写在扩展名为.css 的单独文件中,使用link标签引用
  - 新建外部样式表
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uMOQSQAz-1625817454627)(image-20210427205006407.png)]
  - 头部标签内部使用link标签引用
```
<head>
	<link rel="stylesheet" href="style.css">
</head>
```
  - 说明
    - href="" 资源链接的地址
    - rel表示引入文件与当前文档的关系
    - stylesheet为样式表

总结：

行间样式适用于某个元素拥有特殊样式时使用，结构表现【不分离】
内部样式适用于单个页面拥有特殊样式时使用，结构表现【半分离】
外部样式适用于多个页面拥有相同样式时使用，结构表现【相分离】

CSS选择器

学习目标

掌握常用选择器的使用
熟悉选择器的优先级关系
掌握调试工具的基本使用

什么是选择器

CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始，
CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式
选择器可以分为基础选择器、复合选择器

基本选择器

通配（通用）选择器

语法 *{ 样式声明 }
作用：匹配任意类型的HTML元素

<style>        
    /* 页面上所有元素都被选择 */
    *{
        background-color:green;
    }
        
</style>
<body>
    <p>p</p>
    <div>div1</div>
    <div>div2
        <div>div3</div>
    </div>
    
</body>

元素名称选择器

语法：元素名称{ 样式声明 }
作用：选择所有同一元素名称的所有元素

/* 选择body */
body{
	background-color:green;
}
/* 选择页面上所有的div */
div{
	width:100px;
	height:100px;
	background-color:red;
}
/* 选择页面上所有的p */
p{
	background-color: pink;
}

类选择器

语法
- HTML中通过class属性定义
  如：
- css中以点进行标识:.
  .类名{ 样式声明 }
作用:选择所有带有指定类名的元素
多类名的使用
- 语法：空格隔开

<style>

.box{
	background-color:red;
}

.size{
    width:100px;
    height:100px;

}

</style>
<body>
    <p class="box size">p</p>

    <div class="box">div1</div>
    <div>div2
    <div class="box">div3</div>
    </div>
</body>

id选择器

语法
- HTML中通过id属性定义
  如：
- css中以点进行标识:#
  
  #id名称{ 样式声明 }
作用:选择所有带有指定类名的元素

#box{
	background-color:red;
}
<div id="box">div1</div>

注意：具有唯一性，一般用于页面唯一性的元素如头部、底部等，经常和 JavaScript 搭配使用

类与id的命名规则

见词知义，尽量用英文；
始终建议以字母开头，可以包含数字、字母、下划线等
不要以数字开头
多个单词可以以驼峰式（newsCont）、下划线连接（news_cont）、中划线连接（news-cont）等

总结

总结使用频率
- 基础选择器中最常用是类选择器(写界面的时候不要使用id挑选元素，以类选择器)
- id用于页面中唯一模块
- 元素名称选择器定义的全局样式，单独使用要慎重
- *号通常用于重置样式【最不常用】
总结id与类的区别总结

基础选择器的优先级

对比

渗透调试工具的使用

- F12/右键-检查
- 左边是 HTML 元素结构，右边是 CSS 样式
- Ctrl+滚轮 可以放大、缩小开发者工具代码大小
- Ctrl + 0 复原浏览器大小
- 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
- 如果有样式，但是样式被中划线贯穿，说明可能存在书写顺序 或优先级问题

结论

最终排序：id（身份证号是XX的学生）> 类（名叫王小帅的学生） >元素名称（所有男生） > *(所有学生)
选择范围越精确，优先级越高,权重越大

选择器	权重值
*	0
tagName标签名	1
class	10
id	100

复合选择器权重值 = 基础选择器求和

内容 content

概述：CSS通过为元素设置width和height属性值来规定元素的content内容区域的大小。
元素的内容及子元素默认从内容区域开始排列。

width

作用：设置宽度
取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px

height

作用：设置高度
取值
- auto默认值。浏览器可计算出实际的宽度。
- 先只讲px

边框 border

边框是围绕内容和内边距之间的一条或多条线，通过边框属性指定一个元素的边框的宽度、样式和颜色

border-width边框宽度

作用
- 设置所有边框宽度，或者单独地为各边边框设置宽度
取值
- 长度值
- 不允许指定负长度值。
语法
- 空格隔开1-4个值
  - 1个值设置所有边框宽度
  - 2个值设置上下、左右
  - 3个值设置上、左右、下
  - 4个值设置上、右、下、左
- 代码示例
  - border-width:10px;
  - border-width:10px 20px

border-style边框样式

作用
- 设置标签所有边框的样式，或者单独地为各边设置边框样式。
取值
- none 定义无边框。
  dotted 定义点状边框。
  dashed 定义虚线。
  solid 定义实线。
  double 定义双线。双线的宽度等于 border-width 的值。
- 其他（了解）
  
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W4qmDDAk-1625817507378)(E:\临时文件\新大纲\新大纲课件\day03\笔记\image-20210413093606178.png)]
语法
- 空格隔开
  1-4个值
  - 1个值设置所有边框
  - 2个值设置上下、左右
  - 3个值设置上、左右、下
  - 4个值设置上、右、下、左
- 示例
  - border-style:solid;
  - border-width:solid dashed
  - …
注意：只有当这个值不是 none 时，边框才可能出现。如果边框样式是 none，边框宽度实际上会重置为 0

border-color 边框颜色

作用：设置所有边框颜色，或者单独地为各边边框设置颜色
取值
- name - 指定颜色的名称，如 “red”
  RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
  Hex - 指定16进制值, 如 “#ff0000”
语法
- 示例
  - border-color:red;
  - border-width:red blue;
  - …
- 1-4个值
  空格隔开
  - 1个值设置所有边框
  - 2个值设置上下、左右
  - 3个值设置上、左右、下
  - 4个值设置上、右、下、左

简写

授课思路：
（1）先讲四个边简写与讲师演示
（2）简单介绍单个边语法及拆份写法引导学员自主尝练习（讲师可不进行演示）

定义四个边

语法：border:样式宽度颜色
空格隔开
代码示例

单个方向定义

说明：
每个边框都可以设置样式宽度颜色
border-方向：宽度样式颜色
语法：空格隔开

拆分语法

border-方向-width:
border-方向-color
border-方向-style

注意:边框会影响盒子实际大小，样式、宽度、颜色无书写顺序要求

内边距 padding

CSS padding（内边距）属性，定义元素边框与标签内容之间的空间。
padding 可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。

单个方向设置

padding-bottom 设置标签的下内边距。
padding-left 设置标签的左内边距。
padding-right 设置标签的右内边距。
padding-top 设置标签的上内边距。
代码演示（强调：padding会影响盒子的实际大小）
取值
- 先讲px,
- 不可使用负值，

简写

语法：padding空格隔开1-4个值
规则：1个值：表示【四个方向】的内边距值
2个值：分别表示【上下，左右】的内边距值
3个值：分别表示【上，左右，下】的内边距值
4个值：分别表示【上，右，下、左】的内边距值
代码演示

外边距margin

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

单个方向定义

margin-bottom 设置标签的下内边距。
margin-left 设置标签的左内边距。
margin-right 设置标签的右内边距。
margin-top 设置标签的上内边距。
代码示例

简写

语法：空格隔开
取值1-4个规则
取值
- px,
- auto浏览器自动计算
- 允许使用负值
外边距应用
- 外边距实现已知宽度的块级盒子居中

【综合案例:企业公告.jpg 】

外边距问题

典理情形一

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dLpjCAbs-1625817507437)(2-元素嵌套.png)]

结构关系：嵌套块元素的垂直外边距塌陷
问题描述：当父元素没有padding,margin,border时子元素与父元素直接相临，子元素的margin值会传递给父元素并且再次与父元素的margin值发生合并最终的结果最终结果是正值取两者中的较大值，负值取绝对值较大的值
表现：父子元素公用一个外边距
解决方法
- 给父元素设置边框或内边距（慎用）
- 父元素overflow:hidden,改变渲染规则

典型情形二

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KY8payrB-1625817507459)(E:\临时文件\新大纲\新大纲课件\day03\笔记\1-元素并列-1618277947139.png)]

结构关系：相邻元素垂直外边距合并
问题描述：当两个块级兄弟元素垂直方向上的margin值直接相遇,会发生合并，最终结果是正值取两者中的较大值，负值取绝对值较大的值
表现：两个外边距合并成一个
解决方法
- 方法1.尽量只定义其中一个的margin值
- 方法2.给其中一个盒子加父元素overflow:hidden,改变渲染规则
其他情况同上【简单带过——如后代元素出现同类问题等】

总结：

（1）设问通过对盒模型的实际使用对比出它与快递盒子的不同之处？
（2）总结盒子模型占位的计算：width/height + padding + margin
（3）提示学生注意实际开发的过程中要明确测量的宽高是内容宽还是包括了padding的占位宽高
（4）垂直方向上相遇的margin值出现折叠问题

overflow详解

概述：溢出元素内容区的内容会如何处理

取值
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
- hidden 内容会被修剪，并且其余内容是不可见的。
- scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
应用：京东产品描述的超出隐藏