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进阶教程》再详细介绍。