CSS基础知识

2,193 阅读16分钟

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

总结了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. 影响下面元素的布局

根据以上的知识综合写出了博客首页,地址👉博客首页实现