前端-CSS 入门

1 CSS 简介

  • CSS（casdading style sheet 层叠级联样式表）

  • 用于：表现（美化网页）字体，颜色……

  • 发展史：CSS 1.0 ⟶ CSS 2.0 ⟶ CSS 2.1⟶ CSS 3.0

    • CSS 2.0 主要内容：DIV（块）+ CSS HTML 与 CSS 结构分离思想，网页变得简单 + SEO

    • CSS 2.1：新增加浮点，定位

    • CSS 3.0：新增圆角，阴影，动画，……，浏览器兼容性

2 快速入门

  • 规范创建：

    • 在 IDEA 里面创建任务文件夹后创建一个文件夹存放 CCS 文件夹在里面保存 CSS 文件，再创建一个 HTML 文件
    • 如图：
      image-20210718163847309

  • 在 HTML 中添加 CSS（内部）

    • 示例：通过 stype 标签添加 CSS

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在 head 标签内通过 style 标签，后在 style 标签内输入 CCS 语法-->
    <style>
        h1{
           <!--可以选择颜色-->
           color: #213241;
        }
    </style>
</head>
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
</body>
</html>

    • CSS语法：

      选择器{
	声明1;
	声明2;
}

  • 外部引用CSS

    • 示例：在 body 标签中 使用 link 标签引出 CSS

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--用link标签来引出地址-->
<!--<link rel="stylesheet" href="引用的地址">-->
<link rel="stylesheet" href="css/外部引用.css">
<h1>这是标题</h1>
<h2>这是标题</h2>
</body>
</html>

  • CSS 优势

    1. 内容和表现分离

    2. 网页结构表现统一，可以实现复用

    3. 样式十分丰富

    4. 建议使用独立于 html 的 css 文件

    5. 利用 SEO，容易被搜索引擎收录

3 CSS 的 3 种引入方式

3.1 内部样式表

  • 块内⟶内部样式表（上面已经介绍，就不赘述了。下同）

3.2 外部样式表

  • 新建文件->外部样式表

3.3 行内样式表

  • 示例：在 h1 标签内添加 CSS

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--在标签内添加style属性，编写样式-->
<h1 style="color: aquamarine">这是标题</h1>
<h2>这是标题</h2>
</body>
</html>

  • 当一行中有多个相同 css 修饰的优先级：就近原则：谁“目标”近，就执行那个

3.4 拓展：外部样式表的两种方式

  1. 连接式：归属于 html

    • 例如：

      <link rel="stylesheet" href="引用的地址">

    • 理解：先构建骨架，再渲染（仅可见渲染后的）

  2. 导入式：属于 CSS 2.1 特有的

    • 例如：

      <style>
	@import url(css/外部引用.css);
</style>

    • 理解：先构建骨架，再渲染（全可见）

4 选择器

  • 作用：选择页面上某一个或某一类元素
  • 原因：因为美化网页需要定位，选择器就是用来定位的
  • 重要性：js，css，JQuery，vue 都需要用到选择器

4.1 基本选择器

  • 基本选择器包括：标签选择器、类选择器、id选择器
  • 选择器优先级：id >类>标签

4.1.1 标签选择器

  • 作用：会选择这个页面所有的这个标签的元素

  • 语法格式：

    标签{
    声明1;
    ...
    声明n;
}

  • 示例：
    css 代码

    h1{
    color: blue;
}

    html 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/外部引用.css">
</head>
<body>
<h1 >这是标题</h1>
<h2>这是标题</h2>
</body>
</html>

4.1.2 类标签选择器

  • 作用：多个标签归类，是同一个 class 复用，使用类标签选择器可以选择一类标签

  • 语法格式：

    .class{
	声明1;
	...
	声明n;
}

  • 示例：
    css 代码

    /*tlitle为html中的class*/
.title{
    color: aquamarine;
}

    html 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/外部引用.css">
</head>
<body>
<h1 class="title">这是标题</h1>
<h2>这是标题</h2>
</body>
</html>

4.1.3 id 标签选择器

  • 作用：id 为全局唯一，使用 id 选择器可以指定选择

  • 语法格式：

    #id{
	声明1;
	...
	声明n;
}

  • 示例：
    css 代码

    /*123为html中的id*/
#123{
    color:#1548;
}

    html 代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/外部引用.css">
</head>
<body>
<h1 id="123">这是标题</h1>
<h2>这是标题</h2>
</body>
</html>

4.2 高级选择器

4.2.1 后代选择器

  • 语法格式：

    h1 p{
    声明 1;
    ...
    声明 n;
}

    表示的是从 h1 开始里面包含的所有的 p，h1 为祖先，其他的 p 都是后代，即选中后代，不管是儿子还是孙子，只要是都会被选中

  • 示例：选择 body 的所有含 p 的后代

    css 代码

    body p{
    background: bisque;
}

    html 代码(这个例子后面通用)

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>
    <link rel="stylesheet" href="css/选择器.css">
</head>
<body>
<p>这是第一行</p>
<p class="two">这是第二行</p>
<p>这是第三行</p>
<p>这是第四行</p>
<ul>
    <li>
        <p>这是第五行</p>
    </li>
    <li>
        <p>这是第六行</p>
    </li>
    <li>
        <p>这是第七行</p>
    </li>
</ul>
</body>
</html>

    结果如图：
    image-20210719112508750

4.2.2 子代选择器

  • 语法格式：

    h1>p{
    声明1;
    ...
    声明n;
}

    表示的是从 h1 开始里面的第一层 p，h1 为祖先，第一层 p 为儿子，就像世袭制一样，只能传给儿子，孙子和其他堂亲都不行，

  • 示例：只选择 body 的子代 p 的后代
    css 代码

    body>p{
    background: bisque;
}

    结果如图：
    image-20210719112906326

4.2.3 相邻兄弟选择器

  • 语法格式：

    h1+p{
    声明1;
    ...
    声明n;
}

    表示“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”

    理解的误区在于这个加号，h1 和 p 并不是同时被选中的，而是选择的是 h1 紧跟着后面的 p 元素，是递进的关系

  • 示例：表示 two 后面紧接着出现的一个元素，
    css代码

    /*two是第二行的class，具体可看后代选择器中的html例子*/
.two+p{
    background: bisque;
}

    结果如图：
    image-20210719114310246

4.2.4 通用兄弟选择器

  • 语法格式：

    h1~p{
    声明1;
    ...
    声明n;
}

    表示“选择在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”

  • 示例：表示在 two 后面所有的同辈
    css 代码

    /*two是第二行的class，具体可看后代选择器中的html例子*/
.two~p{
    background: bisque;
}

    结果如图：
    image-20210719120241810

4.2.5 结构伪类选择器

  • 结构伪类选择器只是伪类选择器的一部分

  • 为什么要引入伪类与伪元素？

    • 为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分
      • 比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标悬停在某个超链接上时要设置的样式。

  • 什么是伪类，伪元素

    • 伪类：用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的
      • 比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
    • 伪元素：用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中
      • 比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。

  • 注意：

    1. 伪类元素使用了双冒号 (:😃，而不是一个冒号 (😃
      • 这是 CSS3 规范中的一部分要求，目的是为了区分伪类和伪元素，大多数浏览器都支持这两种表示方式
    2. 伪类使用单冒号(😃
      • 对于 CSS2 中已经有的伪元素，例如:before，单冒号和双冒号的写法作用是一样的。

  • 结构伪类选择器：根据文档结构来选择。

    1. :first-child：选择第一个元素

    2. :last-child：选择最后一个元素

      • 示例：

        /*li的第一个元素*/
ul li:first-child{
    background: blue;
}
/*li的最后一个元素*/
ul li:last-child{
    background: aqua;
}

        结果如图：
        image-20210719130320417

  1. :nth-child(n)：选择当前元素的父级元素的第 n 个元素，并且是当前元素才生效。顺序逻辑

  2. nth-of-child(n)：选择当前元素的父级元素的第 n 个元素。类型逻辑

    /*h1在html是body下第一个元素*/
h1:nth-child(1){
    color: #b41111;
}
p:nth-of-type(4){
    color: #cdfffd;
}

    结果如图：
    image-20210719205321690

4.2.6 属性选择器

  • 属性选择器通过 [] 来定义，[] 内部为元素的属性

  • 属性选择器的权重要高于标签选择器

  • 例如：p[title=val] 意为选择title为val的p元素，依然为上面的 html 例子
    css 代码

    p[class=two]{
    color: #ff0000;
}

    结果如图：
    image-20210719210653653

  • 还有其他属性：

    1. *=：意思为包含“这个元素”

    2. ^=：意思为以“这个元素”开头

    3. $=：意思为”这个元素“结尾

5 美化网页元素

5.1 为什么要美化

  • 意义：

    • 有效传递信息
    • 美化页面，吸引用户
    • 凸显页面主题
    • 提高用户体验

  • 一般因为规范，所以用 span 标签突出重点的字

    • 示例：

      css 代码

      /*font-size:字号*/
span{
    font-size: 50px;
}

      html 代码

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.美化网页</title>
    <link rel="stylesheet" href="css/美化网页.css">
</head>
<body>
这是一段话里面有我想<span>突出</span>的一个字
</body>
</html>

      结果如图：
      image-20210719213532920

5.2 字体样式

  • 常用

    • fort-family：字体

    • fort-size：字号

    • fort-weight：字体粗细

5.3 文本样式

5.3.1 颜色

  • 描述颜色的方式：
    1. 单词：color:red
    2. RGB：color:#FF0000
      • 原色光模式（RGB color model），又称 RGB 颜色模型或红绿蓝颜色模型，是一种加色模型，将红（Red）、绿（Green）、蓝（Blue）三原色的色光以不同的比例相加，以合成产生各种色彩光。
      • RGB 各有 256 级亮度。用 16 进制表示为 0~F。
    3. RGBA：color:(255.0.0.0.1)
      • 在 RGB 的基础上添加的 alpha 值，制定了色彩的透明度/不透明度，它的范围为 0.0 ~1.0。
      • 当 alpha = 0.5 时为半透明

5.3.2 对齐方式

  • text-align：文本对齐方式
    • 居中：center

5.3.3 首行缩进

  • text-indent：文本缩进。
  • 一般缩进结尾使用 em 而不用 px
    • px 像素(Pixel)。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的
    • em 是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸
  • 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

5.3.4 行高

  • line-height：行高
  • 如果同时使用line-height和height且数值相同则可实现上下居中

5.3.5 装饰

  • text-decoration：文本装饰。可选

    • 常用参数：
      • 下划线：underline
      • 中划线：line-through
      • 上划线：overline

  • 超链接默认有下划线，可用text-decoration:none去除下划线

5.3.6 文本水平对齐

  • vertical-align:middle

5.4 超链接伪类

  • 正常情况下记住a:hover就行

    • a:hover：鼠标悬停效果

  • a:active：鼠标按住不放的效果

5.5列表

  • list-style：设置列表样式

    • 可选参数:
      • none：没有样式
      • square：正方形
      • decimal：数字
      • circle：空心圆

  • 示例：

    css 代码：

    .title{
    font-size: 25px;
    font-weight: lighter;
}
a{
    color: black;
    text-decoration: none;
    text-indent: 1em;
}
/*
list-style:列表样式。
*/
ul li{
    list-style:none;
    height: 30px;
    text-indent: 1em;
}
a:hover{
    color:red;
}

    html 代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.模仿京东侧边栏</title>
    <link rel="stylesheet" href="css/列表.css">
</head>
<body>
<div>
    <a href="#" class="title">家用电器</a>
    <ul>
        <li>
        <a href="#">手机</a>/&nbsp<a href="#">运营商</a>/&nbsp<a href="#">数码</a>
        </li>
        <li>
        <a href="#">电脑</a>/&nbsp<a href="#">办公</a>
        </li>
         <li>
        <a href="#">家居</a>/&nbsp<a href="#">家具</a>/&nbsp<a href="#">家装</a>/&nbsp<a href="#">厨具</a>/
        </li>
        <li>
        <a href="#">男装</a>/&nbsp<a href="#">女装</a>/&nbsp<a href="#">童装</a>/&nbsp<a href="#">内衣</a>/
        </li>
        <li>
        <a href="#">美妆</a>/&nbsp<a href="#">个人清洁</a>/&nbsp<a href="#">宠物</a>
        </li>
        <li>
        <a href="#">女鞋</a>/&nbsp<a href="#">箱包</a>/&nbsp<a href="#">钟表</a>/&nbsp<a href="#">珠宝</a>
        </li>
        <li>
        <a href="#">男鞋</a>/&nbsp<a href="#">运动</a>/&nbsp<a href="#">户外</a>
        </li>
        <li>
        <a href="#">房产</a>/&nbsp<a href="#">汽车</a>/&nbsp<a href="#">汽车用品</a>
        </li>
    </ul>
</div>
</body>
</html>

    结果如图：
    image-20210721181153809

5.6 背景

5.6.1 背景颜色

  • background：背景颜色

5.6.2 背景图片

  • background-image: url("地址");：背景图片，默认为平铺。

  • background-repeat:：背景样式

    • 参数：
      • repeat-x：水平平铺
      • repeat-y：垂直平铺
      • no-repeat：不会平铺和重复

  • background-position:行 列：背景图片位置

  • 常用写法：backgound:颜色 图片 图片位置 平铺方式

    • 例如：

      background: red url("地址") 270px 10px no-repeat

5.6.3 拓展：框架

  • border：设置框架

    • 格式：border:粗细 样式 颜色;

  • 示例：

    css 代码：

    div{
    width: 500px;
    height: 100px;
    border:1px solid red;
}

    html代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/背景.css">
</head>
<body>
<div ></div>
</body>
</html>

    结果如图：
    image-20210721193533169

5.7渐变（了解）

  • www.grabient.com

5.8 盒子模型

5.8.1 什么是盒子模型

  • 如图：
    image-20210722173224017

margin：外边框

padding：内边框

5.8.2 边框

  • border-width：边框宽度

  • border-style：边框样式

    • 记住两个参数：solid：实线 ，dashed：虚线

  • border-color：边框颜色

  • 合在一起写格式：border:宽度 样式 颜色

    • 例如：border:10px solid red

  • 因为 body 标签（不单单这个标签）总有一个默认的外边距，所以规范会在 css 中为所有标签初始化

    • 例如：

      body,h1,a{
    marigh:0
    padding:0
    text-decoration:none
}

  • 边框数据顺序：顺时针

    /*内边框：上 右 下 左*/
padding:0 0 0 0
/*内边框：上 左右 下*/
padding:0 0 0
/*内边框：上下 左右*/
padding:0 0
/*内边框：上下左右*/
padding:0

  • 盒子计算方式：margin+border+padding+内容宽度
    image-20210722173224017

5.8.3 圆角边框

  • border-radius
    • 数值与 border 相同，顺序同为顺时针
  • 圆角边框可实现多种图形，圆形，伞形等

5.8.4 阴影

  • box-shadow:颜色 x y 阴影半径
  • 阴影可实现发光等操作

6 浮动

6.1 认识文档流

  • 认识文件流

    • 文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素
      • 块级元素只能放在一行，行内元素可以在一行放置多个。
    • 标签和元素的分类：
      • HTML 的标签分类：
        • 文本级标签：p、span、a 、b、i、u 、em
          • p 标签内只能放文字和图片和表单元素，p 里面不能放 h 和 ul，也不能放 p
        • 容器级标签：div、h 系列、li、dt、dd
      • HTML 元素分类：
        • 块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height）
          • 块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有 div、p、h1~h6 等
        • 行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素
          • 行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有 span 、a、 img 等
      • CSS 标签和元素分类与 HTML 很像，只有 p 不一样：
        • 块级元素：所有的容器级标签，都是块级元素，以及 p 标签
          • p 是个文本级标签，但是是个块级元素
        • 行内元素：除了 p 之外，所有的文本级标签，都是行内元素

  • 认识标准文档流

    • 标准流指的是在不使用其他的与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则

  • 只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

6.2 块元素转为行内元素

  • display

    • display记住三种参数即可：
      1. block：块元素
      2. inline：行内元素
      3. inline-block：是块元素，但是可以内联在一起

  • float：浮动

    • 常用参数：
      1. left：左
      2. right：右

  • display & float

    • display：方向不可控
    • float：会脱离文档流，要处理边框塌陷问题

  • 这两种实现行内元素排列的方式更多使用的是 float

6.3 父级边框塌陷问题

  • 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷

  • 解决方案：

    1. 增加父级元素的高度

      XXX{
    width:XXX;
    height:XXX;
}

    2. 添加一个空div标签，再清除浮动
      css 代码

      /*
clear:none：清除浮动
clear:both：两侧不允许有浮动
clear:left：左侧不允许有浮动
clear:right：右侧不允许有浮动
*/
div {
    /*m，p这是因为习惯规范*/
    margin: 0;
    padding: 0;
    clear: none;
}

      html 代码：

         <body>
       XXXXXX
   	<div></div>
   </body>

    3. overflow

      • 例如：在父级元素中增加一个overfiow:hidden

        div {
    XXXXX
    overflow: hidden;
}

    4. 在父类添加一个伪类:after

      div {
    XXXXX
}
div:after{
    content: '';
    display: block;
    clear: both;
}

  • 小结：

    • 浮动元素后面加空 div：方法简单，但是代码中要避免空div

    • 设置父级元素高度：方法简单，但是固定高度会被限制

    • overflow：方法简单，但是不美观

    • 父类中添加伪类：方法复杂，但是没有副作用

7 定位

  • 相对定位：position:relative

    • 相对自己原来的位置进行指定偏移，相对偏移后仍在标准文件流内，原来的位置保留

    • 示例：相对原来的位置向左偏移 20px

      div {
    position: relative;
    left: -20px;
}

      注：注意偏离的方向

  • 绝对定位：position:absolute

    • 绝对定位：基于 XXX 定位，再设置上下左右

    • 说明：

      • 没有父级元素定位时，基于游览器定位
      • 有父级元素定位时，基于父级元素进行定位
        • 父级元素定位方法：在父级元素设置position:relative即可对父级元素进行定位
      • 在父级元素范围内移动，相对于父级元素或浏览器定位
      • 相对于自己原来的位置偏移，相对偏移后不在标准文件流内，原来位置不保留

  • 固定定位：position:fixed

  • z-index

    • z-index 就是图层，默认为 0，无上限

    • 示例：div一层为2

      div {
    z-index: 2;
}

  • 拓展：背景透明度:opactiy

注释：

  1. 这个元素是指=后面的元素，下同 ↩︎

posted @   你是我的生命之源  阅读(79)  评论(0)  编辑  收藏  举报
相关博文：
·  C 语言-1 初识 C
·  2022下半年软考程序员总结（未完）
·  前端CSS
·  前端开发学习之CSS
·  初入前端-CSS（1）
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
页脚
点击右上角即可分享
微信分享提示