CSS知识点总结

目录

一 引入CSS样式表方式

二 选择器

三 标签显示模式(display)

四 CSS背景设置

五 CSS三大特性

六 盒子模型(Box Model)

补充：sublime快捷操作emmet语法

补充: 有时候设置了文本居中后，界面效果依然没有显示居中，是什么原因呢？

---

一 引入CSS样式表方式

• 行内式(内联样式)

是指在标签中，通过style属性来设置元素的样式，使用方法如下所示：

<标签名 style="属性1：属性值1；属性2：属性值2；属性3：属性值3；">内容

注意：属性与属性值之间是:，多组属性值之间用;隔开

• 内部样式表(内嵌样式表)

指的是将CSS代码集中写在HTML文档的某个位置，如head头部标签中，并且用style表标注这段代码是css样式，如

• 外部样式表(外链式)

该引入方式是指将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将该外部样式表文件链接到HTML文档中。该CSS样式文件可同时被多个页面所引用。

语法如下：

注意：

• link是个单标签，并且link标签需要放在head头部标签中，并且要指定link标签的三个属性

属性	作用
rel	定义当前文档与被链接文档之间的关系，需要指定是一个"stylesheet"，表明被链接的文档是一个样式表文件
type	定义所链接文档的类型，如"text/CSS"，一般可以省略
href	定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径

• 三种CSS样式表总结

样式表	优点	缺点	使用情况	使用范围
行内式	书写方便，权重高	没有实现样式和结构相分离	较少	只能控制写了style的对应标签
内部样式表	部分结构和样式相分离	没有彻底分离，仍然在一个html中	较多	控制当前页面
外部样式表	将样式与结构完全分离	需要用link引入	最多，推荐使用	控制整个站点(多)

---

二 选择器

前面提了一下选择器，选择器是很重要的知识点哦~，选择器说白了就是用于选择要设置的对象，并将该对象的某些属性进行设置，语法如下：

选择器 {
  属性1： 属性值1；
  属性2： 属性值2；
  属性3： 属性值3；
  ....
}

从语法上可以看出：

• 选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
• 属性和属性值以"键值对"形式存在
• 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
• 属性和属性值之间用:连接，多个"键值对"之间用;进行区别

选择器的分类

选择器分为基础选择器和复合(组合)选择器；

基础选择器又分为标签选择器、类选择器、id选择器、通配符选择器

• 标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式，语法如下：

标签名 {
    属性1：属性值1; 
    属性2：属性值2; 
    属性3: 属性值3;
    ...
}

标签选择器可以将某一类标签全部选择出来，比如所有的div标签和所有的span标签，即能快速的为页面中同类型的标签统一样式，但是也因为这样，该方式不能设计差异化样式。

• 类选择器

类选择器使用"."进行标识，后面紧跟类名。当然，要在需要使用该类的标签上注明class= "类名"，语法如下：

.类名 {
    属性1：属性值1;
    属性2: 属性值2;
    ....
}

示例：

.font {
    color: red;
    font-size: 18px;
}

并在标签中引用该类；

这是一个段落，字体颜色为红色，字号为18px 

当然，标签中可以引用多个类名，类名之间用空格隔开，如：

.font {
    font-size: 18px;
    color: red;
}
.container {
    padding-left: 15px;
    padding-right: 15px;
    margin: auto;
}

这是一段文字，同时引入了两个类font和container

• id选择器

id 选择器使用#进行标识，后面紧跟id名，语法如下：

#id名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

同类选择器一样，也要在标签中引用该id选择器，用法跟类选择器一样

<标签名 id="id名">内容

他与类选择器同样可以用来差异化选中标签，但是与类选择器不同的是，id选择器只能使用一次，就像身份证号码一样，是唯一的，一般用于页面唯一性的元素身上。即同一个页面，不能允许有相同名字的id对象出现，但是可以允许有相同名字的class出现。

• 通配符选择器

通配符选择器用*表示，*指的是选择所有的标签，能匹配到页面中所有的元素，其语法如下：

* {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ...
}

有一个特别注意的地方，在浏览器中，一般默认会将margin(外边距)和padding(内边距)设置为8px，这样写出的页面，外边区域总是有一些不能被利用，因此基本上在每个页面的css格式上都要加上如下语句，用于消除元素默认的内外边距：

* {
    padding: 0px; 
    margin: 0px;
}

• 四类基础选择器总结

选择器	作用	缺点	使用情况	用法举例
标签选择器	选出相同的标签对象	不能差异化选择	较多	p {color: red;}
类选择器	可以选出一个或多个标签	可根据需求选择	非常多，推荐使用	.nav {color: red;}
id选择器	一次只能选择一个标签	一个页面中只能使用一次同id的id选择器	较少	#nav { color: red; }
通配符选择器	选择所有的标签	一般用在 * {margin: 0 px; padding: 0 px;}

复合(组合)选择器

复合选择器是为了可以选择更准确更精细的目标元素标签，由两个或多个基础选择器通过不同的方式组合而成的，又分为后代选择器、子元素选择器、交集选择器、并集选择器四类

• 后代选择器

又称包含选择器，用于选择对象或对象的子孙后代，语法如下：

父级 子级 孙级 重孙级 ... {
    属性1: 属性值1;
    属性2: 属性值2;
    属性3: 属性值3;
    ...
}

即将外层标签写在前面，内层标签写在后面，中间用空格分隔，如：

.class h3 {  /*h3是class的子级*/
    color: red;
    font-size: 16px;
}

• 子元素选择器

子元素选择器只能选择作为某元素的子元素(亲儿子)的元素，语法如下：

父级>子级 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

即将父级标签与子级标签用>连接，如：

.class>h3 {
    color: red;
    font-size: 14px;
}

• 交集选择器

交集选择器由两个选择器构成，被交集选择器选择的标签既要满足标签一的特点，也要满足标签二的特点。语法如下：

选择器1.选择器2 {
    属性1: 属性值1;
    属性2: 属性值2;
    ....
}

两个选择器之间用.连接

• 并集选择器

并集选择器是各个选择器通过，连接而成，通常用于集体声明。语法如下：

选择器1，选择器2，选择器3 {
    属性1：属性值1;
    属性2: 属性值2;
    ...
}

任何形式的选择器(如标签选择器、类选择器、id选择器)，都可以作为以上几个选择器的一部分

• 链接伪类选择器

伪类选择器用冒号表示:，用于像某些选择器添加特殊的效果，如给链接添加特殊效果，伪类选择器包含链接伪类以及结构伪类等。主要学习链接伪类选择器

a:link  /*未访问的链接*/
a:visited  /*已访问的链接*/
a:hover  /*鼠标移动到链接上*/
a:active  /*选定的链接*/

一般是先声明选择器，再声明对应的链接伪类选择器，如：

a { /* a 是标签选择器 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
}
a:hover {
    color: red /* 指在鼠标经过的时候，由灰色变成红色*/
}

• 复合选择器总结

选择器	作用	特征	使用频率	用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	用空格隔开
子代选择器	选择最近一级元素	只选亲儿子	较少	用>连接
交集选择器	选择两个标签交集的部分	既是又是	较少	用.(点)连接
并集选择器	选择某些相同样式的选择器	可用于集体声明	较多	用,(逗号)连接
链接伪类选择器	给链接更改状态		较多	用:(冒号)连接

---

三 标签显示模式(display)

标签显示模式是指标签以什么方式进行显示，如div标签自己独占一行，而span标签一行可以放多个；它分为块标签和行内标签及行内块元素两种类型，也称块元素和行内元素、行内块元素。

• 块级元素(block)

常见的块级元素有

~

、

、

、
、
1. 等，特点如下：

   一个标签独占一行；高度(hight)、宽度(width)、外边距(magin)与内边距(padding)都可以被控制；

   宽度默认是容器(父级宽度)的100%(即若不指定子级的宽度，默认继承父级宽度)；

   是一个容器及盒子，里面可以放行内或者块级元素。

   特别要注意的是：

   只有文字才能组成段落，因此p里面不能放块级元素，特别是p不能放div，同理h1~h6也是文字类块级标签，里面也不能放其它块级元素。

   • 行内元素(inline)

   常见的行内元素有、、、、、、、、、等，特点如下：

   相邻行内元素在一行上，即一行可以显示多个行内元素；

   对高和宽的设置是无效的；

   默认宽度是它本身内容的宽度；

   行内元素只能容纳文本或者其它行内元素；但链接里面一般不再放链接；

   行内元素的纵向padding和margin都是不考虑的，这是css规范定义的。 inline元素确实可以设置垂直方向的 padding 和 margin 值，但是 inline 元素的 margin 和 padding 的垂直方向上不产生边距效果，即不影响布局。

   • 行内块元素(inline-block)

   一些特殊的标签，如、、，可以对它们设置宽高和对齐属性，其特点如下：

   和相邻行内元素(行内块)在一行上，但是之间会有空白空隙，一行可以显示多个

   默认宽高是其本身内容的宽度；

   可以控制高度、宽度、内外边距；

   • 三种显示模式的总结

   元素模式	元素排列	设置样式	默认宽度	包含
   块级元素	一行只能放一个块级元素	可设置宽度高度	容器的百分百	容器级可以包含任何标签
   行内元素	一行可放多个行内元素	不可以直接设置宽度高度	它本身内容的宽度	容纳文本或其它行内元素
   行内块元素	一行可放多个行内块元素	可设置宽度和高度	它本身内容的宽度

   • 标签显示模式的转换(利用display属性)

   display: inline; /* 转行内 */
   display: block; /* 转块内 */
   display: inline-block; /* 转行内块 */

   ---

   四 CSS背景设置

   通过设置css背景属性，给页面元素添加背景样式，同时还能设置不同的背景图片、背景图片位置、背景颜色等。

   • 背景颜色

   background-color: 颜色值  /*默认背景颜色值是透明色，即transparent*/

   • 背景图片(image)

   background-image: url(url) /*括号中的url要填入真实的图片位置，默认值为none*/

   • 背景平铺

   background-repeat: repeat /*no-repeat不平铺 repeat-x 在x轴上平铺 repeat-y 在y轴上平铺 默认为repeat横纵轴皆平铺*/

   • 背景附着

   背景附着即规定背景是滚动的还是固定的，scroll即是滚动，fixed即是固定的

   background-attachment: scroll /*或是fixed*/

   • 背景透明度

   即调节背景的透明度，最后一个参数alpha取值范围为0-1

   background: rgba(0,0,0,0.3) /*前三个是背景rgb*/

   • 背景位置

   background-position: length /*参数值可以选择length或者position*/

   若参数为length，则数值应为百分数，或者由浮点数字和单位标识符组成的长度值，若只指定了一个数值，则该数值用于x坐标，另一个默认居中；若指定了两个值，则两个值前后顺序无关

   若参数为position，则数值应为方位名词(top center bottom left center right)，若指定了一个方位名称，则默认该数值用于x坐标，另一个值默认居中，为50%

   注意：使用该属性时，一定要确保指定了background-image属性。

   ---

   五 CSS三大特性

   CSS具有三个特性，分别为层叠性、继承性、优先性

   • 层叠性

   层叠性是指多种css样式的叠加，即前面一个属性已经被某个选择器设置，后面又有一个地方被同一个选择器设置同一个属性，则这个时候就会将前一个定义的属性覆盖掉。

   • 继承性

   子标签会继承父标签的某些样式，如文本颜色和字体大小(text-,font-,line-)等。

   • 优先级

   定义CSS样式时，经常出现两个或更多规则应用在同一个元素上，如：

   选择器相同，则按照层叠性原则执行；若选择器不同，则按照优先级原则执行。此时涉及到权重计算。

   选择器	权重计算(specificity)
   继承、*	0,0,0,0
   标签选择器	0,0,0,1
   类选择器，伪类选择器	0,0,1,0
   ID选择器	0,1,0,0
   行内样式，即style=" "	1,0,0,0
   属性值后面加上!imporant	最大

   specificity设置为四位，从左到右，一级大于一级，并且数值之间无进位，级别之间不可跨越。

   当计算组合选择器的时候，就会涉及到对应基础选择器的权重叠加问题，每位分别相加即可。如：

   后代选择器div ul li       权重为0,0,0,3

   后代选择器.nav ul li     权重为0,0,1,2

   一定要注意的点：

   继承的权重为0！！！所以在修改样式的时候，一定要先看该标签有没有被选中，若选中了才能用权利计算，否则，就算加上!important也不是按该选择器对应的属性设置！

   ---

   六 盒子模型(Box Model)

   重中之重！！！

   网页布局其实就是利用css设置好盒子的大小，然后摆放盒子的位置，在盒子里面放入文字、图片等元素。盒子很重要！

   

    如上图所示，盒子模型包含四个结构，中间蓝色区域为盒子里的内容(content)、在外层绿色部分为内边距(padding)，它表示内容与边框的距离，黄色与绿色之间的虚线为边框(border)，最外面的黄色部分表示外边距(margin)，它表示该盒子与相邻盒子之间的距离。

   • 盒子边框(border)

   可分别对边框粗细(border-width)、边框样式(border-style)与边框颜色(border-color)分别进行设置；

   边框样式(border-style)：有none、solid(实线)、dashed(虚线)、dotted(点线)

   亦可对4个边框(上下左右)分别进行设置：

   上边框	下边框	左边框	右边框
   border-top-style: 样式 border-top-width: 粗细 border-top-color: 颜色 border-top: 宽度 样式 颜色	border-bottom-style: 样式 border-bottom-width: 粗细 border-bottom-color: 颜色 border-bottom: 宽度 样式 颜色	border-left-style: 样式 border-left-width: 粗细 border-left-color: 颜色 border-left: 宽度 样式 颜色	border-right-style: 样式 border-right-width: 粗细 border-right-color: 颜色 border-right: 宽度 样式 颜色

   补充：边框与边框之间可能会发生重叠，导致边框变粗，此时可通过设置collapse(合并)将相邻边框合并在一起。

   border-collapse:collapse

   • 内边距(padding)

   可分别对盒子的四个位置(左、右、上、下)分别指定对应的padding值。

   属性	作用
   padding-left	左内边距
   padding-right	右内边距
   padding-top	上内边距
   padding-bottom	下内边距

    注意：当设置了padding值之后，可以发现盒子会变大(但若这个盒子事先并未设置宽度和高度，则不会变大)，所以在设置padding之前，要将内容的大小事先预留对(盒子大小-padding)

   当然，也可以合在一起写，当设置为一个值时，则表示上下左右的padding皆是这个值；若设置为两个值时，则分别表示上下padding值、左右padding值；若设置为三个值，则分别表示上内边距，左右内边距、下内边距；若设置了四个值，则从上padding开始顺时针设置(即上、右、下、左padding值)。

   • 外边距(margin)

    外边距表示盒子与另一个盒子之间的距离，用法与padding相同。

   同理，外边距也会像边框一样发生合并现象，又可分为相邻块元素垂直外边距的合并与嵌套块元素垂直外边距的合并(合并只发生在垂直方向)

   相邻块元素垂直外边距的合并

   该现象发生在上下相邻块元素之间，即上面元素设置了下外边距(margin-bottom),下面元素设置里上外边距(margin-top)，则就会出现取该二者之间最大值进行合并的现象(外边距塌陷)；

   遇到这种情况，应该要避免同时给两个盒子设置margin值。

   嵌套块元素垂直外边距的合并

    对于两个嵌套关系的块元素，若父元素没有上内边距与边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为二者中的最大者。如下图所示：

   

    解决方法：给父元素设置上内边距或上边框，或为父元素添加overflow:hidden。

   • 块级盒子水平居中

   如何将块级盒子设置水平居中，必须满足两个条件：

   1、盒子必须指定了宽度(width)

   2、将左右的外边距都设置为auto，方式可为如下：

   margin-left: auto ; margin-right: auto; /*左右分别设置*/
   margin: auto; /*一起设置*/
   margin: 0 auto; /*两种不同方式进行左右分别设置*/

   补充：sublime快捷操作emmet语法

   1. 生成标签 直接输入标签名 按tab键即可
   2. 若想写多个相同标签，使用标签名*标签个数即可，如p*3即可生成3个p标签
   3. 若有父子级关系的标签，可使用>，如ul>li ,若ul下有多个li，则ul>li*个数即可
   4. 若有兄弟级的标签，用+即可，如div+p
   5. 若生成带类名的标签，直接使用.类名按tab键即可，同理若生成带id名字的标签，则直接#id名 按tab键即可
   6. 若使生成的div类名有顺序，则使用自增符号$即可，如

   .demo$*3
   
   
   

   补充: 有时候设置了文本居中后，界面效果依然没有显示居中，是什么原因呢？

   将行高设置等于盒子高度，即可实现当行文本垂直居中对齐，因为行高=上距离+内容高度+下距离，设置的和盒子不一样大时，就会出现偏上或偏下的效果。