HTML中引入CSS样式的第二种方式:样式块

news2024/11/18 5:58:30

<!-- 
    第二种方式:在head标签中使用style块,这种方式被称为样式块方式。
        语法格式:
            <head>
                <style type="text/css">
                    选择器 {
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ......
                    }
                    选择器 {
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ......
                    }
                    ......
                </style>
            </head>

 -->
<!DOCTYPE html>
<html>
    <head>
        <title>HTML中引入CSS样式的第二种方式:样式块</title>
        <style type="text/css">
            /*
                这是CSS注释。
            */

            /*
                id选择器语法格式:
                    #id名字{
                        样式名:样式值;
                        样式名:样式值;
                        样式名:样式值;
                        ...
                    }

                id选择器只能对某一个标签进行定位。
            */
            #myid{
                color:red;        /* 字体颜色:红色 */
                font-size:30px;    /* 字体大小:30px */
            }
            /*
                标签选择器语法格式:
                标签名{
                    样式名:样式值;
                    样式名:样式值;
                    样式名:样式值;
                    ...
                }

                标签选择器作用的范围比id选择器广。它能对同一类型的标签进行统一定位,不灵活。
            */
            div{
                background-color:black;        /* 背景颜色:黑色 */
                border:2px solid red;        /* 边框粗细2像素,边框样式:实线,边框颜色:红色 */
                width:100px;                /* div宽度:100px */
                height:100px;                /* div高度:100px */
            }
            /*
                类选择器语法格式:
                .类名{
                    样式名:样式值;
                    样式名:样式值;
                    样式名:样式值;
                    ...
                }

                类选择器可以对不同类型的标签进行定位,比较灵活
            */
            .myclass{
                border:5px solid yellow;    /* 边框:宽度5px 实线 黄色 */
            }

        </style>
        </style>
    </head>
    <body bgcolor="antiquewhite">
        <!--设置样式:字体大小为30px,颜色为红色-->
        <span id="myid">欢迎学习CSS</span>
        
        
        <div></div><br/>
        <div></div><br/>
        <div></div><br/>


        <!--class名相同的标签可以认为是同一类标签-->

        <input type="text" class="myclass"/>
        <br/><br/><br/>
        <select class="myclass">
            <option>专科</option>
            <option>本科</option>
            <option>学士</option>
            <option>硕士</option>
        </select>
    </body>
</html>

附:在网页中的展示效果如下图:

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

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

相关文章

Ragnar-lothbrok靶机总结

Ragnar-lothbrok靶机渗透总结 靶机下载地址: https://download.vulnhub.com/ragnarlothbrok/Ragnar-lothbrok.ova 打开靶机,使用nmap扫描出靶机的ip和所有开放的端口 可以看到靶机开放了21端口,80端口,443端口,3306端口 一般开放21端口,我们可以先尝试ftp的匿名登录 可以看到…

MySQL详解(一)——基础 1.0

MySQL基础 1. 数据库概述 1.1 什么是数据库 数据库是持久化数据的一种介质&#xff0c;可以理解成用来存储和管理数据的仓库&#xff01; 持久化(persistence)&#xff1a;把数据保存到可掉电式存储设备中以供之后使用。持久化的大多数时候是将内存中的数据存储在数据库中&…

CompletableFuture实现异步编排

为什么需要异步执行&#xff1f; 场景&#xff1a;电商系统中获取一个完整的商品信息可能分为以下几步&#xff1a;①获取商品基本信息 ②获取商品图片信息 ③获取商品促销活动信息 ④获取商品各种类的基本信息 等操作&#xff0c;如果使用串行方式去执行这些操作&#xff0c;假…

使用Python包组织代码

使用Python包(package)组织代码Python 通过包(package)的方式来组织代码&#xff0c;包是一种特殊的模块(module)。Python 的包有两种形式&#xff0c;分别是Regular packages 和 namespace packages。所谓 Regular packages 就是指含有__init__.py的目录&#xff0c;这样的包被…

Jeston TX1TX2 A100 Ubuntu_1804_ROS 系统清理系统缓冲日志

大家好&#xff0c;我是虎哥&#xff0c;我自己的系统&#xff0c;运行一段时间后&#xff0c;出现了存储空间不足&#xff0c;详细查了一下&#xff0c;发现ROS本身就占用了大量的日志空间&#xff0c;这个当然在编程阶段&#xff0c;通过少加打印的方式来优化&#xff0c;但是…

黑群晖安装记录

老姐公司黑群晖坏了。临危受命&#xff0c;尝试拯救硬盘文件。 看起来黑群晖启动了&#xff0c;但是在管理软件找不到黑群晖IP&#xff0c;尝试了各种方法都不行&#xff0c;放弃老群晖&#xff0c;直接拯救硬盘数据&#xff0c;看官网有HDD迁移模式&#xff0c;直接把硬盘插到…

【GD32F427开发板试用】8. 脉搏监控仪

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;hehung 之前发帖 【GD32F427开发板试用】1. 串口实现scanf输入控制LED 【GD32F427开发板试用】2. RT-Thread标准版移植 【GD32F427开发板试用…

动态内存开辟必看,一篇就能学会贯通

目录 为什么存在动态内存分配 动态内存函数的介绍 1.malloc函数和free函数 2.calloc函数 3.realloc函数 常见的动态内存错误 经典的笔试题 柔性数组 今天来介绍一下动态内存&#xff0c;让我们直入主题&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 为…

【Cocos新手入门】cocos creator 的研发思路和工具操作说明

本篇文章主要讲解cocos creator 的研发思路和工具操作说明 作者&#xff1a;任聪聪 日期&#xff1a;2023年1月29日 研发思路 关于cocos creator 工具说明 首先cocos creator 是一个编辑游戏界面的窗口&#xff0c;省去了我们日常开发游戏时频繁修改参数调整动画、场景的工作…

Siam R-CNN: 通过重检测进行视觉跟踪

Siam R-CNN: 通过重检测进行视觉跟踪Siam R-CNN: Visual Tracking by Re-DetectionContributionsMethodSiam RCNNVideo Hard Example MiningTracklet Dynamic Programming Algorithm实验总结更多Ai资讯&#xff1a;公主号AiCharm Siam R-CNN: Visual Tracking by Re-Detectio…

DMETL5单机版安装使用

DMETL5安装使用 1.创建dm8数据库 使用dm数据库配置助手dbca创建数据库 2.根据dmetl在线文档创建HOTEL模式 DROP USER IF EXISTS HOTEL CASCADE; DROP TABLESPACE IF EXISTS HOTEL; CREATE TABLESPACE HOTEL DATAFILE HOTEL.DBF SIZE 150 AUTOEXTEND ON NEXT 10; CREATE USE…

基于springboot的仓库管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

增鑫科技更新招股书,冲刺深交所上市,正邦集团是其主要股东

近日&#xff0c;江西增鑫科技股份有限公司&#xff08;下称“增鑫科技”&#xff09;预披露更新招股书&#xff0c;准备在深圳证券交易所主板上市。据贝多财经了解&#xff0c;增鑫科技曾于2022年7月1日递交招股书&#xff0c;此次更新了截至2022年6月30日的财务数据等信息。 …

权威报告!免费解锁IBM最新《2022-2023年Salesforce状态报告》

前不久&#xff0c;IBM发布了2022-2023年Salesforce状态报告&#xff0c;揭示了一些热门趋势&#xff0c;报告显示Salesforce仍然是许多企业客户成功战略的重要力量。 Salesforce状态报告是一项全球性的、数据驱动的调查&#xff0c;主要调查业务战略、投资和发展&#xff0c;同…

Linux常用命令——rpm命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) rpm RPM软件包的管理工具 补充说明 rpm命令是RPM软件包的管理工具。rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序&#xff0c;由于它遵循GPL规则且功能强大方便&#xff0c;因而广受欢迎。逐…

5.2 晶体管的高频等效模型

从晶体管的物理结构出发&#xff0c;考虑发射结和集电结电容的影响&#xff0c;就可以得到在高频信号作用下的物理模型&#xff0c;称为混合 π\pmb{π}π 模型。由于晶体管的混合 πππ 模型与 hhh 参数等效模型在低频信号作用下具有一致性&#xff0c;因此&#xff0c;可用 …

Unity Native Plugin C#和C++互相调用

官方链接 1.DLL的方式&#xff1a; C代码&#xff1a;编译成DLL&#xff0c;导入Unity #pragma once #include <map> #include <string>//导出宏定义 #define _DllExport _declspec(dllexport)//函数指针 typedef void (*NativeCallback)(const char*);extern &…

【28】C语言 | 关于指针练习(2)

目录 10、下列关于二维数组输出 11、下列关输出 12、下列代码输出什么 13、下列代码输出什么 14、下列代码输出什么 15、下列代码输出什么 16、下列代码输出什么 17、下列代码输出什么 18、杨氏矩阵 19、左旋转两个字符 10、下列关于二维数组输出 int main() {int …

文献阅读:Improving Language Understanding by Generative Pre-Training

文献阅读&#xff1a;Improving Language Understanding by Generative Pre-Training 1. 文章简介2. 模型介绍3. 实验考察 1. 训练数据2. 实验结果3. 消解实验 4. 总结 & 思考 文献链接&#xff1a;https://cdn.openai.com/research-covers/language-unsupervised/languag…

P1464 Function————C++

文章目录题目Function题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1解题思路Code运行结果题目 Function 题目描述 对于一个递归函数 w(a,b,c)w(a,b,c)w(a,b,c) 如果 a≤0a \le 0a≤0 或 b≤0b \le 0b≤0 或 c≤0c \le 0c≤0 就返回值$ 1$。如果 a>20a>20a&…