乐趣区

CSS基础知识总结

一个人至少拥有一个梦想, 有一个理由去坚强。

总结了 CSS 相关的知识点,????‍不对的地方还请告诉我哦

1、引入 CSS 样式表(书写位置)

1.1 行内式(内联样式)
  • 其基本语法格式如下:
< 标签名 style="属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;"> 内容 </ 标签名 >
  • 如下???? 所示:
<div style="color: red; font-size: 12px;"> 青春不常在,抓紧谈恋爱 </div>
  • 注意:

    • style 其实就是标签的属性
    • 样式属性和值中间是:
    • 多组属性值之间用 ; 隔开。
    • 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
  • 缺点:

    • 没有实现样式和结构相分离
1.2 内部样式表(内嵌样式表)
  • 其基本语法格式如下:
<head>
<style type="text/CSS">
    选择器(选择的标签){ 
      属性 1: 属性值 1;
      属性 2: 属性值 2; 
      属性 3: 属性值 3;
    }
</style>
</head>
<style>
     div {
         color: red;
         font-size: 12px;
     }
</style>
  • 注意:

    • style 标签一般位于 head 标签中,当然理论上他可以放在 HTML 文档的任何地方。
    • type=”text/css” 在 html5 中可以省略。
    • 只能控制当前的页面
1.3 外部样式表(外链式)
  • 其基本语法格式如下:
<head>
  <link rel="stylesheet" type="text/css" href="css 文件路径">
</head>
  • 注意:

    • link 是个单标签
    • link 标签需要放在 head 头部标签中,并且指定 link 标签的三个属性
属性 作用
rel 定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
type 定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为 CSS 样式表。我们都可以省略
href 定义所链接外部样式表文件的 URL,可以是相对路径,也可以是绝对路径。

CSS 选择器分为基础选择器和复合选择器:

2、基础 CSS 选择器

2.1 标签选择器:

标签选择器 可以把某一类标签 全部 选择出来 比如所有的 div 标签 和 所有的 span 标签,但是缺点是不能差异化设置样式。

2.2 类选择器:

可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

  • 语法:

    • 类名选择器
    . 类名  {   
        属性 1: 属性值 1; 
        属性 2: 属性值 2; 
        属性 3: 属性值 3;     
    }
    • 标签
    <p class='类名'></p>
  • 注意

    • 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要纯数字、中文等命名,尽量使用英文字母来表示。
2.3 id 选择器:

元素的 id 值是唯一的,只能对应于文档中某一个具体的元素。

  • 用法基本和类选择器相同。
  • 其基本语法格式如下:

    • id 选择器

      #id 名 {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;}
    • 标签

      <p id="id 名"></p>
2.4 通配符选择器:

通配符选择器用 * 号表示,* 就是 选择所有的标签 他是所有选择器中作用范围最广的,能匹配页面中所有的元素。

  • 其基本语法格式如下:
* {属性 1: 属性值 1; 属性 2: 属性值 2; 属性 3: 属性值 3;}

例如下面的代码,使用通配符选择器定义 CSS 样式,清除所有 HTML 标记的默认边距,一般设置在 CSS 文件的开头,但是现在也有使用 body,都可以的????

* {
  margin: 0;                    /* 定义外边距 */
  padding: 0;                   /* 定义内边距 */
}

3、复合 CSS 选择器

3.1 后代选择器

作用:选择元素或元素组的子孙,写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,如下???? 所示(可以选择 class 后面的所有 h3 标签):

3.2 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。
注意哦,这里的子元素,简单的说就是亲儿子????,不包括孙子、重孙子之类的哈

3.3 属性选择器

选择带有特殊属性的标签的选择器
例:

<div>
      <input type="text" name=""id="" value="" />
</div>
div [type="text"]{background-color: chartreuse;}

如???? 所示:此时我们选择的是 div 下面的 type 属性等于 text 的内容,所以 input 框会改变颜色。

3.4 交集选择器

交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为 class 选择器,两个选择器之间不能有空格,如 div.p。

例:

<div class="int">
    <span> 交集选择器 </span>
</div>
div.int{background-color: #00FFFF;}

如???? 所示:此时我们选择的是 div 下面的类名称为 int 的元素,会改变元素的背景颜色。(一般实际中很少使用)

3.5 并集选择器

并集选择器(CSS 选择器分组)是各个选择器通过逗号连接而成的,任何形式的选择器(包括标签选择器、class 类选择器 id 选择器等),都可以作为并集选择器的一部分。

例:.one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。

3.6 链接伪类选择器

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择 第 1 个,第 n 个元素。

因为伪类选择器很多,比如链接伪类,结构伪类等等。链接伪类选择器如下????:

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

实际工作开发中,我们很少写全四个状态,一般我们写法如下:

a {   /* a 是标签选择器  所有的链接 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*  鼠标经过的时候,由原来的 灰色 变成了红色 */
}

4、块级元素

常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等,其中 <div> 标签是最典型的块元素。
  • 块级元素的特点

(1)比较霸道,自己独占一行????

(2)高度,宽度、外边距以及内边距都可以控制。

(3)宽度默认是容器(父级宽度)的 100%

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

  • 注意:

    • 只有文字才能组成段落,因此 p 里面不能放块级元素,特别是 p 不能放 div
    • 同理还有这些标签 h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。

5、行内元素

常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等,其中 <span> 标签最典型的行内元素。有的地方也成内联元素
  • 行内元素的特点:

(1)相邻行内元素在一行上,一行可以显示多个。

(2)高、宽直接设置是无效的。

(3)默认宽度就是它本身内容的宽度。

(4)行内元素只能容纳文本或则其他行内元素。

  • 链接里面不能再放链接。
  • 特殊情况 a 里面可以放块级元素,但是给 a 转换一下块级模式最安全。

6、行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>,可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素。
  • 行内块元素的特点:

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

    (2)默认宽度就是它本身内容的宽度。

    (3)高度,行高、外边距以及内边距都可以控制。

7、标签显示模式转换 display

块转行内:display:inline;

行内转块:display:block;

块、行内元素转换为行内块:display: inline-block; < a > 元素一般利用 display 转换成 display:inline-block

8、css 背景

background-color: transparent; 设置背景为透明色。

引入图片:background-image: url(../img/index.png);url 后不加引号。

9、css 背景位置定位

background-position: x 坐标 y 坐标;

一般超大背景的图片采用的是水平居中对齐,纵向不用对齐。如???? 代码所示:

body{background-image: url(../img/sms.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    }

小图标在盒子内的定位:


实现的效果图:这里最重要的一句图标定位代码 background-position: 10px center;x 轴上距离为 10px,y 轴垂直居中

10、背景附着

背景附着就是解释背景是滚动的还是固定的, 默认是滚动的

background-attachment : scroll | fixed

参数 作用
scroll 背景图像是随对象内容滚动
fixed 背景图像固定

11、背景简写

background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll center top ;

12、背景半透明

alpha 是透明度参数,取值范围在 0 - 1 之间

在工作中适用范围较广,需要牢记的

<div class="alpha"></div>
.alpha{
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.2);
    }

13、CSS 三大特性

层叠性

< div> 长江后浪推前浪,前浪死在沙滩上 < /div>

给以上文字设置两个 color 样式:此时显示出来的属性是 black 颜色属性,pink 会被覆盖掉。

继承性

继承性即子承父业,子标签会继承父标签的样式

<div>
    <p>CSS 继承性 </p>
</div>
div{color: pink;}

如???? 所示,我们并未设置 div 下的 p 的样式,仅设置了父级标签 div 的颜色为 pink,此时 p 继承父级元素 div 的样式,颜色也会表现为 pink

优先级 重点
标签选择器 计算权重公式
继承或者 * 0,0,0,0
每个元素(标签选择器) 0,0,0,1
每个类,伪类 0,0,1,0
每个 ID 0,1,0,0
每个行内样式 style=”” 1,0,0,0
每个!important 重要的 ∞ 无穷大

权重计算示例:

  • div ul li ——> 0,0,0,3
  • .nav ul li ——> 0,0,1,2
  • a:hover —–—> 0,0,1,1
  • .nav a ——> 0,0,1,1

这里需要注意的一点是:继承的权重是 0

修改样式,一定要看该标签有没有被选中hin 重要

1)如果选中了,那么以上面的公式来计权重。谁大听谁的。

2)如果没有选中,那么权重是 0,因为继承的权重为 0.

这一点看似简单,很容易绕晕哈,我们看下面这个例子:????

此时我们需要判断的是 p 元素的内容是什么样式,p 会继承父级元素的样式,但是继承的权重是 0,标签的权重是 1,另外由于 p 标签并未被选择,所以会表现出标签的样式。

如果 p 标签被选中了,则 id+ 标签选择器的权重为:0101,大于 p 标签的权重:0001,所以会显示为 pink 样式

下面有一套综合题,可以检验一下是否掌握了这个知识点哈


如???? 所示,文字会展现什么颜色呢
css 的权重依次为:0021,0101,0101,那就排除了蓝色,

第二个和第三个权重一样的情况下,我们会采取就近原则,pink 离的更近一些,则上图样式会表现为 pink,如果调换 yellow 和 pink 的 css 样式位置,则表现为 yellow。

还有一道特别容易混淆的题哦,


很多时候,我们看到有个!important 会自然的觉得权重最高,所以上述文字会显示绿色,但是是不对的哈,

第一步我们需要看文字是否被选中,如果未被选中则是继承,继承的权重是 0,我们可以看到前三个均选中了文字的,但是最后一个未选中,所以排除绿色 green,前三项的权重分别为:0200,0111,0022,所以颜色应该为蓝色。很重要的一点,不能混淆

14、盒子模型(CSS 重点)

盒子模型由元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。

内盒尺寸计算:

  • 宽度

    Element Height = content height + padding + border(Height 为内容高度)

  • 高度

    Element Width = content width + padding + border(Width 为内容宽度)

  • 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

下面我们我们通过这个题来计算一下盒子实际的宽度和高度,加油呀????

div {

    width: 200px;

        height: 200px;

    border: 1px solid #000000;

    border-top: 5px solid blue;

    padding: 50px;

    padding-left: 100px;

     }

小伙伴们有结果了吗,我们来分析一下哦,

实际宽度 = width(200px)+ border(2px)+ padding(50px)+padding-left(100px)= 352px。

实际高度 = height(200px)+ border(1px)+ border-top(5px)+ padding(100px)= 306px。

肯定有小伙伴会疑惑????,为什么宽度里面算的内边距是 150 呢,这里有一个坑哈,因为单独设置了左内边距为 100px,所以宽度里面内边距是 150px,同理计算高度的时候,边框是一样的为 6px。

15、块级盒子水平居中

可以让一个块级盒子实现水平居中:

  • 盒子必须指定了宽度(width)
  • 给左右的外边距都设置为 auto

实际工作中常用这种方式进行网页布局,示例代码如下:

.header{ 
       width:960px; 
       margin:0 auto;
}

常见的写法,以下三种都可以。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

16、CSS 布局的三种机制

普通流

块级元素会独占一行,从上向下 顺序排列;

 - 常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序,从左到右 顺序排列,碰到父元素边缘则自动换行;

 - 常用元素:span、a、i、em 等
浮动

浮动最主要的价值是可以让多个块级元素在同一行内展示出来。

元素的浮动是指设置了浮动属性的元素会

  1. 脱离标准普通流的控制
  2. 移动到指定位置。

选择器 {float: 属性值;}

属性值 描述
none 元素不浮动(默认值
left 元素向 浮动
right 元素向 浮动

我们使用浮动的核心目的——让多个块级盒子在同一行显示。这个也是我们最常见的一种布局方式

一个完整的网页,是 标准流 + 浮动 + 定位 一起完成的。

浮动只会影响当前的或者是后面的标准流盒子,不会影响前面的标准流,每个标准流单独占一行。

如果一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动,避免引起其他的问题哈。

下面我们来看以下???? 几种情况:

以下所说的 div 结构均为此:

<div>
     <div class="a"></div>
     <div class="b"></div>
</div>

当 a 盒子浮动,b 盒子也浮动的时候,a、b 两盒子会显示在同一行。
当 a 盒子不浮动,b 盒子浮动的时候,a 盒子即是标准的文档流,是很霸道的哈,他会单独占据一行,所以 b 盒子会依照 a 盒子为参考,b 盒子浮动。

清除浮动

我们为什么要清除浮动呢 ❓

父级盒子很多情况下,不方便给高度 ,但是子盒子浮动就不占有位置, 注意哦,浮动的盒子不占位置。最后父级盒子高度为 0,就影响了下面的标准流盒子,下面的标准流盒子会覆盖原本想展示的内容。

  • 总结:

    • 由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响
    • 准确地说,并不是清除浮动,而是 清除浮动后造成的影响。

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。

清除浮动的方法

如下图所示,若父元素 nav 盒子没有设置高度,子元素均设置浮动,则会导致子元素浮动在正常文档流之外,父元素的高度为:0,影响之后正常的文档流,所以此时我们会清除浮动。

以下???? 所示的四种清除浮动的方式,均以此案例为参照


1. 额外标签法(隔墙法)

注意此处说的浮动元素是指浮动的最后一个元素哈

W3C 推荐的做法是通过在浮动元素末尾添加一个空的标签例如 < div style=”clear:both”>< /div>。


2. 父级添加 overflow 属性方法

可以给父级添加:overflow 为 hidden| auto| scroll 都可以实现。

一般我们会在父级元素样式后加:overflow:hidden。

缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

3. 使用 after 伪元素清除浮动

此方式虽然代码多一点,但是不会改变 html 的结构

:after 相当于在结构后用 css 添加了一个新的标签。

/* 声明清除浮动的样式 */
.clearfix:after{
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix{*zoom:1; /* ie6,7 专门清除浮动的样式 */}


4. 使用双伪元素清除浮动
跟第三种方式差不多哈,在盒子的前后插入一个盒子

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {clear:both;}
.clearfix {*zoom:1;}
需要清除浮动的场景:

清除浮动说了这么多,那我们时候什么需要清除浮动呢????,以下是需要清除浮动的场景

  1. 父级元素没有高度
  2. 子元素盒子有浮动
  3. 影响下面元素的布局
退出移动版