HTML的修饰(CSS) -- 第三课

文章目录

  • 前言
  • 一、CSS是什么？
  • 二、使用方式
    • 1. 基本语法
    • 2. 引入方式
      • 1.行内式
      • 2.内嵌式
      • 3. 链入式
    • 3. 选择器
      • 1. 标签选择器
      • 2.类选择器
      • 3. id选择器
      • 4. 通配符选择器
    • 4. css属性
      • 1. 文本样式属性
      • 2. 文本外观属性
    • 5. 元素类型及其转换
      • 1. 元素的类型
      • 2. 元素的转换
    • 6.css高级特性
      • 1. 复合选择器
      • 2. css层叠性和继承性
        • 1. 层叠性
        • 2. 继承性
      • 3. css优先级
  • 总结

前言

前面我们已经了解了html的一些基本使用方法,我们再写html代码的时候不可避免的会改变其中的一些样式,而这就有一种专门的方式用来修饰html编写的网页的样式,它就是css!

一、CSS是什么？

CSS（层叠样式表）是一种用于描述网页上元素的样式和布局的语言。它与HTML结合使用，可以通过选择器来选择元素，并通过属性来定义元素的外观和行为。CSS可以控制文字的颜色、大小和字体样式，以及元素的大小、位置和背景等。通过使用CSS，可以使网页更具吸引力、易读性和可访问性。

二、使用方式

1. 基本语法

选择器 { 属性1: 值1; 属性2: 值2; … }

2. 引入方式

1.行内式

行内式也称为内联样式，是通过标记的stvle属性来设置元素的样式。

<标记名style="属性1：属性值1；属性2：属性值2；属性3：属性值3；"> 内容 </标记名>

2.内嵌式

内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用**

<head>
<style type="text/css">
    选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}
</style>
</head>

div{
    color: red;
    font-size: 20px;
}

3. 链入式

链入式是将所有的样式放在一介或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。

<head>
    <link href="Css文件的路径"type="text/css"rel="stylesheet"/>
</head>

3. 选择器

1. 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 3.链入式 -- 开发的时候一般都会使用这种方式-->
    <link rel="stylesheet" href="./style.css">

    <!-- 2.内嵌式 -->
	<style>
        div{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <!-- 1.引入css样式 - 行内式,不推荐,写标签的地方建议只写标签 -->
    <div style="color: red;font-size: 20px;">123</div>
    <div>123</div>
    
</body>
</html>

上述案例中style标签中的div就属于标签选择器

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 类选择器 -->
    <style>
        /*
            选择class属性值为box的标签 -- 可以有多个标签有相同的class属性值 
            每个class标签可以有多个名字
        */
        .box{
            color: red;
            font-size: 20px;
        }
        .box1{
            width: 100px;
            height: 100px;
            font-size: 50px;
            background-color: aliceblue;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box box1">123</div>
    <div class="box box2">123</div>
    <p class="box">这是p标签</p>
</body>
</html>

3. id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

/* id名{属性1：属性值1；属性2：属性值2；属性3：属性值3；} */
<style>
	#box{
	    width: 100px;
	    height: 100px;
	    background-color:aquamarine;
	}
</style>

4. 通配符选择器

<style>
    *{
        color: red;
        font-size: 10px;
        /* 清除样式 */
        list-style: none;
    }
</style>

4. css属性

1. 文本样式属性

学习HTML时，可以使用文本样式标记及其属性控制文本的显示样式，但是这种方式繁琐且不利于代码的共享和移植。为此，CSS提供了相应的文本样式属性。

为了更方便的控制网页中各种各样的字体,css提供了一系列的字体样式属性

  1. font-size属性用于设置字号。

    • 常用单位

      1. 像素（px）：像素是最常用的单位，它表示屏幕上的一个物理像素。例如，font-size: 16px; 表示文本的大小为16像素。
      2. 百分比（%）：百分比单位相对于父元素的尺寸来计算。例如，font-size: 120%; 表示文本的大小为父元素字体大小的120%。
      3. em（em）：em单位相对于当前元素的字体大小来计算。例如，font-size: 2em; 表示文本的大小为当前元素字体大小的两倍。
      4. rem（rem）：rem单位相对于根元素（通常是元素）的字体大小来计算。例如，font-size: 1.5rem; 表示文本的大小为根元素字体大小的1.5倍。
      5. vw（视口宽度单位）：vw单位是相对于视口宽度的百分比单位。例如，font-size: 5vw; 表示文本的大小为视口宽度的5%。
      6. vh（视口高度单位）：vh单位是相对于视口高度的百分比单位。例如，font-size: 10vh; 表示文本的大小为视口高度的10%。
      7. rem和em的区别：rem单位相对于根元素的字体大小计算，而em单位相对于当前元素的字体大小计算。rem单位可以更好地控制整个页面的大小，而em单位相对于父元素的尺寸来计算，可以用于更细粒度地控制元素的大小。

  2. font-family属性用于设置字体。

    • 常用字体
      1. Arial：这是一种无衬线字体，广泛用于Web设计中。
      2. Helvetica：也是一种无衬线字体，非常相似于Arial。
      3. Times New Roman：这是一种衬线字体，很常见于印刷和出版物中
      4. Georgia：也是一种衬线字体，适合用于阅读大段文字。
      5. Verdana：这是一种宽松的无衬线字体，适合在小尺寸和低分辨率屏幕上使用。
      6. Tahoma：这也是一种无衬线字体，比较紧凑，适合用于小尺寸和高分辨率屏幕。

  3. font-weight属性用于定义字体的粗细。

    • 常用属性
      1. normal：默认值，表示使用正常的字体粗细。
      2. bold：表示使用粗体字体。
      3. bolder：更加粗体的字体，相对于父元素的字体粗细而言。
      4. lighter：更加细的字体，相对于父元素的字体粗细而言。
      5. 数字值（100、200、…、900）：表示使用特定的字体粗细，数字越大表示字体越粗。常用的数字值有100（thin）、400（normal）、700（bold）。
      6. initial：表示使用默认的字体粗细。
      7. inherit：表示继承父元素的字体粗细。

  4. font-variant属性用于设置变体（字体变化）。

    • 属性值

      1. normal：默认值，不改变字体的大小写形式。
      2. small-caps：将所有小写字母转换为小型大写字母，同时保持大写字母不变。

  5. font-style属性用于定义字体风格

    • 属性

      1. normal：默认值，标准的字体样式。
      2. italic：斜体字体样式。
      3. oblique：倾斜字体样式。

  6. font属性用于对字体样式进行综合设置。

    • 在CSS的font属性中，参数的顺序是有特定的规定的。它们的顺序应该按照以下顺序排列：

      1. font-style（字体样式）
      2. font-variant（字体变体）
      3. font-weight（字体粗细）
      4. font-size（字体大小）
      5. line-height（行高）
      6. font-family（字体系列）

2. 文本外观属性

  1. color：设置文本颜色。

  2. font-family：设置文本的字体系列。

  3. font-size：设置文本的字体大小。

  4. font-weight：设置文本的字体粗细。

  5. font-style：设置文本的字体样式，比如斜体。

  6. text-align：设置文本的对齐方式，比如左对齐(left)、居中对齐(center)、右对齐(right)等。

  7. text-decoration：设置文本的装饰效果，比如下划线(underline)、上划线(overline)、删除线(line_through)等。

  8. text-transform：设置文本的大小写转换，比如大写、小写、首字母大写等。

    1. none：不进行大小写转换，保持原样。
    2. capitalize：将每个单词的首字母转换为大写。
    3. uppercase：将文本中的所有字母转换为大写。
    4. lowercase：将文本中的所有字母转换为小写。
    5. initial：将属性重置为默认值。
    6. inherit：从父元素继承属性值。

  9. letter-spacing：设置字符间的间距。

  10. line-height：设置行高，控制行与行之间的距离。

  11. white-space：设置文本的处理方式，比如处理空格、换行等。

  12. text-indent 用于设置首行文本的缩进,其属性值可为不同的数值,em字符宽度的倍数,或相对于浏览器窗口的百分比,允许使用负值,建议使用em设置单位

  13. background-color:背景颜色,可以使用rgb(30,0,0),十六制颜色(#ccc),英文单词(red)

5. 元素类型及其转换

1. 元素的类型

HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。

  1. 块元素

    1. 在页面中以区域块的形式出现。
    2. 每个块元素通常都会独自占据—整行或多整行。
    3. 可以对其设置宽度、高度、对齐等属性。
    4. 常见的块元素:h1-h6,div,p,li,ol,ul

  2. 行内元素

    1. 不占有独立的区域。
    2. 仅仅靠自身的字体大小和图像尺寸来支撑结构。
    3. 一般不可以设置宽度、高度、对齐等属性。
    4. 常见的行内元素:strong,b,a,em,u(下划线),span

  3. 行内块元素

    1. 不会独占一行
    2. 能够调整宽高
    3. 本身高度默认是由内容撑开的

行内块元素的使用场景包括创建按钮、图像展示、菜单栏等。通过使用行内块元素可以实现一些复合性的布局效果，并且可以在不破坏文本流的情况下控制元素的尺寸和外观。

2. 元素的转换

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            /* 转换成行内块元素 */
            /* 注意行内元素inline和行内块元素inline-block */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>box1</div>
    <div>box2</div>

    <span>这是span标签</span>
</body>
</html>

6.css高级特性

1. 复合选择器

  1. 标签指定选择器
    标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.special或p#one。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器 :单独选中class属性为box1的div标签*/
        div.box1{
            width: 100px;
            height: 100px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <!-- 交集选择器示例 -->
    <div class="box1">div标签</div>
    <li>
        <p class="box2">p标签</p>
    </li>
    <span>span标签</span>
    <div>这也是一个div标签</div>
</body>
</html>
  1. 后代选择器
    后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 -- 所有代*/
        ul li{
            font-size: 50px;
        }

        /* 子选择器 -- 只有第一代 */
        ul>li{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <!-- 后代选择器示例 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <span>
            <li>4</li>
        </span>
    </ul>
    <ol>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ol>
</body>
</html>
  1. 并集选择器
    并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 同时选择到p和div标签 -- 并集选择器 */
        div,p{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box1,.box2{
            width: 100px;
            height: 100px;
            background-color:yellowgreen;
        }
    </style>
</head>
<body>
    <!-- 并集选择器示例 -->
    <div class="box1">div标签</div>
    <li>
        <p class="box2">p标签</p>
    </li>
    <span>span标签</span>
</body>
</html>

2. css层叠性和继承性

1. 层叠性

所谓层叠性是指多种CSS样式的叠加。

2. 继承性

所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。

并不是所有的CSS属性都可以继承，例如。下面的属性就不具有继承性：边框属性,定位属性,内外边距属性,布局属性,背景属性,元素宽高属性

3. css优先级

思考? 网页制作时，对统一元素，应用不同的背景，会出现什么情况？

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

<p class="father" id="header">
    <strong class="blue">文本的颜色</strong>

请添加图片描述在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：继承样式的权重为0。行内样式优先。权重相同时，CSS遵循就近原则。CSS定义了一个important命令，该命令被赋予最大的优先级。

总结

本节主要介绍了css 的基本用法和属性,内容较多,多多练习,熟能生巧!

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/886868.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【Java的SPI机制】Java SPI机制：实现灵活的服务扩展

【Java的SPI机制】Java SPI机制：实现灵活的服务扩展

在Java开发中&#xff0c;SPI&#xff08;Service Provider Interface&#xff0c;服务提供者接口&#xff09;机制是一种重要的设计模式&#xff0c;它允许在运行时动态地插入或更换组件实现&#xff0c;从而实现框架或库的扩展点。本文将深入浅出地介绍Java SPI机制&#xff…
阅读更多...
08_OpenCV文字图片绘制

08_OpenCV文字图片绘制

import cv2 import numpy as npimg cv2.imread(image0.jpg,1) font cv2.FONT_HERSHEY_SIMPLEXcv2.rectangle(img,(500,400),(200,100),(0,255,0),20) # 1 dst 2 文字内容 3 坐标 4 5 字体大小 6 color 7 粗细 8 line type cv2.putText(img,flower,(200,50),font,1,(0,0,250)…
阅读更多...
【AI学习】Mamba学习（二）：线性注意力

【AI学习】Mamba学习（二）：线性注意力

上一篇《Mamba学习&#xff08;一&#xff09;&#xff1a;总体架构》提到&#xff0c;Transformer 模型的主要缺点是&#xff1a;自注意力机制的计算量会随着上下文长度的增加呈平方级增长。所以&#xff0c;许多次二次时间架构&#xff08;指一个函数或算法的增长速度小于二次…
阅读更多...
国外电商系统开发-运维系统批量添加服务器

国外电商系统开发-运维系统批量添加服务器

您可以把您准备的txt文件&#xff0c;安装要求的格式&#xff0c;复制粘贴到里面就可以了。注意格式&#xff01; 如果是“#” 开头的&#xff0c;则表示注释&#xff01;
阅读更多...
【Qt】控件概述 (1）—— Widget属性

【Qt】控件概述 (1）—— Widget属性

控件概述 1. QWidget核心属性1.1核心属性概述1.2 enable1.3 geometry——窗口坐标1.4 window frame的影响1.4 windowTitle——窗口标题1.5 windowIcon——窗口图标1.6 windowOpacity——透明度设置1.7 cursor——光标设置1.8 font——字体设置1.9 toolTip——鼠标悬停提示设置1…
阅读更多...
《安富莱嵌入式周报》第343期：雷电USB4开源示波器正式发布，卓越的模拟前端低噪便携示波器，自带100W电源的便携智能烙铁，NASA航空航天锂电池设计

《安富莱嵌入式周报》第343期：雷电USB4开源示波器正式发布，卓越的模拟前端低噪便携示波器，自带100W电源的便携智能烙铁，NASA航空航天锂电池设计

周报汇总地址&#xff1a;嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 更新一期视频教程 【授人以渔】CMSIS-RTOS V2封装层专题视频&#xff0c;一期视频将常用配置和用法梳理清楚&#xff0…
阅读更多...
鸿蒙harmonyos next flutter通信之MethodChannel获取设备信息

鸿蒙harmonyos next flutter通信之MethodChannel获取设备信息

本文将通过MethodChannel获取设备信息&#xff0c;以此来演练MethodChannel用法。 建立channel flutter代码&#xff1a; MethodChannel methodChannel MethodChannel("com.xmg.test"); ohos代码&#xff1a; private channel: MethodChannel | null nullthis.c…
阅读更多...
openpnp - 图像传送方向要在高级校正之前设置好

openpnp - 图像传送方向要在高级校正之前设置好

文章目录 openpnp - 图像传送方向要在高级校正之前设置好笔记END openpnp - 图像传送方向要在高级校正之前设置好 笔记 图像传送方向和JOG面板的移动控制和实际设备的顶部摄像头/底部摄像头要一致&#xff0c;这样才能和贴板子时的实际操作方向对应起来。 设备标定完&#xf…
阅读更多...
加油站智能视频监控预警系统(AI识别烟火打电话抽烟) Python 和 OpenCV 库

加油站智能视频监控预警系统(AI识别烟火打电话抽烟) Python 和 OpenCV 库

加油站作为存储和销售易燃易爆油品的场所&#xff0c;是重大危险源之一&#xff0c;随着科技的不断发展&#xff0c;智能视频监控预警系统在加油站的安全保障方面发挥着日益关键的作用&#xff0c;尤其是其中基于AI的烟火识别、抽烟识别和打电话识别功能&#xff0c;以及其独特…
阅读更多...
V2M2引擎源码BlueCodePXL源码完整版

V2M2引擎源码BlueCodePXL源码完整版

V2M2引擎源码BlueCodePXL源码完整版 链接: https://pan.baidu.com/s/1ifcTHAxcbD2CyY7gDWRVzQ?pwdmt4g 提取码: mt4g 参考资料&#xff1a;BlueCodePXL源码完整版_1234FCOM专注游戏工具及源码例子分享
阅读更多...
[Cocoa]_[初级]_[绘制文本如何设置断行效果]

[Cocoa]_[初级]_[绘制文本如何设置断行效果]

场景 在开发Cocoa程序时&#xff0c;表格NSTableView是经常使用的控件。其基于View Base的视图单元格模式就是使用NSCell或其子类来控制每个单元格的呈现。当一个单元格里的文字过多时&#xff0c;需要截断超出宽度的文字&#xff0c;怎么实现&#xff1f; 说明 Cocoa下的文本…
阅读更多...
[Go语言快速上手]函数和包

[Go语言快速上手]函数和包

目录 一、Go中的函数 函数声明 多个返回值 可变参数 匿名函数 值传递和地址传递 函数执行顺序&#xff08;init函数&#xff09; 二、Go中的包 基本语法 主要包&#xff08;main package&#xff09; 导入其他包 包的作用域 包的使用 包名别名 小结 一、Go中的函…
阅读更多...
[C++]使用纯opencv部署yolov11目标检测onnx模型

[C++]使用纯opencv部署yolov11目标检测onnx模型

yolov11官方框架&#xff1a;https://github.com/ultralytics/ultralytics 【算法介绍】 在C中使用纯OpenCV部署YOLOv11进行目标检测是一项具有挑战性的任务&#xff0c;因为YOLOv11通常是用PyTorch等深度学习框架实现的&#xff0c;而OpenCV本身并不直接支持加载和运行PyTor…
阅读更多...
使用python基于DeepLabv3实现对图片进行语义分割

使用python基于DeepLabv3实现对图片进行语义分割

DeepLabv3 介绍 DeepLabv3 是一种先进的语义分割模型&#xff0c;由 Google Research 团队提出。它在 DeepLab 系列模型的基础上进行了改进&#xff0c;旨在提高图像中像素级分类的准确性。以下是 DeepLabv3 的详细介绍&#xff1a; 概述DeepLabv3 是 DeepLab 系列中的第三代…
阅读更多...
设计模式-策略模式-200

设计模式-策略模式-200

优点&#xff1a;用来消除 if-else、switch 等多重判断的代码&#xff0c;消除 if-else、switch 多重判断 可以有效应对代码的复杂性。 缺点&#xff1a;会增加类的数量&#xff0c;有的时候没必要为了消除几个if-else而增加很多类&#xff0c;尤其是那些类型又长又臭的 原始代…
阅读更多...
基于vue框架的大学生四六级学习网站设计与实现i8o8z（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

基于vue框架的大学生四六级学习网站设计与实现i8o8z（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;学生,训练听力,学习单词,单词分类,阅读文章,文章类型,学习课程 开题报告内容 基于Vue框架的大学生四六级学习网站设计与实现开题报告 一、研究背景与意义 随着全球化进程的加速和国际交流的日益频繁&#xff0c;英语作为国际通用语言…
阅读更多...
【前端开发入门】html快速入门

【前端开发入门】html快速入门

目录 引言一、html基础模板内容二、html文档流三、html 标签1.块级元素2.行内元素3.功能性元素4.标签嵌套 四、html编码习惯五、总结 引言 本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容&#xff0c;并不代表这部分内容不…
阅读更多...
vue.js 原生js app端实现图片旋转、放大、缩小、拖拽

vue.js 原生js app端实现图片旋转、放大、缩小、拖拽

效果图&#xff1a; 旋转 放大&#xff1a;手机上可以双指放大缩小 拖拽 代码实现&#xff1a; html <div id"home" class"" v-cloak><!-- 上面三个按钮 图片自己解决 --><div class"headImage" v-if"showBtn">&l…
阅读更多...
数据订阅与消费中间件Canal 服务搭建（docker）

数据订阅与消费中间件Canal 服务搭建（docker）

MySQL Bin-log开启 进入mysql容器 docker exec -it mysql5.7 bash开启mysql的binlog cd /etc/mysql/mysql.conf.dvi mysqld.cnf #在文件末尾处添加如下配置&#xff08;如果没有这个文件就创建一个&#xff09; [mysqld] # 开启 binlog log-binmysql-bin #log-bin/var/lib/mys…
阅读更多...
Linux集群部署RabbitMQ

Linux集群部署RabbitMQ

目录 一、准备三台虚拟机&#xff0c;配置相同 1、所有主机都需要hosts文件解析 2、所有主机安装erLang和rabbitmq 3、修改配置文件 4、导入rabbitmq 的管理界面 5、查看节点状态 6、设置erlang运行节点 7、rabitmq2和rabbitmq3重启服务 8、查看各个节点状态 二、添加…
阅读更多...
最新文章

Copyright @ 2022~2023