前端CSS总结

目录

 

前言

正文

CSS基础介绍：

CSS选择器：

元素选择器：

id和class选择器：

后代选择器和群组选择器：

盒子模型

content：

padding：

border：

margin：

字体样式

font-family：

font-weight：

font-style：

文字样式

text-indent：

text-align：

line-height：

图片样式

文字环绕：

列表样式

超链接样式

超链接伪类：

常用的伪类：

鼠标样式：

背景样式

背景颜色：

背景图片：

background-position：

浮动布局

什么是文档流？

什么是正常文档流？

Float

清除浮动：

作用：

使用：

其他方法：

定位布局

四种方式：

子绝父相

固定定位：

相对定位：

绝对定位：

总结

---

 

前言

精读一本书，胜过看N个视频。

这次看的书是：

吴振杰的《Web前端开发精品课 HTML CSS JavaScript基础教程》

17年出版的。

 

正文

CSS基础介绍：

CSS的定义：

全称：Cascading Style Sheet

中文名：层叠样式表

 

与HTML的关系：

HTML是骨架，CSS是外观，JS是行为

 

版本：

CSS1.0、CSS2.0、CSS2.1、CSS3.0共四个版本

其中，CSS2.1是CSS2.0的修订版。

跟HTML4和HTML5的关系一样——HTML5是对HTML4的补充；而CSS2和CSS3也是一样的。

 

引入方式：

外部样式表：link，在head标签中使用

内部样式表：style，在head标签内使用

行内样式表：行内style，在元素标签内使用

其中，优先级最高的是行内样式表，不推荐使用!important

 

有些网站（比如说商城的商详页）是先出结构，再加载CSS的，原因是？

引入方法不同，加载顺序不同

 

CSS选择器：

含义：

选择你要改变的元素，一共有五种选择器。

 

CSS选择器：

元素选择器、id选择器、class选择器、后代选择器、群组选择器

 

元素选择器：

直接选中元素，就是元素选择器。

比如说，div { style ... }。

 

id和class选择器：

id具有唯一性，一个页面只能出现一个同名id，定义和使用都需要加上"#"；

而class允许出现重复，定义和使用都需要加上"."。

理解：id是身份证，class是名。

这跟我们英文学的是一样的，id是身份证的意思，而class翻译是类名。

 

后代选择器和群组选择器：

后代选择器：选择的是父元素下的某一子元素，这些元素之间是有关联的（要么就是父子元素，要么就是兄弟元素），两者之间使用空格隔开。

群组选择器：选择的是任意两个及以上元素，这些元素之间没有任何关联，两者之间使用逗号隔开。

 

盒子模型

什么是盒子模型？

一个元素所占据的空间。

 

怎么理解盒子模型？

页面中的每一个元素都可以看成是一个盒子，并且占据着一定的空间，并且这些盒子会互相影响。

 

盒子模型的组成：

主要内容：content（内容）、padding（内边距）、border（边框）、margin（外边距）

次要内容：content的width、height

 

content：

内容区，是CSS盒子的主要构成部分，可以是图片、文本等。

内容区是盒子模型必不可少的组成部分，其他三部分（padding、border、margin）可选。

内容区的三个重要属性：width、height、overflow，宽高不包括padding。

只有块元素才有宽高，行内元素是无法设置宽高的，需要转换类型。

 

padding：

内边距，指的是内容区和边框之间的空间，可以看成是背景区域。

 

border：

内外边距的“墙”。

border: width, style, color，可以直接设置边框的粗细、样式（实线、虚线、双线），颜色。

也可以修改直接某一边（上下左右）的边框样式。

 

margin：

两个盒子之间的距离，使得元素不用紧挨着一起。

margin允许负数值，从而使得两个盒子之间产生重叠的效果。

 

字体样式

常见的字体属性：

font-family：字体类型

font-size：字体大小

font-weight：字体粗细

font-style：字体风格（斜体）

color：字体颜色

 

font-family：

常用的字体：

中文：微软雅黑、宋体

英文：Times New Roman、Arial、Verdana

 

特别注意：

如果字体类型只有一个英文单词，不需要双引号；

如果是多个英文单词或者是中文，则需要加双引号。

多个字体，从左到右顺序进行选择显示，第一个字体库缺失，就第二个，以此类推。

 

font-weight：

属性值：100-900的整数数值、关键字（normal、lighter、bold、bolder）。

一般都是采用数值的形式，100相当于lighter，400相当于normal，700相当于bold，900则是bolder。

在实际开发中，一般都是使用bold。

 

font-style：

属性值：normal、italic（斜体）、oblique（斜体）

italic和oblique的区别：不是所有字体都有italic这个属性的，如果不起效果，就是用oblique即可。

在实际开发中，很少使用这个属性。

 

文字样式

与字体样式的区别：

字体样式：针对文字本身的显示效果，注重个体效果。

文本样式：针对整个段落的排版效果，注重整体效果。

 

常见的属性：

text-indent：首行缩进

text-align：水平对齐

text-decoration：文本修饰

text-transform：大小写

line-height：行高

 

text-indent：

前提：p元素的首行是不会自动缩进的

例子：font-size：14px; text-indent: 28px

字体大小是14，而首行缩进的像素值恰好是它的两倍，刚好缩进两个字符。

 

text-align：

水平方向一般都是left、center、right，没有middle，middle是垂直方向上的。

 

line-height：

用于控制每行文本的高度，可以实现垂直方向上居中。

但不是行间距，因为它只包含文本的高度，不包含文字的上下间距。

 

图片样式

图片大小控制：使用width、height属性。

图片边框：border。

 

图片对齐方式：

水平方向：text-align，一般都是用center这个属性值。

垂直方向：vertical-align。

注意：

1.想要图片居中对齐，应该在其父元素上设置水平居中，而不是img标签上进行设置。

2.vertical-align属性定义的是行内元素或文本相对于该元素的垂直方式，而不是设置该元素的垂直方式。

 

文字环绕：

在网页布局中，常常需要图文混排的效果。

这个时候，就需要用到Float属性（属性值：left、right）。

 

注意：

属性值里没有center，属性写在img里，且改变的是图片的位置。

img { float: right }，图片是在右侧，而不是左侧。

 

列表样式

为什么要学列表样式？

结构和样式应该是分离的。

最常用的属性值：list-style-type：none。

 

此外，还可以自定义列表符号。

list-style-image: url(图片路径)

不常用，经常用的是iconfont。

 

超链接样式

超链接在鼠标点击的不同时期有着不同的状态：

默认：字体蓝色，带有下划线

点击时（不松手）：字体为红色，带有下划线 - 一瞬间的事情

点击后：字体为紫色，带有下划线

 

超链接伪类：

a:link：默认样式，未访问样式。

a:visited：访问后的样式。

a:hover：鼠标经过样式。

a:active：点击激活时的样式（点击的一瞬间）。

注意：必须要按照这样的排序进行设置，否则部分样式可能失效。

 

常用的伪类：

a:link

a:hover

注意：对于未访问状态，我们可以省略:link，直接写a。

 

怎么去掉超链接默认的下划线？

text-decoration: none;

 

鼠标样式：

属性：cursor

常用的属性值：default（默认）、pointer（常用）、text、crosshair、wait、help

 

背景样式

包含背景颜色、背景图片。

 

背景颜色：

属性：background-color

属性值：颜色关键字、rgb数值、#十六进制数值

注意：color用于定义文字颜色，background-color用于定义背景颜色。

 

背景图片：

常见属性：

background-image：背景图片地址

background-repeat：背景图片重复，水平/垂直

background-position：背景图片位置，常用于精灵图，制作动画

background-attachment：背景图片固定

 

background-position：

属性值：像素值、关键字

注意：要同时设置水平和垂直方向，否则不起效果。

关键字：top / bottom、left/right、center的两两组合共8个，再加上(center, center)即9个。

 

浮动布局

什么是文档流？

表现为元素在页面中出现的先后顺序。

文档流分为正常文档流、脱离文档流。

 

什么是正常文档流？

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

 

什么是脱离文档流？

脱离了正常文档流的文档流就是脱离文档流。

 

怎么算脱离？

使用了Float属性。

 

Float

CSS布局的最佳利器之一，可以通过浮动来快速灵活地定位页面元素，以达到布局网页的目的。属性值有left和right两个。

 

注意：

如果给块元素设置浮动，那么宽度不再是独占一行了，而是脱离于文档流，“漂浮”在文档之上，所以也称为浮动。

宽度由内容撑开。

 

作用：

常用于实现水平方向上的并排布局，两列布局、三列布局、多列布局。

 

清除浮动：

属性：clear

属性值：left、right、both（常用）

 

作用：

清除兄弟元素浮动后带来的布局影响。

 

使用：

我们一般都是在浮动元素后面再增加一个空元素，然后设置clear: both来清除浮动。

 

其他方法：

overflow：hidden

伪元素

 

定位布局

浮动布局虽然灵活，但是不易控制。

而定位布局最大的优势就是精准定位。

 

属性：

position。

 

四种方式：

固定定位：fixed

相对定位：relative

绝对定位：absolute

静态定位：static（默认）

 

这四种方式刚好就是position的属性值。

 

子绝父相

在常见的布局中，如果子盒子采用了绝对定位，那么父盒子就要采用绝对定位，这样才不会产生布局问题，相关内容请查看站内其他文章。

 

固定定位：

含义：元素被固定不会随着滚动条的拖动而改变位置。

场景：回到顶部按钮

参考对象：浏览器的四条边

使用：四个属性（top/bottom、left/right），下同

 

相对定位：

含义：元素位置相对于元素原始位置计算而来的

参考对象：元素的原始位置

使用：同上

 

绝对定位：

含义：精确定位

参考对象：浏览器的四条边

使用：同上

注意：变成绝对定位之后，元素完全脱离文档，附近元素会认为该元素不存在，从而产生了层级（z-index）问题。

 

总结

在本文中，并没有给出太多CSS属性，去掉了一些不常见的CSS属性。

当然啦，还有很多高级属性都是跟动画相关的，这需要更多时间去学习。

如果仅靠5千不到的文字就能把CSS叙说完，这行业也不会这么卷。

但是这部分的知识，已经足够大部分人去完成一个不错的页面了，或者是应对考试。

 

精读一本书，胜过看N个视频。

因为视频很多都是讲实操的，但是书本有个完整清晰的脉络，你能够掌握更多基础知识。

 

就这样吧，咱们下期再见！