day31_CSS

今日内容

  • CSS概述
  • 引入方式 (where)
  • 选择器(how)
  • 属性(how)

1 CSS介绍

层叠样式表(cascading style sheet) CSS

用来美化HTML页面,可以让页面更好看,还可以布局页面.


好处

  • 美化页面,布局页面
  • 使用外部css文件,可以实现样式文件和html文件分离,便于维护
  • 使用外部css文件,可以实现样式的复用,提高开发效率

2 语法

选择器 {属性名:属性值;属性名:属性值;
}
--------
p {  color: red;font-size:6px;
}
-------
以上代码就是,1) 选择html页面中的p标签 2) 给p标签中的内容设置颜色和字体大小

3 引入CSS的方式

3.1 在标签内部使用

<body><!-- 引入方式1,在标签内容引入css在任意一个标签中使用style属性来引入css代码css代码语法是, 属性名:属性值;属性名:属性值--><p style="color: red;font-size: 20px;">移舟泊烟渚,</p><p>日暮客愁新。</p><p>野旷天低树,</p><p>江清月近人。</p>
</body>

3.2 标签外,html文件内

<head><title>引入CSS的三种方案</title><!-- 在head标签内,使用style标签,在内审部写css代码--><style>/* 选择器 {属性名:属性值;属性名:属性值} */p {color: green;font-size: 50px; }/* 选择器是选择的当前html中所有的p标签 */</style>
</head>
<body><p style="color: red;font-size: 20px;">移舟泊烟渚,</p><p>日暮客愁新。</p><p>野旷天低树,</p><p>江清月近人。</p>
</body>

3.3 独立css文件

/*gushi.css*/
p {color: blue;font-size: 80px;
}
<head><!-- 使用link标签 引入css文件 --><link href="gushi.css" type="text/css" rel="stylesheet">
</head>
<body><p>绿蚁新醅酒,</p><p>红泥小火炉。</p><p>晚来天欲雪,</p><p>能饮一杯无?</p>
</body>

在这里插入图片描述

4 选择器

4.1 标签名/元素选择器【重点】

通过标签名,选择所有同名的标签

<head><style>/* 通过标签名来选择同名的所有标签 */p {color: red;}div {font-size: 50px;}span{background-color: yellowgreen;}</style>
</head>
<body><p>天不生theshy,上单万古如长夜</p><p>天不生theshy,上单万古如长夜</p><p>天不生theshy,上单万古如长夜</p><div>真正的两袖青蛇,是斩心之剑,斩断心中恐惧,才能踏破束缚,去走自己选的路</div><span>愿后辈心诚剑士人人都会两袖青蛇,人人皆可剑开天门</span>
</body>

4.2 id选择器【重点】

id选择器选择到一个标签.

使用时需要给标签设置一个id属性,然后再css中使用选择器#id,选中

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通过标签名来选择同名的所有标签 */p {color: red;}/* id选择器,#id */#yyds {font-size: 80px;}</style>
</head>
<body><p class="bz">天不生theshy,上单万古如长夜</p><p class="bz">天不生faker,中单万古如长夜</p><!-- 设置id属性,属性值要唯一 --><p id="yyds">天不生uzi,ADC万古如长夜</p>
</body>

4.3 类选择器【重点】

标签名选择器,一次选中所有同名的标签 —>太多啦

id选择器,一次选择一个标签 —> 太少啦

这时可以使用类选择器,将某些标签(可以是任意),归为一类,即给它们设置class属性,然后属性值一样,这样就是一类


1)标签设置class属性

2)css使用选择器.类选到标签

<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通过标签名来选择同名的所有标签 */p {color: red;}/* id选择器,#id */#yyds {font-size: 80px;}/* 类选择器是,.类 */.bz {background-color: black;}div {font-size: 50px;}span{background-color: yellowgreen;}</style>
</head>
<body><!-- 设置class属性 --><p class="bz">天不生theshy,上单万古如长夜</p><!-- 设置class属性 --><p class="bz">天不生faker,中单万古如长夜</p><!-- 设置id属性 --><p id="yyds">天不生uzi,ADC万古如长夜</p><div>真正的两袖青蛇,是斩心之剑,斩断心中恐惧,才能踏破束缚,去走自己选的路</div><!-- 设置class属性 --><h1 class="bz">天不生[oner],打野万古如长夜</h1><span>愿后辈心诚剑士人人都会两袖青蛇,人人皆可剑开天门</span>
</body>

类选择器可以同时设置多个

<head><style>.c1 {color: red;font-size: 50px;}.c2 {background-color: green;}.c3 {border: 6px black solid;}</style>
</head>
<body><!-- 将c1,c2,c3的样式同时作用到该标签 --><p class="c1 c2 c3">真正的两袖青蛇,是斩心之剑,斩断心中恐惧,才能踏破束缚,去走自己选的路</p>
</body>

以上三个基本选择器,有优先级

<head><title>基本选择器优先级</title><style>/* 元素选择器,选中p标签 */p{color: yellow;font-size: 10px;}/* 类选择器,选中p标签 */.cp{color: green;font-size: 50px;}/* id选择器,选中p标签 */#p1{color: red;font-size: 100px;}/* 选择器的优先级是id > class > 元素*/</style>
</head>
<body><p id="p1" class="cp">java-yyds</p>
</body>

4.4 属性选择器

通过属性和值来选择到标签

标签[属性='属性值'] {
}
<head><title>属性选择器</title><style>/* 这是选择指定属性和属性值 *//* input[type='text']{font-size: 100px;}input[type='password'] {background-color: red;} *//* 选择所有同标签,同属性的标签 */input[type]{font-size: 100px;}input[type] {background-color: red;}</style>
</head>
<body>用户名<input type="text"><br>密码<input type="password"><br>邮箱<input type="email"><br>
</body>

4.5 层级选择器

父级选择器 子级选择器

先通过父级选取器,选到一部分标签,再通过子级选择器再选中

<head><title>层级选择器</title><style>/* 父选择器 子选择器 ... {}先通过父级选取一部分,再这一份内部,再通过子级选择器再选择*/div span{color: red;}</style>
</head>
<body><!-- 选择到内部的span --><span>span外</span><div><span>span内</span><div></div><p></p></div>
</body>

4.6 伪元素选择器

是对a标签超链接设置不同点击效果

<head><title>伪元素选择器</title><style>/* 链接本身 */a:link{color: red;}/* 悬浮 */a:hover {color:chartreuse;}/* 点击 */a:active{color: darkorange;}/* 点击过,缺掉这个上面才有效果 *//* a:visited {color: black;} */</style>
</head>
<body><a href="demo7.html">点击跳转页面有惊喜!!!</a>
</body>

5 属性

css属性是美化页面具体手段.

5.1 文字属性

在这里插入图片描述

记住font-size属性!

<head><title>Document</title><style>/* 组合选择器,同时选择到p,div,span标签 */p,div,span {font-size: 60px;font-family: '楷体';font-style: normal;font-weight: 100;}</style>
</head>
<body><p>爱神的箭奥卡福就爱看拉萨市开发</p><div>娃儿到你家是哪哦啊</div><span>我却奥卡菲娜发就发</span>
</body>

5.2 文本属性

在这里插入图片描述

其中,颜色属性,文本对齐方式记住!

<head><title>Document</title><style>/* 组合选择器,同时选择到p,div,span标签 *//* 字体属性 */p,div,span {font-size: 60px;font-family: '楷体';font-style: normal;font-weight: 100;}p{color: red; text-indent: 20px;text-decoration: underline;text-align: center;line-height:120px;}   </style>
</head>
<body><p>爱神的箭奥卡福就爱看拉萨市开发爱神的箭奥卡福就爱爱神的箭奥卡福就爱看拉萨市开发爱神的箭奥卡福就爱神的箭奥卡福就爱看拉萨市开发爱神的箭奥卡福就爱看拉萨市开发爱看拉萨市开发爱神的箭奥卡福就爱看拉萨市开发看拉萨市开发爱神的箭奥卡福就爱看拉萨市开发</p><div>娃儿到你家是哪哦啊</div><span>我却奥卡菲娜发就发</span>
</body>

5.3 背景

在这里插入图片描述

记住背景颜色,常用

<head>   body{background-color: red;background-image: url(lyf.jpg);background-repeat: no-repeat;background-position: center;}</style>
</head>
<body>
</body>

5.4 列表属性

<head><title>属性</title><style>ul{/* list-style-type:disc; */list-style-image: url(fire.png);}</style>
</head>
<body><ul><li>刘亦菲</li><li>迪丽热巴</li><li>郭碧婷</li></ul>
</body>

5.5 尺寸

重要,记住,调整元素的尺寸

<head><title>属性</title><style>div{background-color: red;width: 800px;height: 800px;}input {width: 500px;height: 100px;font-size: 90px;}</style>
</head>
<body><input><div>div</div>
</body>

5.6 显示属性

属性display,值

  • none,不展示,隐藏
  • block,展示,行级展示(行级),当前占一行
  • inline,展示,行内展示(行内),占行内部分空间

记住该属性

<head><title>属性</title><style>input {width: 500px;height: 100px;font-size: 90px;display: inline;}</style>
</head>
<body><input></body>
   width: 500px;height: 100px;font-size: 90px;}
</style>
div
```

5.6 显示属性

属性display,值

  • none,不展示,隐藏
  • block,展示,行级展示(行级),当前占一行
  • inline,展示,行内展示(行内),占行内部分空间

记住该属性

<head><title>属性</title><style>input {width: 500px;height: 100px;font-size: 90px;display: inline;}</style>
</head>
<body><input></body>

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

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

相关文章

5.ROC-AUC机器学习模型性能的常用的评估指标

最近回顾机器学习基础知识部分的时候&#xff0c;看到了用于评估机器学习模型性能的ROC曲线。再次记录一下&#xff0c;想起之前学习的时候的茫然&#xff0c;希望这次可以更加清晰的了解这一指标。上课的时候听老师提起过&#xff0c;当时没有认真去看&#xff0c;所以这次可以…

SpeechGPT-Gen;使用Agents编辑图像;多模态扩散模型图像生成

本文首发于公众号&#xff1a;机器感知 SpeechGPT-Gen&#xff1b;使用Agents编辑图像&#xff1b;多模态扩散模型图像生成&#xff1b; CCA: Collaborative Competitive Agents for Image Editing This paper presents a novel generative model, Collaborative Competitive…

多流转换 (分流,合流,基于时间的合流——双流联结 )

目录 一&#xff0c;分流 1.实现分流 2.使用侧输出流 二&#xff0c;合流 1&#xff0c;联合 2&#xff0c;连接 三&#xff0c;基于时间的合流——双流联结 1&#xff0c;窗口联结 1.1 窗口联结的调用 1.2 窗口联结的处理流程 2&#xff0c;间隔联结 2.1 间隔联…

<网络安全>《2 国内主要企业网络安全公司概览(二)》

4 北京天融信科技有限公司(简称天融信) 信息内容LOGO成立日期创始于1995年总部北京市海淀区上地东路1号院3号楼北侧301室背景民营企业是否上市天融信[002212]A股市值99亿主要产品网络安全大数据云服务员工规模6000多人简介天融信科技集团&#xff08;证券代码&#xff1a;0022…

书生·浦语大模型实战营-学习笔记6

目录 OpenCompass大模型测评1. 关于评测1.1 为什么要评测&#xff1f;1.2 需要评测什么&#xff1f;1.3 如何评测&#xff1f;1.3.1 客观评测1.3.2 主观评测1.3.3 提示词工程评测 2. 介绍OpenCompass工具3. 实战演示 OpenCompass大模型测评 1. 关于评测 1.1 为什么要评测&#…

人工智能系列 :与机器共生的未来

大家好&#xff0c;身处一个日新月异的时代&#xff0c;科技的浪潮汹涌而至&#xff0c;将人们推向未知的前方&#xff0c;一个充满人工智能与机器的世界。 这个未知的境地&#xff0c;或许令人心生恐慌&#xff0c;因为它的庞大未知性仿佛一团迷雾&#xff0c;模糊了大家的视…

Unity Mask合批情况验证

1.首先是两个Mask完全重合的情况下 每张图片使用的image都来自同一个图集 发现彼此之间是没有合批的&#xff0c;但是每个Mask内部是实现了合批的 经过计算此种情况的visiableList&#xff1a;mask1&#xff0c;IM1&#xff0c;IM2&#xff0c;mask2&#xff0c;IM3&#xf…

Docker安装Clickhouse详细教程

简介 ClickHouse是一种列式数据库管理系统&#xff0c;专门用于高性能数据分析和数据仓库应用。它是一个开源的数据库系统&#xff0c;最初由俄罗斯搜索引擎公司Yandex开发&#xff0c;用于满足大规模数据分析和报告的需求。 特点 开源的列式存储数据库管理系统&#xff0c;…

不学前沿技术与朽木浮草何异 ?Java18新特性

不学前沿技术与朽木浮草何异 &#xff1f;Java18新特性 文章目录 不学前沿技术与朽木浮草何异 &#xff1f;Java18新特性JEP 400:默认字符集为 UTF-8JEP 408:简易的 Web 服务器JEP 413:优化 Java API 文档中的代码片段JEP 416:使用方法句柄重新实现反射核心JEP 417: 向量 API&a…

06.搭建一个自己的私有仓库-Gitea

06.搭建一个自己的私有仓库-Gitea | DLLCNX的博客 如果你是一位程序员或者IT相关领域的从业者&#xff0c;那么肯定知道git&#xff0c;而且也或多或少接触了不少开源仓库以及公司的私有仓库&#xff0c;但是我们有没有想过自己也搭建一个私有仓库呢。 这么多开源仓库&#xf…

【51单片机系列】proteus中的LCD12864液晶屏

文章来源&#xff1a;《单片机C语言编程与Proteus仿真技术》。 点阵字符型LCD显示模块只能显示英文字符和简单的汉字&#xff0c;要想显示较为复杂的汉字或图形&#xff0c;就必须采用点阵图型LCD显示模块&#xff0c;比如12864点阵图型LCD显示模块。 文章目录 一、 LCD12864点…

The Sandbox 2024 Game Jam 进行中|游戏创作比赛!冲!

The Sandbox Game Jam 是面向所有游戏制作爱好者的创作比赛&#xff01;我们诚邀您加入 The Sandbox 的生态系统&#xff0c;这里充满活力&#xff0c;游戏与文化相融&#xff0c;创作者彼此切磋&#xff0c;共同实现梦想。请尽情发挥你的想象力&#xff01;The Sandbox 游戏由…

深度学习与大数据在自然语言处理中的应用与进展

引言 在当今社会&#xff0c;深度学习和大数据技术的快速发展为自然语言处理&#xff08;NLP&#xff09;领域带来了显著的进步。这种技术能够使计算机更好地理解和生成人类语言&#xff0c;从而推动了搜索引擎、语音助手、机器翻译等领域的创新和改进。 NLP的发展与技术进步…

使用Robot Framework实现多平台自动化测试

基于Robot Framework、Jenkins、Appium、Selenium、Requests、AutoIt等开源框架和技术&#xff0c;成功打造了通用自动化测试持续集成管理平台&#xff08;以下简称“平台”&#xff09;&#xff0c;显著提高了测试质量和测试用例的执行效率。 01、设计目标 平台通用且支持不…

Linux操作系统——进程间通信简单介绍

1.进程间通信的介绍 我们之前所谈的进程很多都是通过一个进程来进行理解的&#xff0c;可是很多情况下有一些任务呢&#xff0c;他是有很多的进程通过协作完成&#xff0c;比如说我们之前谈到的命令行&#xff0c;一条命令也是用一个进程去执行的。 像这样&#xff0c;我们是通…

一套令我获益颇多的生活模式

你有没有过这样的感受&#xff1a; 有时候&#xff0c;会觉得自己不够好&#xff0c;于是下定决心&#xff0c;做好计划&#xff0c;打算作出一些改变。 但坚持了两天&#xff0c;却又故态复萌&#xff0c;回到旧的模式里。仿佛有一种力量把你往回拉扯&#xff0c;强迫你重复着…

用这个烟感监测技术!同事下巴都惊掉了!

在当今社会&#xff0c;火灾作为一种极具破坏性的灾害&#xff0c;对人们的生命和财产安全构成着严峻的威胁。 为了更好地预防和管理火灾风险&#xff0c;烟感监控系统成为一项不可或缺的技术创新。为各行各业提供了全方位、高效的火灾预警和防范手段。 客户案例 商业办公楼 …

提升效率,节省时间:如何利用享搭低代码平台快速开发应用

在当今快节奏的商业环境中&#xff0c;企业需要以高效的方式开发应用程序&#xff0c;以迅速满足市场需求并保持竞争优势。而传统的软件开发往往需要耗费大量的时间和资源&#xff0c;限制了企业的创新能力和快速响应能力。然而&#xff0c;现在有一种强大的工具可以帮助企业解…

SecureCRT的安装

SecureCRT的安装 加强版的串口调试助手 全部默认安装&#xff0c;默认安装在c盘 SecureCRT收费&#xff0c;可以下载Putty安装 后续完善

【学网攻】 第(4)节 -- 交换机划分Vlan

文章目录 【学网攻】 第(1)节 -- 认识网络 【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口 前言 网络已经成为了我们生活中不可或缺的一部分&#xff0c;它连接了世界各地的人们&#xff0c;让信息和资源得以自由流动。随着互联网的发展&am…