CSS基础 ｜ 青训营

WhiteNight
142 阅读8分钟

CSS基础

什么是CSS

  • 概念：CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
  • 作用：
  1. 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
  2. CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表

书写位置

要书写css样式，那css样式书写的位置在哪呢？

行内式（内联样式）

  • 概念：行内式称行内样式、行间样式.行内式是通过标签的style属性来设置元素的样式
  • 其基本语法格式如下：
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

实际上任何HTML标签都拥有style属性，用来设置行内式。

  • 案例：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>

  • 注意：

    • style其实就是标签的属性
    • 样式属性和值中间是:
    • 多组属性值之间用;隔开。

  • 缺点：

    • 没有实现样式和结构相分离
    • 只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余

内部样式表（内嵌样式表）

  • 概念：内部样式表称内嵌式，是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
  • 其基本语法格式如下：
<head>
  ...
	<style type="text/CSS">
    选择器（选择的标签） { 
      属性1: 属性值1;
      属性2: 属性值2; 
      属性3: 属性值3;
    }
	</style>
</head>

  • 注意：

    • style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
    • 只能控制当前的页面

  • 缺点：没有彻底分离

外部样式表（外链式）

  • 概念：外部样式表称链入式，是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中
  • 其基本语法格式如下：
<head>
  ...
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

  • 注意：

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

三种样式表总结（位置）

样式表优点缺点使用情况控制范围
行内样式表书写方便，权重高没有实现样式和结构相分离较少控制一个标签（少）
内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面（中）
外部样式表完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点（多）

选择器

标签选择器

  • 概念：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
  • 语法：

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

  • 作用：标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
  • 优点：是能快速为页面中同类型的标签统一样式
  • 缺点：不能设计差异化样式。

思考： 如果想要差异化选择不同的标签，怎么办呢？ 就是说 我想单独选一个或者某几个标签呢？

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名.

  • 语法：

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

  • 优点：

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

  • 注意

    • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
    • 长名称或词组可以使用中横线来为选择器命名。
    • 不要纯数字、中文等命名， 尽量使用英文字母来表示。
<head>
        <meta charset="utf-8">
        <style>
        .blue {
            color: blue;
            font-size: 100px;
        }
        .red {
            color: red;
            font-size: 100px;
        }
        .orange {
            color: orange;
            font-size: 100px;
        }
        .green {
            color: green;
            font-size: 100px;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

类选择器特殊用法- 多类名

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

  • 各个类名中间用空格隔开。
  • 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。
<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

id选择器

id选择器使用#进行标识，后面紧跟id名

  • 其基本语法格式如下：

    • id选择器

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

  • 标签
<p id="id名"></p>
  • 元素的id值是唯一的，只能对应于文档中某一个具体的元素。
  • 用法基本和类选择器相同。

盒模型

网页布局的本质

  • 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
  • 最后把网页元素比如文字图片等等，放入盒子里面。
  • 以上两步 就是网页布局的本质

盒子模型（Box Model）

  • 所谓盒子模型：

    • 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
    • 盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
    • 盒子里面的文字和图片等元素是内容区域
    • 盒子的厚度 我们称为 盒子的边框
    • 盒子内容与边框的距离是内边距

一些css属性

width、height：最基本

font字体样式: font-size、font-family.......

p {
    font-size:20px;
    font-family:"微软雅黑";
		font-weight: 700;
}

border、padding、margin

background: 设置背景颜色，图片

css属性继承（演示）

浮动

为什么需要浮动？

我们首先要思考以下2个布局中最常见的问题？

  1. 如何让多个盒子(div)水平排列成一行？
  2. 如何实现盒子的左右对齐？

虽然我们前面学过行内块（inline-block） 但是他却有自己的缺陷：

  1. 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。
  2. 它不能实现以上第二个问题，盒子左右对齐

一句话总结他们

因为一些网页布局要求，标准流不能满足我们的需要了，因此我们需要浮动来完成网页布局。

什么是浮动(float)

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

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

在 CSS 中，通过 float 属性定义浮动，语法如下：

选择器 { float: 属性值; }

属性值描述
none元素不浮动（默认值）
left元素向左浮动
right元素向右浮动

通过 float ----- 浮 漏 特

浮动——浮浮浮~~~漂浮在普通流的上面。 脱离标准流。 俗称 “脱标”

浮动——漏漏漏~ 浮动的盒子，把自己原来的位置漏给下面标准流的盒子，就是不占有原来位置，是脱离标准流的，我们俗称 “脱标”。

浮动——特性 float属性会改变元素display属性。

任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 生成的块级框和我们前面的行内块极其相似。

定位

相对定位(relative) - 重要

  • 相对定位是元素相对于它 原来在标准流中的位置 来说的。（自恋型）就算是相对上一个同级元素

相对定位的特点：（务必记住）

  • 相对于 自己原来在标准流中位置来移动的
  • 原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位(absolute) - 重要

绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）

  1. 完全脱标 —— 完全不占位置；
  2. 父元素没有定位，则以浏览器为准定位（Document 文档）。
  3. 父元素要有定位
  • 将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

绝对定位的特点：

  • 绝对定位是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置
  • 不保留原来的位置，完全是脱标的。

因为绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用。

子绝父相 —— 子级是绝对定位，父级要用相对定位。

居中那些事

水平居中

margin： 0 auto;

text-align: center

垂直居中

利用行高line-height设置为父元素高度来进行单行文字的垂直居中

一些去除默认样式的方法

去除a标签的下划线

a {
    text-decoration: none;
}

去除ul列表的 · 以及ol列表的序号

li {
    list-style: none;
}

去除默认的margin和padding

* {
    margin: 0;
    padding: 0;
}
avatar
文章
阅读
粉丝