CSS: 样式和模式

Содержание и основные понятия

返回目录
第8章 · 第8.2页
CSS: 样式和模式
CSS( CSCS 样式表) 是将 XML 骨架变成美丽的页面的语言 。
如果 TML 是
骨架
CSS是:
服装、头发和化妆
没有CSS,所有网站都看起来像90年代的文件
CSS 描述,
怎么会?
这些元素看起来像: 颜色、 大小、 撤退、 位置、 动画 。 一个 CSS 文件可以将数百个 HTML 页面同步化 。
· 基本全球环境基金
PLF 受伤害
01
选择器和级联
CSS 如何找到元素和什么风格取胜
CSS CSS 语法
选择器
{
财产财产
:
价值值
;
color
:
#22d3ee
;
font-size
:
16px
;
}
甄选类型类型
选择器
示例示例示例
哪一个选择
重量
类型类型类型
p, h1, div
此标记的所有元素
0-0-1
职等 职等
.card, .btn
带有类属性的元素元素
0-1-0
ID
#header
带有属性ID的一个元素
1-0-0
属性属性属性
[type="email"]
带有指定属性的元素元素
0-1-0
初选类
:hover, :first-child
要素状况
0-1-0
后裔后裔
nav a
<nav> 内的所有 <a>
数额数额
女儿
ul > li
只直接子公司 <li>
数额数额
世界普遍
*
所有要素
0-0-0
连带:谁赢了
当一个以上的条例适用于一个要素时,中央安全系统使用
具体具体
(重量)确定胜者:
在线
(样式=...)是1-0-0(最高)的重量。
ID
(#头目的)是0-1-0-0-0的重量
类、属性、假类
(.卡)是0-0-1-0的重量
类型、伪元素
(p, h1) - 0-0-0-1重量
以同样的特殊性获胜。
最后一个
规则是编码的。
!important
color: red !important;
如果你需要的话,它意味着CSS建筑就坏了。
02
盒式模型
每个元素是一个框 :
框的四层
margin
border
padding
content
图2
方框模式:从内容到外部减损
财产
他所做的事
示例示例示例
width / height
目录大小
width: 300px;
padding
内部克减(从内容到Bourder)
padding: 16px;
border
围绕元素的方框
border: 1px solid #ccc;
margin
外部撤退(邻国边界)
margin: 20px auto;
box-sizing: border-box
默认默认
width
仅含内容。
box-sizing: border-box
宽度包括垫子和边框 方便得多 永远使用
03
弹性盒是一个灵活的模型
单维位置:行或列,完全控制
Flexbox 如何工作
家长得到
display: flex
儿童自动排队
列
默认情况下。
父母属性(软容器)
财产
价值价值
他所做的事
flex-direction
row | column
方向:行或列
justify-content
flex-start | center | space-between | space-around
主轴平准
align-items
stretch | center | flex-start | flex-end
交叉轴对齐
flex-wrap
nowrap | wrap
转到新行
gap
10px, 1rem
元素之间的距离
Child&apos; s 属性( 弹性元素)
财产
他所做的事
flex-grow
可占用的自由空间百分比( 0 = 不伸缩)
flex-shrink
缺少空间时如何压缩
flex-basis
可用空间分配前的基数大小
align-self
个人均等(重新界定的举名项目)
04
CSS网格是一个二维模型。
同时为复杂模型的线和列
网格基金会
父母 :
display: grid
浏览列和行 :
.grid {
display: grid;
grid-template-columns:
1fr 2fr 1fr
;
* 3 栏 */
grid-template-rows:
auto 200px
;
* 2 行 */
gap:
16px
;
距离 * 距离* *
}
股f
fr
- 空间的一部分。
1fr 2fr 1fr
=三列,平均宽度是两倍。
有用的函数
函数职能职能职能
示例示例示例
任用任用
repeat()
repeat(3, 1fr)
重复播放员 N 次
minmax()
minmax(200px, 1fr)
最小和最大尺寸
auto-fit
repeat(auto-fit, minmax(200px, 1fr))
没有媒体要求的适应网!
grid-area
1 / 1 / 2 / 3
该元素包含多个单元格
Flexbox vs Grid
Flexbox
- 单维位置(线或列):导航、按钮、行卡。
Grid
- 二维(线和列):页面布局、画廊、仪表板。
05
动画和交叉交叉
平稳变化的过渡, @ 复杂动画关键框架
过渡 过渡
.btn {
background: blue;
transition:
background 0.3s ease
;
}
.btn:hover {
background: red;
* 0.3c 平滑 *
}
@keyframes — 复杂动画
@keyframes
pulse
{
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.card {
animation:
pulse 2s infinite
;
}
生产力生产率
只瞄准目标
transform
和
opacity
- 他们正在被GPU处理
width
,
height
,
margin
导致重新油漆和停止。
06
适应适应适应
媒体请求:台式计算机、平板电脑和电话一页
媒体请购
? 所有屏幕的栅栏?
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media
(max-width:
768px
) {
* 平板:2列*/
.grid { grid-template-columns: 1fr 1fr; }
}
@media
(max-width:
480px
) {
* 电话:1栏 */
.grid { grid-template-columns: 1fr; }
}
典型括号点
设备设备
宽宽度
专业专业
disc托
> 1024px
全模型,悬浮效应
平板
768–1024px
简化模型,减列
电话电话
< 768px
一列, 大按钮( 44px+)
Mobile-first
专业人士先写移动风格,再添加。
@media (min-width: ...)
这叫做大屏幕
mobile-first
办法。
📦
Flexbox 设计器
设置属性 □ 查看结果
插数
更改弹性容器的属性; 区块将实时重新设计。 右侧是完成的 CSS 代码 。
direction
justify
align
wrap
gap
1
2
3
4
5
🎨
HTML 颜色表
140 个名称颜色 □ 单击 = 副本十六进制
插数
CSS 支持 140 个命名的颜色。 单击颜色 -- 复制的十六进制代码。 使用过滤器搜索 。
⚖️
特定计算器
输入选择器 · 学习重量
插数
输入 CSS 计算器,该计算器将显示其特性( Inline、 ID、 类、 类型)。
🧪
CSS 歌手
HTML + CSS + HTM L+ CS + Live 选项 / Width 开关
插数
编辑 XML 和 CSS - 预视器即时更新。 切换宽度以检查适应性 。
宽度 :
localhost/sandbox