Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结

内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结

第11章 CSS简介

1、HTML是网页的结构，CSS是网页的外观，JavaScript是网页的行为。

2、CSS的出现就是为了改造HTML单调的默认外观。

3、CSS引入方式有3种：外部样式表、内部样式表、行内样式表。

4、在实际开发中，一般都是使用外部样式表

第12章 CSS选择器

1、id和class

（1）id就像你的身份证号，而class就像你的名字。同一个页面中，id只允许出现一次，而class允许出现多次

（2）id和class都是用来选择元素，以便进行CSS操作或者JavaScript操作的

2、CSS选择器

在CSS中，最常用的选择器有5种：元素选择器、id选择器、class选择器、后代选择器、群组选择器。

第13章字体样式

在CSS中，常用字体样式属性如下表所示。其中，font-style属性几乎用不上，我们可以直接忽略。

表13-4 字体样式属性

属性	说明
font-family	字体类型
font-size	字体大小
font-weight	字体粗细
color	字体颜色

1、font-family

font-family如果不指定字体，则会采用浏览器默认字体（即宋体）来显示。如果指定多种字体，则多个字体将按从左到右的优先顺序生效；

在实际开发中，常用的中文字体有微软雅黑、宋体，常用的英文字体有"Times New Roman "、Arial、Verdana；

2、font-size

font-size属性取值一般是“像素值”，不会采用“关键字”。在实际开发中，常用字体大小为12px、14px，很少用13px、15px等。

3、font-weight

在实际开发中，我们只会用到“font-weight:bold;”这一个属性值，其他的几乎用不上。

4、color

color属性取值有2种，一种是关键字，如red、green、blue等；另外一种是“16进制RGB值”，如#EEEEEE、#FBF9D0等。

【后话】：在这一章的学习中，大家可能都感觉到本书的不同之处了。在这本书中，我们会根据实际工作开发，然后在各个章节中穿插各种非常棒的技巧。最重要的是，我们会告诉小伙伴们哪些属性该记忆，哪些压根儿用不上，这可以大大提高学习效率。因为笔者我嘛，曾经作为初学者时，就有过痛苦的经历。当初都是一头扎进去，什么都学，过一段时间又忘，然后又接着复习。没想到最后自己大量实践的时候，发现很多知识点都用不上！白白浪费了大量时间和精力。希望笔者的这些心血与经验，能够换取大家的时间。人生苦短，时间更多应该用来追逐自己喜欢的东西，而不是在一些弯路上白白浪费。

第14章文本样式

在CSS中，常用的文本样式如下表14-5所示：

表14-5 文本样式属性

属性	说明
text-indent	首行缩进
text-align	水平对齐
text-decoration	文本修饰
text-transform	大小写
line-height	行高
letter-spacing、word-spacing	字母间距、词间距

（1）一般来说，text-transform、letter-spacing、word-spacing这3个在实际开发几乎用不上，我们只需要重点掌握其他几个即可；

（2）除了上表这些，还有一个font-variant属性没有介绍。不过这个属性平常也用不上，因此我们也不需要去了解；

第15章边框样式

在CSS中，想要为元素定义边框，需要设置3个方面：边框宽度、边框外观、边框颜色。

表15-3 边框样式属性

属性	说明
border-width	边框宽度
border-style	边框外观
border-color	边框颜色

其中，边框的简写形式如下：

border:1px solid red;

如果想要定义局部边框样式，我们可以使用如下属性：

表15-4 边框局部样式属性

属性	说明
border-top	上边框
border-bottom	下边框
border-left	左边框
border-right	右边框

第16章列表样式

对于列表来说，常见的CSS属性有2个，如下表16-3所示：

表16-3 列表样式属性

属性	说明
list-style-type	定义列表项符号
list-style-image	定义列表项图片

除了上面2个，可能我们还会看到list-style、list-style-position等属性，不过那些属性几乎用不上，可以直接忽略。从实际开发角度来看，这一章我们只需要记住“list-style-type:none;”这一个就够了，是不是非常简单呢？

第17章表格样式

在CSS中，对于表格样式设置包括：标题位置、边框合并、边框间距。

表17-3 表格样式属性

属性	说明
caption-side	表格标题位置
border-collapse	表格边框合并
border-spacing	表格边框间距

这3个属性都是表格所独有的，而且都是在table元素中定义的。

第18章图片样式

表18-4 图片样式属性

属性	说明
width	定义图片的宽度
height	定义图片的高度
border	定义图片的边框
text-align	定义图片水平对齐方式
vertical-align	定义文本相对于图片的垂直对齐方式
float	定义文字环绕效果

第19章背景样式

1、背景颜色

表19-4 背景颜色属性

属性	说明
background-color	定义背景颜色

2、背景图片

表19-5 背景图片属性

属性	说明
background-image	定义背景图片地址
background-repeat	定义背景图片重复
background-position	定义背景图片位置
background-attachment	定义背景图片固定

在实际开发中，background-attachment用得比较少，只需简单了解一下就行。

第20章超链接样式

1、超链接伪类

对于超链接伪类来说，我们只会用到2种状态：未访问时状态和鼠标经过状态。

语法：

a{…}

a:hover{…}

其中，“:hover伪类”可以定义任何一个元素在鼠标经过时的样式，这是一个经常使用的开发技巧。

2、鼠标样式

在CSS中，鼠标样式的定义有2种，一种是“浏览器鼠标样式”，另外一种是“自定义鼠标样式”。这2种方式都是使用cursor属性来定义。

第21章盒子模型

在CSS中，页面所有元素都可以看成是一个盒子。每一个盒子是由content（内容）、padding（内边距）、margin（外边距）和border（边框）这四个属性组成的。此外，在盒子模型中，还有宽度width和高度height两大辅助性属性。

图21-20 CSS盒子模型

表21-2 CSS盒子模型的组成部分

属性	说明
content	内容，可以是文本或图片
padding	内边距，用于定义内容与边框之间的距离
margin	外边距，用于定义当前元素与其他元素之间的距离
border	边框，用于定义元素的边框

第22章浮动布局

1、文档流

在正常文档流中，将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。

为了更好地进行布局，我们有时候需要使用浮动或者定位来使得元素脱离文档流。

2、浮动布局

如果你想要实现两个或者多个块元素横向排列，就应该使用浮动。浮动最常用于实现水平方向上的并排布局，例如两列布局、多列布局。

3、清除浮动

我们一般都是在浮动元素后面再增加一个空元素，然后为这个空元素定义“clear:both;”来清除浮动。

【后话】：float属性很简单，只有3个属性：left、right和both。但是浮动涉及的理论知识极其复杂，其中包括：块元素和行内元素、CSS盒子模型、脱离文档流、BFC、层叠上下文。如果一上来就介绍那么多，估计小伙伴们啥兴趣都没了。为了让大家有一个循序渐进的学习过程，我们把高级部分以及开发技巧放在了本书的姊妹篇《HTML与CSS进阶教程》中。

第23章定位布局

在CSS中，我们都是使用position属性来实现定位布局。定位布局有4种，如下表23-2所示：

表23-2 position属性取值

属性值	说明
fixed	固定定位
relative	相对定位
absolute	绝对定位
static	静态定位（默认值）

默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。这里注意一个前提：默认情况下。

【后话】：跟浮动布局一样，定位布局也是非常复杂的。这一章学到的只是一些基础知识而已，想要真正用好定位布局，我们还需要掌握更高级的开发技巧。对于高级部分以及开发技巧，我们《HTML与CSS进阶教程》再详细介绍。

Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结相关推荐

Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
web前端开发（三）—JavaScript基础
目录一.JS简介二.JS变量三.JS数据类型(弱类型) 四.字符串常用方法五.数组常用方法六.条件判断七.循环语句八.函数九.浏览器对象一.JS简介 JavaScript 是属于网络 ...
【融职培训】Web前端学习第3章 JavaScript基础教程9 内置对象
一.内置对象概述 javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能.我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:M ...
【融职培训】Web前端学习第3章 JavaScript基础教程18 BOM概述
一.概述 <javaScript高级程序设计>这本书讲过: javaScript = ECMAScript + DOM + BOM. DOM:文档对象模型(document对象) BOM: ...
Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
《Web前端开发精品课 HTML与CSS进阶教程》——1.4　id和class
本节书摘来自异步社区<Web前端开发精品课 HTML与CSS进阶教程>一书中的第1章,第1.4节,作者: 莫振杰更多章节内容可以访问云栖社区"异步社区"公众号查看. ...
web前端开发常用的10个高端CSS UI开源框架
随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源资源,更快更好地实现一些现代化的界面,是必备技能之一.下 ...
《Web前端开发精品课——HTML5 Canvas开发详解》——第一部分第二章节
本节书摘来自异步社区<Web前端开发精品课--HTML5 Canvas开发详解>一书中的第1部分,第2章,作者:莫振杰著,更多章节内容可以访问云栖社区"异步社区"公众 ...
[原]《Web前端开发修炼之道》-读书笔记CSS部分
如何组织CSS-分层应用 css 的能力分两部分:一部分是css的API,重点是如何用css控制页面内元素的样式:另一部分是css框架,重点是如何对 css 进行组织.如何组织 css 可以有多种角 ...

Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结

Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结相关推荐

最新文章

热门文章