目录
概念
-
Cascading Style Sheets层叠样式表，级联样式表（样式表）
-
后缀名.css
-
用于HTML文档中元素样式的定义
-
目的：让网页具有美观一致的页面
语法
-
两个主要构成：选择器+一条或多条声明
-
选择器：通常是需要改变样式的HTML元素
-
一条声明：一个属性+一个值（冒号分开）
-
在head部分里面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS简介</title> <style> h3{ color:blue; font-size: 30px; } p{ color:red; font-size: 20px; } </style> </head> <body> <h3>标题内容</h3> <p>哈哈哈哈</p> </body> </html>
CSS的引入方式
-
内联样式（行内样式）
-
需要在相关的标签内使用样式Style属性
<p style="color: red;">我是内联样式的方案</p> -
缺点：缺乏整体性和规划性，不利于维护，维护成本高
-
-
内部样式
-
在head部分添加，body里面的所有相关元素都会一起变化
<style> p{ color:blue; } </style> -
缺点：单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱
-
-
外部样式（推荐）
-
当样式需要应用于很多页面时
-
可以通过改变一个文件来改变整个站点的外观
-
创建一个后缀为.css的文件，在里面写需要修改的元素
-
每个页面使用<link>标签链接到样式表
-
<link>标签在head部分，在需要的文件中添加标签
<link rel="stylesheet" href="xxx.css">
-
选择器一
-
全局选择器
-
可以与任何元素匹配，前面用*号表示
-
优先级最低
-
一般做样式初始化
-
在head里面
<style> *{ color: red; font-size: 30px; } </style>
-
-
元素选择器
-
选择的是页面上所有这种类型的标签
-
-
类选择器
-
用圆点.来定义，针对想要的标签使用
-
优点：灵活，使用率高
-
content是自定义的
-
-
属性特点
-
可以被多种标签使用
-
类名不能以数字开头
-
同一个标签可以使用多个类选择器，用空格隔开
-
-
-
ID选择器
-
针对某一个特定的标签使用
-
只能使用一次
-
css中的ID选择器以#来定义
-
ID是唯一的、不能以数字开头
-
如果多个使用同一个ID，虽然都能实现，但是不规范
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ID选择器</title> <style> #text{ color:red } </style> </head> <body> <p id="text">Hello</p> </body>
-
-
合并选择器
-
语法：选择器1,选择器2,...{}
-
作用：提取共同的样式，减少重复代码
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>合并选择器</title> <style> p,h3{ color: red; font-size: 30px; } </style> </head> <body> <p>我是p标签</p> <h3>我是标题标签</h3> </body> </html>
-
-
选择器优先级
-
优先级从高到低
-
行内样式>ID选择器>类选择器>元素选择器
-
-
同级会覆盖
-
字体属性
-
定义字体、颜色、大小、加粗、文字样式
-
color
-
rgb三原色通道
-
-
font-size
-
字体大小
-
单位px
-
浏览器最小12px
-
-
font-weight
-
设置文本的粗细
值 描述 bold 粗体字符 bolder 更粗的字符 lighter 更细的字符 100-900 自定义粗细，400默认，700bold
-
-
font-style
-
字体样式
值 描述 normal 默认值 italic 斜体字
-
-
font-family
-
元素字体
-
如果字体名称包括空格，必须加上引号
-
背景属性（更好衬托内容）
| 属性 | 描述 |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片 |
| background-position | 背景图片位置 |
| background-repeat | 背景图片填充 |
| background-size | 背景图片大小 |
-
background-image
<style> .box2{ width: 400px; height: 400px; background-image: url(哪吒.png); background-color: red; } </style> -
background-position
-
设置图片的起始位置，默认值：0% 0%
-
-
background-repeat
值 说明 repeat 默认值 repeat-x 水平方向平铺 repeat-y 垂直方向平铺 no-repeat 不平铺 -
background-size
值 说明 length 设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto percentage 计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto cover 保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小 contain 保持图片纵横比并将图像缩放成适合背景定位区域的最大大小
文本属性
-
text-align
-
元素文本的水平对齐方式
值 描述 left 文本居左，默认 right 文本居右 center 文本居中
-
-
text-decoration
-
文本修饰：下划线、上划线、删除线等
值 描述 underline 下划线 overline 上划线 line-through 删除线
-
-
text-transform
-
文本的大小写（以后用js调整的较多）
值 描述 captialize 每个单词开头大写 uppercase 全部大写 lowercase 全部小写
-
-
text-indent
-
首行文本的缩进
-
负值是允许的。负数：第一行左缩进
text-indent: 50px;
-
两个字是30px
-
-
表格属性
-
表格边框
-
使用border属性
<style> table,td{ border: 1px solid red; } </style>
-
-
折叠边框
-
border-collapse:表格边框折叠成一个单一的边框或隔开
table{ border-collapse: collapse; }
-
-
表格宽度和高度
-
width
-
height
-
-
表格文字对齐(给td添加)
-
text-align水平对齐：right left center
-
vertical-align垂直对齐：bottom
-
-
表格填充
-
padding（单位px）
-
-
表格颜色
-
color
-
关系选择器
-
后代选择器
-
选择所有被E元素包含的F元素，中间用空格
-
E F{}
-
所有的子代 子代的子代都会生效
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>后代选择器</title> <style> ul li{ color:red; } </style> </head> <body> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <div> <ol> <li>列表4</li> <li>列表5</li> </ol> </div> </ul> </body>
-
-
子代选择器
-
选择所有作为E元素的直接子元素F
-
E>F{}
-
-
相邻兄弟选择器
-
选择紧跟E元素后的F元素，相邻的第一个兄弟元素
-
相邻只能向下选择
-
E+F{}
-
-
通用兄弟选择器
-
选择E元素之后的**所有**兄弟元素F
-
E~F{}
-
CSS盒子模型（Box Model）
-
在设计和布局时经常使用
-
概念
-
本质上是一个盒子，封装周围的HTML元素
-
外边距margin
-
清除边框外的区域，透明的
-
-
边框border
-
围绕在内边距和内容外的边框
-
-
内边距padding
-
清除内容周围的区域，透明的
-
-
实际内容content
-
显示文本和图像
-
-
-
类比：盒子模型-快递、内边距-快递盒子中的泡沫、边框-快递盒子、外边距-两个快递盒子之间的距离
弹性盒子模型（flex box）
-
CSS3的新布局模式
-
组成：弹性容器+弹性子元素
-
通过设置display属性的值为flex，默认横向摆放
-
弹性容器外及弹性子元素内是正常渲染，弹性盒子只定义了弹性子元素如何在弹性容器内布局
-
父元素上的属性
-
display属性
-
display:flex;打开弹性盒
-
-
flex-direction属性
-
指定弹性子元素在父容器中的位置
-
flex-direction: row;
-
row:横向左到右，默认
-
row-reverse:反转横向右到左
-
column:纵向排列
-
column-reverse:反转纵向排列
-
-
justify-content属性
-
内容对齐，沿着弹性容器的主轴线（垂直方向）
-
justify-content: flex-start|flex-end|center;
-
分别是居上（默认）|居下|居中摆放
-
-
align-items属性
-
水平方向
-
align-items: flex-start|flex-end|center;
-
分别是居左（默认）|居右|居中摆放
-
-
-
子元素上的属性
-
flex-grow/flex（权重）
-
需要放在子元素里面
-
根据弹性盒子元素中所设置的扩展因子作为比率来分配剩余空间
-
默认为0
-
一旦设置，子元素中的width就不生效了
-
文档流
-
是文档中可显示对象在排列时所占的位置/空间
-
产生的问题
-
高矮不齐、底边对齐
-
空格折叠
-
元素无间隙
-
-
脱离文档流：元素管理更容易
-
浮动
-
绝对定位
-
固定定位
-
浮动
-
增加一个浮层来放置内容（两层页面）
-
定义元素在哪个方向浮动，任何元素都可以浮动
值 描述 left 向左浮动 right 向右浮动 -
原理
-
使元素脱离文档流
-
浮动只有左右浮动，没有上下浮动
-
-
-
当容器不足时，会向下摆放
清除浮动
-
浮动只在有需要的时候才用
-
浮动元素会造成父元素高度塌陷，后续元素也会受到影响
-
解决方案
-
父元素设置高度
-
受影响的元素增加clear属性
-
overflow清除浮动
-
伪对象方式
-
-
父元素设置高度
-
父元素高度塌陷：给父元素设置高度，撑开元素本身大小
-
-
受影响的元素增加clear属性
-
clear:both;将左右浮动全部清除
-
受影响的元素在容器里面
-
-
overflow清除浮动(使用较多)
-
父级塌陷+同级受到影响
-
在父级标签的样式中加：overflow:hidden;clear: both;
-
-
伪对象方式
-
父级塌陷+同级受到影响
-
父标签添加伪类after，设置空的内容，使用clear:both;
-
父布局不能设置高度
.container::after{ content: ""; display: block; clear: both; }
-
定位
-
position属性指定了元素的定位类型
值 描述 relative 相对定位 absolute 绝对定位 fixed 固定定位 -
绝对定位、固定定位会脱离文档流
-
方向值：left、top、right、bottom
-
相对定位
<style> div{ width: 200px; height: 200px; background-color: red; position: relative; left: 200px; } </style>-
父级中定位了，小盒子移动，容器移动
-
-
绝对定位
-
每设置一个绝对定位就是一层
-
会随着鼠标滚动而进行滚动
-
-
固定定位
-
随着鼠标滚动而不滚动
-
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定位</title> <style> .container{ width: 200px; height: 200px; background-color: #888; position: relative; margin-left: 100px; } .box{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; left: 50px; top: 50px; } </style> </head> <body> <div class="container"> <div class="box"></div> </div> </body> </html> -
Z-index
-
设置元素的堆叠顺序
-
拥有更高堆叠顺序的元素总是会处于较低元素的前面
-
CSS3新特性
-
圆角
-
border-radius:10px;
-
圆形：border-radius:100%/50%;
-
属性
-
四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
-
三个值：第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角
-
两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
-
一个值：四个圆角值相同
-
-
-
阴影
-
box-shadow向框添加一个或多个阴影
-
box-shadow:h-shadow|v-shadow|blur color;
值 描述 h-shadow 必选，水平阴影的位置 v-shadow 必选，垂直阴影的位置 blu 可选，模糊距离 color 可选，阴影的颜色 -
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
-
opacity透明度0~1
-
动画
-
js实现动画：消耗性能
-
百分比规定变化发生的时间or用关键词from和to
-
0%：动画的开始
-
100%：动画的完成
-
@keyframes创建动画
<style> @keyframes name { 0%{ background-color: red; } 50%{ background-color: green; } 100%{ background-color: red; } } </style> -
animation执行动画
animation: name duration timing-function delay iteration-count direction;
值 描述 name 动画的名称 duration 动画的持续时间 timing-function 动画效果的速率（如下） delay 动画的开始时间（延时执行） iteration-count 动画循环的次数，infinite为无限次数的循环 direction 动画播放的方向（如下） animation-play-state 控制动画的播放状态：running代表播放，而paused代表停止播放 TIMING-FUNCTION值 描述 ease 逐渐变慢（默认） linear 匀速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速 DIRECTION值 描述 normal 默认值为normal表示向前播放 alternate 动画播放在第偶数次向前播放，第奇数次向反方向播放 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</title> <style> div{ width: 200px; height: 200px; background-color: red; animation: myAnim 3s linear 0s infinite; } @keyframes myAnim { 0%{ background-color: red; } 50%{ background-color: green; } 100%{ background-color: red; } } </style> </head> <body> <div></div> </body> </html> -
呼吸效果
<style> .box { width: 500px; height: 400px; margin: 40px auto; background-color: #2b92d4; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); animation: breathe 2700ms ease-in-out infinite alternate; } @keyframes breathe { 0% { opacity: 0.2; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) } 50% { opacity: 0.5; box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76) } 100% { opacity: 1; box-shadow: 0 1px 30px rgba(59, 255, 255, 1) } } </style>
媒体查询
-
使页面在不同在终端设备下达到不同的效果
-
核心：根据设备的大小自动识别加载不同的样式
-
meta标签（!自动生成部分）
-
使在移动端内容按照原比例显示（不按照pc端）
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-
参数解释
-
width = device-width宽度等于当前设备的宽度 -
initial-scale初始的缩放比例（默认设置为1.0） -
maximum-scale允许用户缩放到的最大比例（默认设置为1.0） -
user-scalable用户是否可以手动缩放（默认设置为no）
-
-
语法
<style> .box{ width: 300px; height: 300px; background-color: red; } @media screen and (max-width: 768px) { /* 设备小于768px加载样式 */ body{ background-color: red; } } @media screen and (max-width: 992px) and (min-width: 768px) { /* 设备小于768px但小于992px加载样式 */ body{ background-color: pink; } } @media screen and (min-width: 992px) { /* 设备大于992px加载样式 */ body{ background-color: green; } } </style>-
根据不同的显示媒体而不同
-
雪碧图
-
CSS Sprite：CSS精灵图、CSS雪碧图
-
网页图片应用处理方式，允许将一个页面涉及到的所有零星图片都包含到一张图片中
-
优点
-
减少图片的字节
-
减少网页的http请求，从而大大的提高页面的性能
-
-
原理
-
通过background-image引入背景图片
-
通过background-position把背景图片移动到自己需要的位置
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>雪碧图</title> <style> .icon1 { display: block; background-image: url(雪碧图\ .png); background-position: -20px 0; width: 45px; height: 70px; } .icon2 { display: block; background-image: url(雪碧图\ .png); background-position: -93px -84px; width: 45px; height: 70px; } </style> </head> <body> <i class="icon1"></i> <i class="icon2"></i> </body>
-
字体图标
-
使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题
-
常用字体图标库：阿里字体图标库
-
优点
-
轻量性：加载速度快，减少http请求
-
灵活性：可以利用CSS设置大小颜色等
-
兼容性：网页字体支持所有现代浏览器，包括IE低版本
-
-
使用字体图标
-
注册账号并登录
-
选取图标或搜索图标
-
添加购物车
-
下载代码，打开html网页
-
选择
font-class引用 -
-
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
