css基本概述

CSS概述

什么是CSS

• CSS是层叠样式表（Cascading Style Sheets）的缩写，是一种用于定义HTML、XML等文档中如何呈现页面的样式和布局的标准语言。通过CSS可以控制网页的字体、颜色、大小、间距、背景等各种样式，从而实现对网页内容的精细控制。与HTML相比，CSS具有更高的灵活性和可扩展性，可以将网页的样式和内容分离开来，使得网页结构更加清晰、易于维护和修改。
• 作用: 负责美化页面(相当于装修)

CSS引入方式

三种引入方式:

• 内联: 在标签的style属性中添加样式代码, 不能复用
• 内部: 在head标签里面添加style标签, 在标签体内添加样式代码, 可以当前页面复用,不能多页面复用
• 外部: 在单独css文件中添加样式代码, 在html页面中的head标签里面添加link标签 把css引入到html页面中, 支持多页面复用

CSS选择器

常用选择器1

选择器的作用: 用于查找页面中的元素

• 标签名选择器: 匹配页面中所有同名标签
  • 格式: 标签名{样式代码}
• id选择器: 当需要选择页面中某一个标签时使用
  • 格式: #id{样式代码}
• 类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class值划分为同一类
  • 格式: .class{样式代码}

常用选择器2

• 分组选择器: 将多个选择器划分为同一组进行统一管理
  • 格式: div,#id,.class{样式代码}
• 属性选择器: 通过元素的属性匹配元素
  • 格式: 标签名[属性名=‘值’]{样式代码}
• 任意元素选择器:匹配页面中的所有元素
  • 格式: *{样式代码

常用选择器3

• 后代选择器: 通过元素和元素之间的层级关系匹配元素,选择的范围更广
  • 格式: body div div p{样式代码} 匹配的是body里面的div里面的div里面的所有p(包含
    后代)
• 子元素选择器: 通过元素和元素之间的层级关系匹配元素, 选择的范围更
  精准
  • 格式: body>div>div>p{样式代码} 匹配的是body里面的div里面的div里面的所有p子元素
    (不包含后代)
• 伪类选择器: 选择元素的状态 包括: 未访问/访问过/悬停/激活
  • 格式: a:link/visited/hover/active{样式代码}

常用样式

颜色赋值方式

三原色: RGB Red Green Blue, 每一种颜色的取值范围0-255

• 五种赋值方式:
  • 颜色单词赋值: red/blue/yellow/green… ü 6位16进制赋值: #ff0000
  • 3位16进制赋值: #f00
  • 3位10进制赋值: rgb(255,0,0)
  • 4位10进制赋值: rgba(255,0,0,0-1) a=alpha 透明度 值越小越透明

背景图片相关

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

文本和字体相关样式1

• text-align:right/center; 水平对齐方式
• text-decoration:overline上划线/underline下划线/linethrough删除线/none去掉修饰
• line-height:20px; 设置行高, 单行可以实现垂直居中, 多行可以
  控制行间距
• text-shadow:颜色 x偏移值 y偏移值 浓度(值越小越清晰);

文本和字体相关样式2

• font-size:20px; 字体大小
• font-weight:bold加粗/normal去掉加粗;
• font-style:italic; 设置斜体
• font-family:xxxx,xxx,xxx; 设置字体
• font: 20px xxx,xxx,xxx; 设置字体大小+字体

元素的显示方式display

• block: 块级元素的默认值, 显示特点: 独占一行,可以修改元素的
  宽高. 包括: h1-h6,p,div
• inline: 行内元素的默认值, 显示特点: 共占一行, 不能修改元素
  的宽高. 包括: span,b,i,s,u,a
• inline-block: 行内块元素的默认值, 显示特点: 共占一行, 并且
  可以修改元素宽高. 包括: input,img
• none: 隐藏元素

(*注:行内元素的宽高是不能修改的,必须改成其它显示方式才可以)

盒子模型

什么是盒子模型?

• 盒子模型是指在网页设计中，将每个 HTML 元素看作是一个矩形的
  盒子，该盒子由内容区域content、内边距padding、边框border和
  外边距margin组成。这个模型可以帮助开发者理解和控制元素的布
  局、大小和位置。
• 作用:通过盒子模型相关的样式控制元素的显示效果

盒子模型控制什么效果?

• content内容区域:用来控制元素的显示大小
• border边框: 用来控制边框的效果
• margin外边距: 用来控制元素的显示位置
• padding内边距: 用来控制元素内容的位置

盒子模型之Content内容区域

• 控制元素的显示大小
• 相关样式: width/height 赋值方式:1. 像素 2. 上级元素的百分比
• 行内元素是不能修改宽高的, 如果必须要修改, 需要将元素的显示方式改成块级block或行内块inline-block

盒子模型之margin外边距

• 赋值方式:
  • margin-left/right/top/bottom:10px; 单独某一个方向赋值
  • margin:10px; 四个方向赋值
  • margin:10px 20px; 上下10 左右20
  • margin:10px 20px 30px 40px; 上右下左赋值 顺时针
• 行内元素上下外边距无效
• 左右相邻彼此添加外边距 两者相加
• 外边距塌陷:
  • 兄弟元素上下相邻, 彼此添加外边距 取最大值
  • 父子元素上边缘重叠时, 添加外边距取最大值,会导致父子元素粘连在一起,给父元素添加overflow:hidden样式解决.

盒子模型之边框border

• 赋值方式:
  • border-left/right/top/bottom:粗细 样式 颜色; 单独某一个方向添加边框
  • border:粗细 样式 颜色; 四个方向添加边框
• border-radius:10px ; 设置圆角 值越大越圆.
• 默认情况下边框会影响元素显示的大小
  • width:200 border:10 元素实际占用宽度=200+10*2

盒子模型之内边距padding

• 控制元素内容的位置
• 赋值方式: 和外边距类似
  • padding-left/right/top/bottom:10px; 单独某一个方向添加
  • padding:10px; 四个方向添加
  • padding: 10px 20px; 上下10 左右20
  • padding: 10px 20px 30px 40px; 上右下左 顺时针赋值
• 给元素添加内边距默认情况下会影响元素的显示范围,给元素添加box-sizing:border-box; 后则不再影响

部分标签自带盒子模型中的某些样式

• body 自带8个像素的外边距
• 段落标签p, 列表标签和内容标题h1-h6 自带上下的外边距
• 文本框自带边框和内边距
• 列表标签自带外边距和内边距

居中问题

• 元素自身居中:
  • 块级元素: 通过外边距 margin:0 auto;
  • 行内或行内块元素: 在上级元素中添加text-align:center;
• 元素内容居中: 只能通过text-align:center;

CSS三大特性

• 继承性: 指元素可以继承上级元素文本和字体相关的样式, 部分标签自带的效果不受继承影响, 比如超链接的字体颜色
• 层叠性: 指一个元素可以层叠很多不同的样式, 多个选择器有可能选择到同一个元素, 如果添加的样式不同,则样式全部层叠生效,如果添加的样式相同则由选择器的优先级决定哪个生效
• 优先级: 作用范围越小 优先级越高.
  • !important>内联样式 > ID 选择器 > 类选择器、属性选择器和伪类选择器 >标签名选择器>继承(间接选中,important无效)

定位

CSS定位方式

• CSS 定位指的是通过 CSS 样式表来定义 HTML 元素在网页中的位置和布局
• 常用的定位方式包括:
  • 静态定位
  • 相对定位
  • 绝对定位
  • 固定定位

静态定位(默认)

• position:static;
• 默认的定位方式,又称为文档流定位
• 特点: 块级元素从上往下依次排列, 行内元素从左向右依次排列,通过外边距控制元素的位置.
• 默认情况下无法实现元素层叠效果

相对定位

• position:relative;
• 特点: 元素不脱离文档流(不管元素显示到什么位置,仍然占着原来的位置,后面的元素不会顶上来),元素通过left/right/top/bottom样式相对于初始位置做偏移.
• 应用场景: 当元素需要层叠显示时, 静态定位是无法实现的, 通过相对于定位可以实现层叠, 当需要对某一个元素的显示位置进行微调时使用.

绝对定位

• position:absolute;
• 特点: 元素脱离文档流(不占原来的位置, 后面的元素会顶上来), 通过left/right/top/bottom相对于窗口(默认)或某一个上级元素做偏移.
• 应用场景: 当需要层叠显示,并且需要让元素相对于某个上级元素做位置偏移时使用
• 固定定位
• position:fixed;
  -特点: 元素脱离文档流, 通过left/right/top/bottom相对于窗口做位置偏移.
• 应用场景: 当需要将元素固定在窗口的某个位置时使用

浮动

• float:left/right
• 特点: 元素脱离文档流, 从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素时停止. • 多个浮动元素一行装不下时会自动折行, 折行时有可能被卡主
• 当元素的所有子元素全部浮动时, 自动识别的内容高度为0, 会导致后面的元素顶上来 出现显示异常, 给元素添加overflow:hidden 解决此问题.
• 应用场景: 将纵向排列的多个元素 改成横向排列时使用.

其它样式

显示层级和溢出设置

• 显示层级
• 当元素为非static 定位,出现层叠时, 可以通过z-index设置显示层级, 值越大显示越靠前,(只能给非静态定位的元素添加此样式)
• 溢出设置
  • hidden 隐藏
  • visible 显示
  • scroll 滚动显示

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

• top上对齐
• middle中间对齐
• bottom下对齐
• baseline基线对齐