HTML知识小结之CSS

发布于：2022-12-27 ⋅ 阅读:(589) ⋅ 点赞:(0)

目录

一、了解CSS

1.定义

  • CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。
  • 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.关系

  • 一个基本的网站包含很多个网页，一个网页由html, css和javascript组成。html是主体，装载各种dom元素；css用来装饰dom元素；javascript控制dom元素。用一扇门比喻三者间的关系是：html是门的门板，css是门上的油漆或花纹，javascript是门的开关；

  • HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

3.语法规则

  • CSS写在style标签中，style标签一般写在head标签里面，title标签下面，选择器 {css属性}
  • 常用属性：字体颜色，背景颜色，大小，宽高
    在这里插入图片描述

二、引入 CSS 的方式

有 4 种方式可以在 HTML 中引入 CSS。
其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码。
另外两种是引入 外部 CSS文件。

1.行内式

  • 行内式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
  • css写在标签的style属性中
  • 示例
<div style="background: skyblue">
        <h1>你好</h1>
</div>
  • 代码效果
    在这里插入图片描述
  • 这种方法不常用，因为它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2.内嵌式

  • 内嵌式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
  • css写在标签的style属性中
  • 示例
 <style>  
        div{
            width:600px;
            height:600px;
            margin:0 auto;
           }
 </style>
  • 代码效果
    在这里插入图片描述
  • 内嵌式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

3.外联式——链接方式

  • 链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。
  • css写在一个单独的.css文件中，通过link标签引入。
  • 示例
<head>
    	<link rel="stylesheet" type="text/css" href="style.css">
</head>
  • link:链接标签
  • type="text/css"：表示类型是文本，文本为css。
  • rel：表示文本引入进来后的解析方式，relationship的英文缩写。stylesheet译为样式表，总体描述了当前页面与href所指定文档的关系.即说明的是，href连接的文档是一个新式表。
  • href:文件引用的路径，此处style.css是相对路径，应该就在当前文件（此html）同一个文件夹下面。
  • 这是最为推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

4.外联式——导入方式

  • 导入方式指的是使用 CSS 规则引入外部 CSS 文件。
  • 示例
<style>
    	@import url(style.css);
</style>

5.比较链接方式和导入方式

  • 链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式。

  • link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；

  • @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；

  • 当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

三、CSS基础选择器

CSS 选择器是对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，从而给指定元素添加样式。
通过选择器，我们可以找到页面中对应的标签，方便后续设置样式

1.标签选择器

  • 结构：标签名{ css属性名: 属性值; }
  • 作用:通过标签名，找到页面中所有这类标签，设置样式
  • 注意点：
  • 标签选择器选择的是一类标签，而不是单独某一个
  • 标签选择器无论嵌套关系有多深，都能找到对应的标签
  • 示例
<style>  
        div{
            width:600px;
            height:600px;
            margin:0 auto;
           }
        h1{
            color: chartreuse;
        }
    </style>
  • 代码效果
    在这里插入图片描述

2.类选择器

  • 结构：.类名{class属性名:属性值;}
  • 作用: 通过类名，找到页面中所有带这个类名的标签，设置样式
  • 示例
<style>
.y1{
       font-size:27px;           /*字体大小*/
       font-weight:bold;         /*字体粗细值跟数字都可*/
       font-style:italic;          /*字体样式*/
       font-family:楷体;           /*字体系列*/
       color: darkviolet;
    }
</style>
  • 代码效果
    在这里插入图片描述在这里插入图片描述

3.id选择器

  • 结构： #id属性值{ css属性名:属性值; }
  • 作用：通过id属性值，扎到页面中带有这个id属性值得标签，设置样式
  • 注意点：
  • id属性值类似于身份证号，在一个页面中是唯一的，不可重复的
  • 示例
<style>	
		#red{
           	color: red;
        	}
</style>
  • 代码效果
    在这里插入图片描述在这里插入图片描述

4.通配符选择器

  • <!-- 选择所有的元素 -->
<style>
		* {
			color: chartreuse;
		  }
</style>
  • 代码效果
    在这里插入图片描述在这里插入图片描述

5.字体和文本样式

  • 字体大小

  • 属性名：font-size

  • 取值： 数字 + px

  • 示例：font-size:27px;
    在这里插入图片描述

  • 字体粗细

  • 属性名： font-weight

  • 取值：数字

  • 正常 normal

  • 加粗 bold

  • 示例：font-weight:bold;
    在这里插入图片描述

  • 字体样式

  • 属性名: font-style

  • 取值：正常: normal；倾斜：italic

  • 示例：font-style:italic;
    在这里插入图片描述

  • 字体系列

  • 属性名：font-family

  • 取值：宋体，楷体，微软雅黑 等

  • 示例：font-family:楷体;
    在这里插入图片描述

6.字体font相关属性的连写

  • 属性名: font
  • 取值：font: style weight size family
  • 顺序要求：swsf看上去会 稍微舒服

7.文本属性

  • 文本缩进

  • 属性名: text-indent

  • 取值:

  • 数字+px

  • 数字+em（推荐：1em=当前标签的font-size的大小）

  • 文本水平对齐

  • 属性名: text-align

  • 取值:

  • left 左对齐

  • center 居中对齐

  • right 右对齐

  • 注意 text-align:center 水平居中对文本、span标签、a标签、input标签， img标签、如果需要以上元素水平居中，text-align属性是给以上元素父元素设置

  • 属性名:margin:0 auto

  • 如果需要让div, p ,h 水平居中，需要通过margin:0 auto; 实现，直接给当前元素设置

  • 文本修饰

  • 属性名: text-decoration

  • 取值:

  • underline 下划线（常用）

  • line-thourgh 删除线 (不常用)

  • none 无装饰线（常用）

  • 注意点：

  • 开发中会使用text-decoration: none; 清除a标签默认的下划线

  • 行高

  • 作用：控制行间距(给一行上下增加间距)

  • 属性名: line-height

  • 取值:

  • 数字 + px

  • 倍数(当前font-size的倍数)

四、复合选择器

1.后代选择器

  • 作用:根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素

  • 选择器语法: 选择器1 选择器2 {css}

  • 注意点:

  • 后代包括： 儿子、孙子、重孙子…

  • 后代选择器，选择器与选择器之间用空格隔开

  • 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器</title>
    <style>
        div{
            width:600px;
            height:600px;
            margin:0 auto;
           }
        /* 找到div的儿子p设置文字颜色是青绿色，不改变html结构 */
        /* 父选择器   后代选择器 {} */
        div p {
            color: aquamarine;
        }
    </style>
</head>
<body>
        <div>
            <h1>
                后代选择器
            </h1>
            <p>
                我是div的儿子
            </p>
        </div>   
</body>
</html>
  • 代码效果：
    在这里插入图片描述

2.子代选择器

  • 作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
  • 选择器语法: 选择器1 > 选择器2{css}
  • 注意点:
  • 子代只包括儿子
  • 子代选择器中，选择器与选择器之间通过>隔开
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复合选择器</title>
    <style>
        div{
            width:600px;
            height:600px;
            margin:0 auto;
           }
        /* 只让div的儿子p设置文字颜色是粉色，不改变html结构 */        
        div p{
            color: aquamarine;
        }
        div>a{
            color: hotpink;    
                  }
    </style>
</head>
<body>
        <div>
            <a>
                div里面的a
            </a>
            <p>
                <a>我是div里面p里面的a</a>
            </p>
        </div>   
</body>
</html>
  • 代码效果：
    在这里插入图片描述

3.并集选择器

  • 作用: 同时选择多组标签，设置相同的样式

  • 选择器语法: 选择器1，选择器2{css}

  • 注意点：

  • 并集选择器中的每组选择器之间通过逗号(,)分隔

  • 并集选择器中的每组选择器可以是基础选择器或者复合选择器

  • 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 使h1、和p标签设置为蓝色 -->
    <style>
            #green{color: green;}
            p,h1{color: blue;}

    </style>
</head>
<body>
        <a>你好，我是a</a>
        <p align="center" id="green">你好，我是p</p>
        <h1 align="center">你好，我是h1</h1>
        <div align="center">你好，我是div</div>
</body>
</html>
  • 代码效果：
    在这里插入图片描述

4.交集选择器

  • 作用: 选中页面中 <span style="color:red;">同时满足</span> 多个选择器的标签 交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
  • 选择器语法：选择器1选择器2{css}
  • 注意点：
  • 交集选择器中的选择器是紧挨着的，没有东西分割
  • 交集选择器中如果有标签选择器，标签选择器必须写在最前面
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 只让p里面的内容变为蓝色 -->
    <style>
            .y1{color: blue;}
            p.y1{color: blue;}
    </style>
</head>
<body>
            <p class="y1" align="center">交集选择器蓝色</p>
            <h1 class="p.y1" align="center">交集选择器</h1>
</body>
</html>
  • 代码效果：
    在这里插入图片描述

5.hover伪类选择器

  • 作用:选中鼠标悬停在元素上的状态，设置样式
  • 选择器语法:选择器:hover{css}
  • 示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            .y1:hover{color: aqua;}
    </style>
</head>
<body>
        <p class="y1">光标移到我这里才变色</p>
</body>
</html>
  • 代码效果：
    在这里插入图片描述
    在这里插入图片描述

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布