CSS全方位指南：考试必备，Web前端开发核心知识点

需积分: 10 66 浏览量更新于2024-07-18 2 收藏 1.35MB PDF 举报

"该资源是一份详尽的CSS学习指南，涵盖了从基础到高级的各种CSS概念，适合web前端开发人员复习和准备考试。内容包括CSS概述、语法、样式应用方式（行内样式、内部样式块、外部样式表）、选择器、布局技术（如盒子模型、浮动与定位、弹性盒子）、CSS的特性（继承性、层叠性、优先级）、过渡与变幻、CSS3动画、以及移动端布局基础和注意事项。" **CSS概述** CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。它的主要作用是分离结构（HTML）和表现（CSS），使页面设计更加灵活和易于维护。 **基本语法** CSS的样式规则由选择器和声明组成，声明包含属性和值，用分号分隔，选择器和声明块之间用花括号包围。 **样式应用** 1. **行内样式**：通过`style`属性直接在HTML元素内定义样式。 2. **内部样式块**：在`<head>`内的`<style>`标签中定义样式，应用于整个页面。 3. **外部样式表**：将CSS代码保存为单独的文件，通过`<link>`标签引入。 **选择器** 选择器用于选取要应用样式的HTML元素，包括ID选择器、类选择器、元素选择器、属性选择器等。 **布局技术** 1. **盒子模型**：CSS中的元素可以看作一个矩形盒子，包括内容区域、内边距、边框和外边距。 2. **浮动**：元素可以通过`float`属性实现水平布局，需注意清除浮动以防止布局混乱。 3. **定位**：`position`属性有相对定位、绝对定位、固定定位和静态定位，用于精确定位元素位置。 **元素类型** 了解块级元素、行内元素和行内块级元素的特性，它们在布局中的行为差异，以及如何进行类型转换。 **CSS3新增特性** 1. **伪类与伪元素**：用于创建特殊状态或元素结构，如`:hover`、`:first-child`等。 2. **过渡和变幻**：提供平滑的动画效果，`transition`用于过渡，`transform`用于变幻，包括旋转、缩放、位移等。 3. **CSS3动画**：通过`animation`属性定义复杂的动画序列。 4. **响应式布局**：利用媒体查询(`media queries`)适应不同设备屏幕。 **移动端布局** 包括自适应布局、弹性布局和响应式布局，以及针对iOS和Android设备的特定样式调整。 **其他知识点** 还包括CSS的继承性、层叠性、优先级，以及选择器的渐进增强等概念，这些都是理解CSS工作原理和编写高效样式的关键。这份资源是web前端开发者巩固CSS知识、提升技能的宝贵资料，不仅适用于初学者，也适合有一定经验的开发者进行复习和参考。

边框

1. border:1px solid black

上面的border设置了线条的宽度为1px,线条的类型为solid（实线），线条的颜色为black(黑色)

2. border-style 设置线条的类型

在这里，我们有几个常用的线条类型 solid实线,dotted紧凑型虚线,dashed虚线，double双线......

3. border-color设置线条的颜色，这个颜色接收三种值

4. border-width设置线条的宽度

5. border-top/right/bottom/left-style/width/color

分不同的方向，不同的类型去设置边框

这一种组合方式有12个

6. border-raduis圆角边框

通过这个属性，我们可以设置一个元素的圆角边框，如果设置的这个值大于或等于它的宽度一半，这个元素

就会呈现出一个圆形

文字与字体

1. color设置文字的颜色，它接收三种颜色值

2. text-align设置文字的排列方向，它有三个值 left/center/right

3. font-size设置字体大小，它接收几个值

px像素单位网页上面默认的字体大小是16个像素单位

pt字号单位网页上面默认的字体大小是12pt大小，它代表标准字体大小

说明：12pt=16px

vw单位，这是一个响应式的单位，viewport width

1vw代表设备宽度*1%

4. font-family设置字体类型

后面跟一个字体名，这个字体名可以是中文，但是尽量不要写中文，要用英文

例如"微软雅黑"要换成 Microsoft yahei ;

5. @font-face第三方字体

我们可以使用@font-face这个命令来定义我们的一个自定义字体（第三方字体），具体使用如下

定义字体

说明：上面的@font-face是自定义定体的命令，里面的font-family代表这个自定义定体的名子，后面跟

s着的src代表这个字体的位置

使用字体

@font-face {

font-family:'fzkt';

src: url(fonts/fzkt.ttf);

}

说明：这个时候的font-family就引入了上面刚刚定义好的自定义定体名 fzkt ，效果图如下所示

6. font-weight设置字体的权重

它有常用的三个属性值lighter/normal/bolder, font-weight:bolder 要当于把字体加粗了

7. text-decoration设置文字的划线方式

它常设置的值有三个underline下划线，overline上划线以及line-through删除线（相当于del或strike标签的效

果）

8. text-shadow文字阴影效果

它可以设置文字的阴影响果，它的属性值有四个

第一个值代表横向偏移，如果是负值就代表向左偏移，如果是正值则代表向右偏移

第二个值代表纵向偏移，如果是负值则代表向上偏移，如果是正值则代表向下偏移

第三个值代表阴影模糊度，值越大阴影越模糊，最小值为0即没有模糊度

第四个值代表阴影的颜色值，它接收三种类型颜色

9. text-indent首行缩进

text-indent:2em 这句代码的意思就代表首行缩进两个字符位

它不仅仅可以使用em字符单位，还可以使用像素px做单位如 text-indent:50px 代表首行缩进50px

10. text-transform字体变幻

uppercase把英文字体变成大写

lowercase 把英文字母变成小写

capitalize 每个单词的首字母变成大写

11. letter-spacing字体之间的间距，接收一个像素值

12. line-height设置字体的高行，这个行高接收一个数字单位，同时也可以接收一个像素单位

注意：在接收像素单位的时候，我们可以通过这个特性来实现文字的上下排列方式，例如上下居中

说明：上面的代码里面，我们的行高设置成了100px,同时，我们的div1的高度也设置成了100px.这个时

候，行高与高度相同，就会出现文字在这个div1里面呈现上下居中的效果

.p1{

text-align: center;

font-family: 'fzkt';

}

.div1{

width: 200px;

height: 100px;

border: 1px solid black;

text-align: center; /*实现了文字的左右居中*/

line-height: 100px;

}

剩余50页未读，继续阅读

狙神哥哥

粉丝: 0
资源: 1

CSS全方位指南：考试必备，Web前端开发核心知识点

web编程基础试题及答案

web 开发 css 必看

网页开发技术必备CSS教程

web开发-css完整笔记

Web前台技术WEB开发基础

Web开发基础教程

CSS——Web静态页面开发

web 前端开发必备材料包含html，css，JavaScript

web开发必备资料 内含css,js,html,jquery参考手册

20个必备CSS代码段提升Web开发效率

最新资源

web开发必备资料内含css,js,html,jquery参考手册