第二章：HTML CSS 网页开发基础（二）

news2024/12/23 13:54:30

CSS概述

CSS全称：Cascading Style Sheet，可以对文字进行重叠，定位。主要实现页面美化。

一、CSS规则

CSS样式表中包括了3部分：选择符、属性、属性值

选择符{属性:属性值;}

  1. 选择符：也可以称为选择器，所有的html标记都是通过不同的CSS选择器进行控制
  2. 属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性
  3. 属性值：属性值为某属性的有效值，其格式为属性：属性值

 二、CSS选择器

1、标记选择符

HTML页面是由很多的标记组成的，例如图片标记<img>、超链接标记<a>、表格标记<table>，而CSS标记选择器就是声明在html中，那些标记采用CSS样式

<a></a>
<style>
  a{
    font-size: 9px;
    color: #F93;
  }
</style>

上述例子，利用CSS选择器，定义a标记选择器，在该选择器中定义了超链接的字体与颜色，注意：CSS控制应在<style></style>该标记中

2、类别选择器

该选择器主要突出的是用户中定义，以“.”开头，其对应的html标记，要用class属性来声明

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<style>
    .one{
        font-family: 宋体;
        font-size: 24px;
        color: red;

    }
    .two{
        font-family: 宋体;
        font-size: 24px;
        color: red;
    }
    .three{
        font-family: 宋体;
        font-size: 24px;
        color: red;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--类别选择器-->

<h2 class = "one">应用的选择器one</h2>
<p>正文1</p>
<h2 class="two">应用的选择器two</h2>
<p>正文2</p>
<h2 class = "three">应用的选择器three</h2>>
<p>正文3</p>>
</body>
</html>

 说明：通常<style></style>在<body></body>标签之前，自定义调用时要加"."，声明时要加class。

3、id选择器

与类别选择器相同，均为用户自定义，且id名是唯一的，不能出现同名，id选择器要以"#"号开头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  #first{
    font-size: 18px;
  }
  #second{
    font-size: 24px;
  }
  #three{
    font-size: 36px;
  }
</style>
<body>
<p id="first"> ID选择器  1</p>
<p id="second">ID选择器  2</p>
<p id="three"> ID选择器  3</p>
</body>
</html>

 三、在页面中包含CSS

在页面中包含CSS样式有：行内样式、内嵌式、链接式

1、行内样式

行内样式直接定义在html标记之内，通过style属性来实现，但灵活性差

2、内嵌式

在页面使用<style></style>标记将CSS样式表包含在页面中。

3、链接式

将CSS样式定义在一个单独文件中，之后再HTML页面通过<link>标记引用。可以通俗的理解为“引入头文件”

语法格式：

        <link rel = 'stylesheet' href = 'path' type = 'text/css'>

  • rel：定义外部文档和调用文档之间的关系
  • href：CSS文档的绝对路径
  • type：是指外部文件的MIME类型 

 例1、

//创建.css样式表，该样式表中定义了页面中<h1>、<h2>、<h3>、<p>标记的样式
//利用<link>引入到页面中
h1,h2,h3{
    color: black;
    font-family: "Trebuchet MS",Arial,sans-serif;
}
/*定义标记p的样式表*/
p{
    color: black;
    font-weight: 200;
    font-size: 24px;
}
//在html<head></head>标签中利用<link/>标签来引用外部css文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../CSS_Src/CSS_Src_01.css"/>
</head>
<!--link标记引入外部CSS文件-->
<body>
<h2>页面文字一</h2>
<p>页面文字二</p>
<!--使用<p>标记来定义一个段落-->
</body>
</html>

说明：刚开始并没有添加link rel属性，一直没有将字体的颜色改变，故这里对于link rel属性进行注释：

link rel定义：

         link rel定义了当前文档与链接文档之间的关系

link rel 属性值 

alternate文档的替代版本（比如打印页、翻译或镜像）。
stylesheet文档的外部样式表。
start集合中的第一个文档。
next集合中的下一个文档。
prev集合中的上一个文档。
contents文档的目录。
index文档的索引。
glossary在文档中使用的词汇的术语表（解释）。
copyright包含版权信息的文档。
chapter文档的章。
section文档的节。
subsection文档的小节。
appendix文档的附录。
help帮助文档。
bookmark相关文档。
                                                                                                                ------引用w3c             

 需要注意的是只有link rel值为stylesheet得到了所有浏览器的支持，而其他只是部分支持

CSS小实例：

利用css实现当鼠标经过超链接时，鼠标指针变为不同的形状。

注意：

CSS鼠标样式属性名为cursor

CSS单位标准如下:

 cursor属性值如下：

crosshair;

十字准心

cursor: pointer; 
cursor: hand;
写两个是为了照顾IE5，它只认hand。

手

cursor: wait;

等待/沙漏

cursor: help;

帮助

cursor: no-drop;

无法释放

cursor: text;

文字/编辑

cursor: move;

可移动对象

 补充：cursor值也可以为自定义的光标文件，文件后缀为.cur或.ani                                                     

css文件:

均以id来标记选择器

#field{
    /*鼠标样式为手*/
    height: 100px;
    width: 300px;
    cursor:hand;
}
#morning{
    /*鼠标样式为沙漏*/
    height: 100px;
    width: 300px;
    /*cursor:url("//cursor_Src/rabbit.cur"),default;*/
    cursor: wait;
}
#sunset{
    /*鼠标样式为十字准星*/
    height: 100px;
    width: 300px;
    cursor:crosshair;
}

 html文件:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel = "stylesheet" href="/CSS_Src/link_Point.css">
</head>
<body>
<a id="field" href="/SrcImage_/33.jpg">田野  鼠标样式为手</a>
<br>
<a id="morning" href="/SrcImage_/solar.png">清晨 鼠标样式为沙漏</a>
<br>
<a id="sunset" href="/SrcImage_/paperwall.jpg">夕阳 鼠标样式为十字准星</a>
</body>
</html>

 //自定义的cursor并没有生效，原因未知。

2、在此基础上，增加div属性，并且当鼠标移到超连接上显示其信息

简称：悬浮文字

css

#image_Title{
    position: relative;
    display: inline-block;
    margin: 4em;
}
/*对div进行控制*/
#field_text{
    position: absolute;
    top: -2em;
    left: 50%;
    display: none;
    white-space: nowrap;
    transform: translate(-50%, 0);
    background-color: burlywood;
}
#image_Title:hover #field_text{
    display: block;
}

html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel = "stylesheet" href="/CSS_Src/link_Point.css">
</head>
<body>
<a id="field" href="/SrcImage_/33.jpg">田野  鼠标样式为手</a>
<br>
<div id="image_Title">
    田野简介
    <div id="field_text">
        这个照片是一张田野的照片
    </div>
</div>
<br>
<a id="morning" href="/SrcImage_/solar.png">清晨 鼠标样式为沙漏</a>
<br>
<a id="sunset" href="/SrcImage_/paperwall.jpg">夕阳 鼠标样式为十字准星</a>
</body>
</html>

可以看到：父类为image_title，子类为field_text，对两个div进行控制，再利用havor选择器进行控制

关键操作：

#image_Title:hover #field_text{
    display: block;
}

对于havor控制器介绍如下：

:hover 选择器用于选择鼠标指针浮动在上面的元素。

(加选择符)控制的样式:hover (加选择符)浮动的样式

 :link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

 

总的来说：css作用就是利用id、class 、标签，来选择元素，并对其美化和修改

后记：

说真的，css属性太多了，想做出好看的页面，还得不断深挖，但鉴于时间原因，先到此为止。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java实现输入行数打印取缔字符，打印金字塔三角形的两个代码程序

Java实现输入行数打印取缔字符，打印金字塔三角形的两个代码程序

目录 前言 一、实现输入行数&#xff0c;打印取缔字符 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图 二、打印金字塔三角形 1.1运行流程&#xff08;思想&#xff09; 1.2代码段 1.3运行截图​​​​​​​ 前言 1.因多重原因&#xff0c;本博文有…
阅读更多...
【BlazePose】《BlazePose: On-device Real-time Body Pose tracking》

【BlazePose】《BlazePose: On-device Real-time Body Pose tracking》

arXiv-2020 文章目录1 Background and Motivation2 Advantages / Contributions3 Method4 Experiments5 Conclusion&#xff08;own&#xff09;1 Background and Motivation 人体关键点存在的难点&#xff1a;a wide variety of poses, numerous degrees of freedom, and occ…
阅读更多...
JavaWeb—Maven

JavaWeb—Maven

目录 1.什么是Maven 2.Maven的作用 3.Maven概述 3.1Maven介绍 3.2 Maven模型 3.3 Maven仓库 1.什么是Maven Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 官网&#xff1a;Maven – Welcome to Apache Mavenhttps://maven.apache.o…
阅读更多...
vscode 终端集成bash

vscode 终端集成bash

windows 版本的 vs code 终端默认是没有集成bash的&#xff0c;虽然也能在vscode 终端可以提交git&#xff0c;但是没有高亮&#xff0c;没有提示&#xff0c;很不方便&#xff0c;这时候就需要我们将bash集成到vs code的终端&#xff0c;就可以愉快的使用git的分支高亮&#x…
阅读更多...
阿里云蔡英华：云智一体，让产业全面迈向智能

阿里云蔡英华：云智一体，让产业全面迈向智能

4月11日&#xff0c;在2023阿里云峰会上&#xff0c;阿里云智能首席商业官蔡英华表示&#xff0c;算力的飞速发展使数字化成为确定&#xff0c;使智能化成为可能。阿里云将以云计算为基石&#xff0c;以AI为引擎&#xff0c;参与到从数字化迈向智能化的划时代变革中。 基于服务…
阅读更多...
资深PM赞不绝口的【9种项目管理图】

资深PM赞不绝口的【9种项目管理图】

好用的项目管理工具可以帮助项目经理掌握项目进度&#xff0c;更好的拆分任务&#xff0c;节约时间。 今天给大家安排上&#xff0c;助力大家在项目交付路上更顺畅&#xff0c;早日以高质量交付结果&#xff0c;找到百万年薪工作。 ​项目管理甘特图扫描Q群二维码下载Q群5330…
阅读更多...
MySQL--表的使用--0409

MySQL--表的使用--0409

目录 1.表的基本操作 1.1 创建表 2. 查看表结构 3.修改表 3.1 新增一列 3.2 修改列属性 3.3 修改名字 3.3.1 修改表名字 3.3.2 修改表内列名字 3.4删除 3.4.1 删除列 3.4.2 删除表 1.表的基本操作 查看自己目前在哪个数据库里面 mysql> select database(); 1.1 创…
阅读更多...
SpringBoot整合 EasyES (八)

SpringBoot整合 EasyES (八)

一直在坑自己家人&#xff0c;对&#xff0c;说的就是你&#xff0c;大A. 上一章简单介绍了SpringBoot整合ES 实现简单项目(七), 如果没有看过,请观看上一章 Mybatis 有增强性的 MybatisPlus, ES 有增强性的吗? 有的&#xff0c; easy-es ​ Easy-Es&#xff08;简称EE&…
阅读更多...
java捕获编译时异常exception和运行时错误error的方法

java捕获编译时异常exception和运行时错误error的方法

背景 最近使用jacob的时候&#xff0c;由于编译没问题&#xff0c;运行时报如下&#xff0c;我 查看代码发现是调用jacob文件时&#xff0c;是下面的方法报错&#xff0c; ComThread.Release(); 这个方法编译不报错&#xff0c;是因为doCoUninitialize使用native修饰的&#…
阅读更多...
java 通过 spring 官网创建springboot项目

java 通过 spring 官网创建springboot项目

文章java简单一写一个springboot入门案例带大家用idea工具工具创建了一个springboot简单的小案例 但有时 我们idea如果连不上网 就会有点问题 我们可以采用另一种创建方式 但这里的前提肯定就是 你的计算机是要有网的 然后访问 https://spring.io/ 打开spring的官网 在 Project…
阅读更多...
去了字节跳动，才知道年薪40W的测试有这么多？

去了字节跳动，才知道年薪40W的测试有这么多？

今年大环境不好&#xff0c;内卷的厉害&#xff0c;薪资待遇好的工作机会更是难得。最近脉脉职言区有一条讨论火了&#xff1a; 哪家互联网公司薪资最‘厉害’&#xff1f; 下面的评论多为字节跳动&#xff0c;还炸出了很多年薪40W的测试工程师 我只想问一句&#xff0c;现在的…
阅读更多...
数据结构进阶：前缀和与差分

数据结构进阶：前缀和与差分

数据结构进阶&#xff1a;前缀和与差分基础前缀和基础差分区间乘积前缀置换经典差分性质题目前缀和变种高次前缀和高维前缀和 (SOSDP)蓝桥杯已经结束&#xff0c;打下来很难受。自己对于算法的掌握还是不够&#xff0c;遂继续开启博客书写&#xff0c;激励自己学习。本系列文章…
阅读更多...
FinClip 云开发实践（附小程序demo）

FinClip 云开发实践（附小程序demo）

在开发一个小程序时&#xff0c;除了考虑界面功能逻辑外&#xff0c;还需要后端的数据支持&#xff0c;开发者需要提前考虑服务器、存储和数据库等相关需求的支持能力&#xff0c;此外还可能需要花费时间精力在部署应用、和依赖服务的建设上。 ​ 因此&#xff0c;腾讯小程序为…
阅读更多...
【Java】类和对象详解

【Java】类和对象详解

1. 类和对象 1.1 类和对象的理解 客观存在的事物皆为对象 &#xff0c;所以我们也常常说万物皆对象。 类 类的理解 类是对现实生活中一类具有共同属性和行为的事物的抽象类是对象的数据类型&#xff0c;类是具有相同属性和行为的一组对象的集合简单理解&#xff1a;类就是对…
阅读更多...
Dva.js（基础、简单例子解读）

Dva.js（基础、简单例子解读）

简单介绍一下 近期在做react项目时&#xff0c;看到项目中数据的公共存储用的Dva.js&#xff0c;整体的代码结构看起来和vuex差不多&#xff0c;这两天趁着刚忙完&#xff0c;利用工作之余的时间空隙&#xff0c;大致了解了dva的基础理论&#xff0c;代码结构应用&#xff0c;参…
阅读更多...
Qt 项目A调用项目B方法（项目架构管理）

Qt 项目A调用项目B方法（项目架构管理）

前言 项目开发中&#xff0c;如果项目比较大&#xff0c;大多采用多项目的方式&#xff0c;主要是为了方便代码管理&#xff0c;也更开发变得更加方便。操作如下&#xff1a; 注&#xff1a;我用的版本是Qt 5.12.3 一、建立项目目录 要求&#xff1a; 1、项目A为主&#xff…
阅读更多...
FreeRTOS中的任务与任务切换（笔记）

FreeRTOS中的任务与任务切换（笔记）

目录任务的定义栈和任务栈任务控制块任务初始化函数初始化任务栈任务创建函数pxTopOfStack任务列表初始化将任务插入到就绪列表中调度器xPortStartScheduler() 函数prvStartFirstTask()函数 &#xff08;该函数是偏硬件底层的函数&#xff0c;用汇编语言编写&#xff0c;在port…
阅读更多...
中电金信「财务公司核心系统白皮书」正式发布！

中电金信「财务公司核心系统白皮书」正式发布！

随着数字技术的深度应用&#xff0c;数字化转型正迎来新一轮变革。如何促进企业战略转型&#xff0c;助力企业发展提质增效&#xff0c;以标准化、数字化、精细化支撑企业实现高质量发展&#xff0c;已成为财务公司数字化转型的重要课题。 为推进财务公司数字化转型工作要求&a…
阅读更多...
恢复照片软件推荐，照片恢复就这么做！

恢复照片软件推荐，照片恢复就这么做！

案例&#xff1a;好用的恢复照片软件 【作为一名摄影博主&#xff0c;我每天拍的照片太多了&#xff0c;在筛选的时候总是容易错删重要的照片&#xff0c;大家有什么比较好的照片恢复软件或方法可以推荐吗&#xff1f;万分期待!】 随着数字化时代的发展&#xff0c;人们越来越…
阅读更多...
QPixmap存在的坑，内存泄漏

QPixmap存在的坑，内存泄漏

QPixmap加载图片的时候&#xff0c;会把图片数据加入到QPixmapCache缓冲区上 如果多次加载&#xff0c;那么内存会被吃掉越来越多 本意QPixmap是用于显示需要比较快的地方&#xff0c;和硬件关联 QPixmap变量之间的赋值&#xff0c;并不会构造新的图片数据内存&#xff0c;而…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023