Chap02-CSS.zip资源-CSDN文库

共87个文件

png：36个

html：30个

jpg：12个

需积分: 5 124 浏览量 2022-11-14 23:18:14 上传评论收藏 11.41MB ZIP 举报

在本压缩包“Chap02-CSS.zip”中，我们重点关注的是CSS（Cascading Style Sheets）这一关键的Web设计技术。CSS是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的语言，它使得我们可以将样式信息与结构内容分离，使网页设计更加灵活和易于维护。一、CSS基础 1. 选择器：CSS的核心是选择器，它们用于选取要应用样式的HTML元素。例如，`p`选择器用于选取所有段落，`#id`用于选取具有特定ID的元素，`.class`用于选取具有特定类名的元素。 2. 属性和值：选择器后面跟着属性，属性定义了要改变的样式属性，如颜色、字体大小等。值则指定了属性的新状态，如`color: red;`将文本颜色设置为红色。 3. 样式规则：样式规则由一个或多个选择器和它们对应的属性值组成，以大括号`{}`包裹。例如，`p {color: red; font-size: 16px;}`。 4. 内联样式、内部样式表和外部样式表：内联样式是通过在HTML元素中使用`style`属性来定义；内部样式表常置于`<head>`标签内的`<style>`标签中，作用于整个页面；外部样式表是单独的.css文件，通过`<link>`标签引入，可应用于多个页面。二、CSS盒模型 1. 盒模型：CSS中的每个元素都可视作一个矩形盒子，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。总宽度和高度等于内容宽高加上内外边距和边框。 2. IE盒模型和W3C盒模型：IE盒模型（怪异盒模型）将边框和内边距计算在元素宽度和高度内，而W3C盒模型则不包含这些。为解决兼容性问题，可以使用`box-sizing`属性设定盒模型类型。三、布局 1. 浮动(float)：浮动元素会脱离标准文档流，向左或向右移动，直到其边缘碰到容器的边缘。常用在创建多列布局。 2. 定位(position)：通过`position`属性（static、relative、absolute、fixed），可以控制元素相对于其正常位置或其他元素的位置。 3. Flexbox（弹性盒布局）：是一种更现代的布局模式，用于创建响应式、单轴布局。通过`display: flex`开启，配合`justify-content`、`align-items`等属性调整元素排列和对齐。 4. Grid布局：用于创建二维布局，通过`display: grid`定义网格系统，利用`grid-template-columns`和`grid-template-rows`指定网格行和列，`grid-gap`定义间距。四、选择器进阶 1. 伪类和伪元素：如`:hover`用于选取鼠标悬停时的元素，`:first-child`选取父元素的第一个子元素，`::before`和`::after`在元素内容前后插入内容。 2. 组合选择器：例如，`h1 + p`选取紧跟在`h1`元素后面的`p`元素，`div p`选取所有`div`元素内的`p`元素。五、CSS3新特性 1. 颜色和渐变：CSS3支持更多颜色模式（如HSL、RGBA），以及线性渐变、径向渐变等效果。 2. 动画：`@keyframes`规则定义动画，`animation`属性控制动画的播放。 3. 异形边框：`border-radius`属性创建圆角边框，`clip-path`和`mask`实现复杂形状。 4. CSS3过渡和变换：`transition`实现元素状态改变时的平滑过渡，`transform`用于元素的2D/3D旋转、缩放、移动等。 6. 多列布局：`column-count`和`column-gap`等属性创建多列布局。 7. Flexbox和Grid布局：如前所述，它们提供了更现代、强大的布局解决方案。以上就是关于“Chap02-CSS.zip”压缩包中所涉及的主要CSS知识点，涵盖了CSS的基本概念、布局、选择器和CSS3新特性等方面。通过深入理解和熟练掌握这些内容，开发者能够更好地设计和控制网页的外观和交互。

资源推荐

资源详情

资源评论

收起资源包目录

Chap02-CSS.zip （87个子文件）

Chap02-CSS

css

03外部样式表.css 91B

04基础选择器外部样式表.css 1KB

06选择器综合外部样式表.css 520B

05复合选择器外部样式表.css 2KB

22-浮动特性.html 872B

08-css权重.html 856B

20-常见网页布局04.html 1KB

img

pic1000.png 2.35MB

land.png 2KB

小米有品-03.jpeg 109KB

1.jpg 40KB

gaita.jpg 1.14MB

小米有品-05.png 343KB

村居.png 690KB

bg02.jpg 262KB

xmi-icon-01.png 8KB

qiqiu.png 17KB

icon07.jpg 3KB

bg128-02.png 23KB

静夜思.jpg 11KB

icon01.png 3KB

bg03-50px.png 9KB

bgjb.jpg 18KB

icon03.png 7KB

bg.png 1KB

1.png 37KB

icon08.jpg 3KB

bg250.png 81KB

xmi-icon-02.png 10KB

小米有品-07.png 9KB

logo.jpg 15KB

bg50px.png 15KB

icon04.png 60KB

bg128.png 22KB

icon2.png 2KB

小米有品-02.png 577KB

icon1.png 2KB

山行.jfif 207KB

xmi-icon-05.png 2KB

icon06.jpg 2KB

梅花.png 184KB

小米有品-00.png 22KB

bg.jpg 198KB

小米有品-06.png 13KB

望庐山瀑布.jpg 341KB

小米有品-01.png 672KB

咏柳03.jfif 59KB

2.png 4KB

xmi-icon-03.png 10KB

jia.png 2KB

小米有品.png 580KB

icon02.png 3KB

诗词文本资料.txt 2KB

icon3.png 2KB

xmi-icon-04.png 10KB

icon05.jpg 13KB

无题.png 254KB

bg200.png 62KB

小米有品-04.png 657KB

18-常见网页布局02.html 968B

19-常见网页布局03.html 866B

26-清楚浮动.html 938B

11-显示模式.html 995B

14-盒子内外边距.html 732B

小米有品首页展示.mp4 2.74MB

15-盒子外边距合并.html 989B

16-文本导航栏制作.html 972B

07-css层叠性继承性.html 561B

new_file.html 196B

index.html 742B

05-复合选择器.html 3KB

26-清除浮动.html 1KB

06-选择器综合.html 3KB

10-列表项属性设置.html 2KB

04-基础选择器.html 2KB

02-css内部样式.html 932B

13-盒模型边框.html 671B

25-固定定位.html 720B

17-常见网页布局01.html 658B

23-盒子绝对定位.html 1KB

27-小米有品首页仿制.html 4KB

24-相对定位.html 1KB

03-css外部样式.html 846B

01-css行内样式.html 878B

12-盒模型.html 400B

21-盒子浮动.html 1KB

09-背景边框属性设置.html 2KB

咏柳作者：贺知章 (唐) 碧玉妆成一树高，万条垂下绿丝绦。不知细叶谁裁出，二月春风似剪刀。村居作者：高鼎 (清) 草长莺飞二月天，拂堤杨柳醉春烟。儿童散学归来早，忙趁东风放纸鸢。高鼎，清代后期诗人。字象一，又字拙吾，仁和（今浙江省杭州市）人。梅花 / 梅作者：王安石 (宋) 墙角数枝梅，凌寒独自开。遥知不是雪，为有暗香来。王安石（1021年12月18日－1086年5月21日），字介甫，号半山。抚州临川（今江西抚州）人。北宋著名思想家、政治家、文学家、改革家山行作者：杜牧 (唐) 远上寒山石径斜，白云深处有人家。停车坐爱枫林晚，霜叶红于二月花。杜牧（803年－约852年），字牧之，号樊川居士，汉族，京兆万年（今陕西西安）人。杜牧是唐代杰出的诗人、散文家，是宰相杜佑之孙，杜从郁之子。静夜思作者：李白(唐）床前明月光，疑是地上霜。举头望明月，低头思故乡。李白（701年－762年），字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。望月怀远 / 望月怀古 [ 唐 ] 张九龄海上生明月，天涯共此时。情人怨遥夜，竟夕起相思。灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。张九龄（673年～740年）字子寿，号博物，韶州曲江（今广东韶关市）人。唐朝开元名相、政治家、文学家、诗人，西汉留侯张良之后，西晋壮武郡公张华十四世孙。

评论收藏

内容反馈