前端---CSS(部分用法)

HTML画页面--》这个页面就是页面上需要的元素罗列起来,但是页面效果很差,不好看,为了让页面好看,为了修饰页面---》CSS
CSS的作用:修饰HTML页面
用了CSS之后,样式和元素本身做到了分离的效果。---》降低了代码的耦合性

【2】HTML和CSS的关系?
先有HTML,先有页面,修饰页面--》CSS

【3】CSS名字:
CSS:cascading style sheets (层叠样式表)

层叠:样式的叠加
样式表:各种各样样式的集合

【1】内联样式:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--书写方式:内联样式(行内样式)在标签中加入一个style属性,CSS的样式作为属性值多个属性值之间用;进行拼接--><h1 style="color: deeppink;font-family: '宋体';">这是一个h1标题</h1></body>
</html>

【2】内部样式:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--书写方式:内部样式:head标签中加入一个style标签,在里面定位到你需要修饰的元素,然后在{}中加入你要修饰的样式。--><style type="text/css">h1{color: royalblue;font-family: 宋体;}</style></head><body><h1>这是一个标题</h1></body>
</html>

【3】外部样式:
首先要创建一个css文件,css文件的后缀.css

h1{color: red;font-family: 宋体;
}

再创建html页面:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入外部CSS资源:link--><link rel="stylesheet" type="text/css" href="css/mystyle.css"/></head><body><h1>这是一个标题</h1></body>
</html>

【4】实际开发中三种书写方式用的最多的是:
第三种:外部样式:因为这种方式真正做到了  元素页面和样式 分离

【5】三种书写方式优先级:
就近原则

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--引入外部CSS资源:link--><style type="text/css">h1{color: yellow;}</style><link rel="stylesheet" type="text/css" href="css/mystyle.css"/></head><body><h1 style="color: red;">这是一个标题</h1></body>
</html>

 选择器:

基本选择器:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*【1】基本选择器:元素选择器:通过元素的名字进行定位,它会获取页面上所有这个元素,无论藏的多深都可以获取到格式:元素名字{css样式;}* */h1{color: red;}i{color: blue;}/*【2】基本选择器:类选择器应用场合:不同类型的标签使用相同的类型格式:.class的名字{css样式;}*/.mycls{color: green;}/*【3】基本选择器:id选择器:应用场合:可以定位唯一的一个元素不同的标签确实可以使用相同的id,但是一般我们会进行人为的控制,让id是可以唯一定位到一个元素。格式:#id名字{css样式;}*/#myid{color: yellow;}</style></head><body><h1>我是<i>一个</i>标题</h1><h1>我是一个标题</h1><h1 class="mycls">我是一个标题</h1><h1>我是一个标题</h1><h2 class="mycls">我是h2标题</h2><h2>我是h2标题</h2><h2 id="myid">我是h2标题</h2></body>
</html>

优先级别:
id选择器>class选择器>元素选择器:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.mycls{color: red;}/*#myid{color: yellow;}*/h1{color: greenyellow;}</style></head><body><h1 class="mycls" id="myid">我是标题</h1></body>
</html>

关系选择器:

div 和 span

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*我们可以通俗的理解,把div理解为一个“塑料袋”div属于块级元素--》换行span属于行内元素--》没有换行效果span:里面的内容占多大,span包裹的区域就多大*/div{border: 1px red solid;}span{border: 1px greenyellow solid;}</style></head><body><div>马士兵马士兵<br />马士兵马士兵</div><div>马士兵</div><span>马士兵马士兵</span><span>马士兵</span><span>马士兵</span></body>
</html>

div和span 结合css用于页面的布局。div+css 用于页面布局。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*关系选择器:* 后代选择器:只要是这个元素的后代,样式都会发生变化* div下面的所有h1标签样式都会改变*//*div h1{color: red;}*//*关系选择器:子代选择器只改变子标签的样式*/div>h1{color: royalblue;}span>h1{color: yellow;}</style></head><body><div><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><span><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1><h1>这是标题</h1></span></div></body>
</html>

属性选择器:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*属性选择器*/input[type="password"]{background-color: red;}input[type="text"][value="zhaoss1"]{background-color: yellow;}</style></head><body><form>用户名:<input type="text" value="zhaoss1" />用户名2:<input type="text" value="zhaoss2" />密码:<input type="password" value="123123" /><input type="submit" value="登录" /></form></body>
</html>

伪类选择器 向某些选择器添加特殊效果。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.mycls:hover{color: red;}</style></head><body><h1 class="mycls">我是标题</h1></body>
</html>

一般伪类选择器都用在超链接上:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">/*设置静止状态*/a:link{color: yellow;}/*设置鼠标悬浮状态*/a:hover{color: red;}/*设置触发状态*/a:active{color: blue;}/*设置完成状态*/a:visited{color: green;}</style></head><body><a href="index.html">超链接</a></body>
</html>

总结:

本篇文章通过简单的例子说明了HTML和CSS的基础知识,介绍了如何通过不同方式书写CSS,以及如何使用各种CSS选择器和优先级管理样式,帮助理解如何将HTML与CSS结合,使得网页美观且结构清晰。但CSS有很多技术如浮动,定位,盒子模型等等,有兴趣可以去了解一下。

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

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

相关文章

H.265流媒体播放器EasyPlayer.js无插件H5播放器关于移动端(H5)切换网络的时候,播放器会触发什么事件

EasyPlayer.js无插件H5播放器作为一款功能全面的H5流媒体播放器&#xff0c;凭借其多种协议支持、多种解码方式、丰富的渲染元素和强大的应用功能&#xff0c;以及出色的跨平台兼容性&#xff0c;为用户提供了高度定制化的选项和优化的播放体验。无论是视频直播还是点播&#x…

零基础学安全--云技术基础

目录 学习连接 前言 云技术历史 云服务 公有云服务商 云分类 基础设施即服务&#xff08;IaaS&#xff09; 平台即服务&#xff08;PaaS&#xff09; 软件即服务&#xff08;SaaS&#xff09; 云架构 虚拟化 容器 云架构设计 组件选择 基础设施即代码 集成部署…

【AI绘画】Midjourney进阶:色调详解(上)

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;Midjourney中的色彩控制为什么要控制色彩&#xff1f;为什么要在Midjourney中控制色彩&#xff1f; &#x1f4af;色调白色调淡色调明色调 &#x1f4af…

前端适配:常用的几种方案

一、rem和第三方插件 rem与em不同&#xff0c;rem会根据html的根节点字体大小进行变换&#xff0c;例如1rem就是一个字体大小那么大&#xff0c;比如根大小font size为12px&#xff0c;那么1rem即12px&#xff0c;大家可以在网上寻找单位换算工具进行换算&#xff08;从设计稿…

蓝桥杯c++算法秒杀【6】之动态规划【下】(数字三角形、砝码称重(背包问题)、括号序列、异或三角:::非常典型的必刷例题!!!)

别忘了请点个赞收藏关注支持一下博主喵&#xff01;&#xff01;&#xff01;! ! ! ! &#xff01; 关注博主&#xff0c;更多蓝桥杯nice题目静待更新:) 动态规划 三、括号序列 【问题描述】 给定一个括号序列&#xff0c;要求尽可能少地添加若干括号使得括号序列变得合…

AIGC--AIGC与人机协作:新的创作模式

AIGC与人机协作&#xff1a;新的创作模式 引言 人工智能生成内容&#xff08;AIGC&#xff09;正在以惊人的速度渗透到创作的各个领域。从生成文本、音乐、到图像和视频&#xff0c;AIGC使得创作过程变得更加快捷和高效。然而&#xff0c;AIGC并非完全取代了人类的创作角色&am…

Hot100 - 字母异位词分组

Hot100 - 字母异位词分组 最佳思路&#xff1a;排序 时间复杂度&#xff1a; O(nmlogm)&#xff0c;其中 n 为 strs 数组的长度&#xff0c;m 为每个字符串的长度。 代码&#xff1a; class Solution {public List<List<String>> groupAnagrams(String[] strs) …

C++11特性(详解)

目录 1.C11简介 2.列表初始化 3.声明 1.auto 2.decltype 3.nullptr 4.范围for循环 5.智能指针 6.STL的一些变化 7.右值引用和移动语义 1.左值引用和右值引用 2.左值引用和右值引用的比较 3.右值引用的使用场景和意义 4.右值引用引用左值及其一些更深入的使用场景分…

【H2O2|全栈】JS进阶知识(十一)axios入门

目录 前言 开篇语 准备工作 获取 介绍 使用 结束语 前言 开篇语 本系列博客主要分享JavaScript的进阶语法知识&#xff0c;本期主要对axios进行基本的了解。 与基础部分的语法相比&#xff0c;ES6的语法进行了一些更加严谨的约束和优化&#xff0c;因此&#xff0c;在…

【前端】ES6基础

1.开发工具 vscode地址 :https://code.visualstudio.com/download, 下载对应系统的版本windows一般都是64位的 安装可以自选目录&#xff0c;也可以使用默认目录 插件&#xff1a; 输入 Chinese&#xff0c;中文插件 安装&#xff1a; open in browser&#xff0c;直接右键文件…

代码美学:MATLAB制作渐变色

输入颜色个数n&#xff0c;颜色类型&#xff1a; n 2; % 输入颜色个数 colors {[1, 0, 0], [0, 0, 1]}; createGradientHeatmap(n, colors); 调用函数&#xff1a; function createGradientHeatmap(n, colors)% 输入检查if length(colors) ~ nerror(输入的颜色数量与n不一…

【Reinforcement Learning】强化学习下的多级反馈队列(MFQ)算法

&#x1f4e2;本篇文章是博主强化学习&#xff08;RL&#xff09;领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅…

103.【C语言】数据结构之TopK问题详细分析

目录 1.定义 2.实现 一个容易想到的方法 稍微改进的方法 最优的方法 分析方法的可行性 取出无序数组的取出前K个元素有几种可能 1.取的全是非TopK个元素中的 2.取的前K个既有非TopK个元素也有TopK个元素 3.取的前K个q恰为TopK个元素 代码实现 步骤 TestTopK代码 …

国土变更调查拓扑错误自动化修复工具的研究

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、拓扑错误的形成原因 1.边界不一致 2.不规则图形 3.尖锐角 4.局部狭长 5.细小碎面 6.更新层相互重叠 二、修复成果展示 1.边界不一致 2.不规则图形 3.尖锐角 4.局部狭…

【C++ 算法进阶】算法提升二十三

目录 左右数组相减绝对值最大值 &#xff08;题意代换&#xff09;题目题目分析 可整合数组 &#xff08;题意代换&#xff09;题目题目分析代码 水王问题题目题目分析代码水王问题变形思路讲解 合并石头的最低成本 &#xff08;动态规划&#xff09;题目题目分析代码 左右数组…

质量留住用户:如何通过测试自动化提供更高质量的用户体验

在当今竞争异常激烈的市场中&#xff0c;用户手头有无数种选择&#xff0c;但有一条真理至关重要&#xff1a; 质量留住用户。 产品的质量&#xff0c;尤其是用户体验 (UX)&#xff0c;直接决定了客户是留在您的品牌还是转而选择竞争对手。随着业务的发展&#xff0c;出色的用户…

Redis 可观测最佳实践

Redis 介绍 Redis 是一个开源的高性能键值对&#xff08;key-value&#xff09;数据库。它通常用作数据库、缓存和消息代理。Redis 支持多种类型的数据结构&#xff0c;Redis 通常用于需要快速访问的场景&#xff0c;如会话缓存、全页缓存、排行榜、实时分析等。由于其高性能和…

idea怎么打开两个窗口,运行两个项目

今天在开发项目的时候&#xff0c;前端希望运行一下以前的项目&#xff0c;于是就需要开两个 idea 窗口&#xff0c;运行两个项目 这里记录一下如何设置&#xff1a;首先依次点击&#xff1a; File -> Settings -> Appearance & Behavior ->System Settings 看到如…

加速科技精彩亮相中国国际半导体博览会IC China 2024

11月18日—20日&#xff0c;第二十一届中国国际半导体博览会&#xff08;IC China 2024&#xff09;在北京国家会议中心顺利举办&#xff0c;加速科技携重磅产品及全系测试解决方案精彩亮相&#xff0c;加速科技创始人兼董事长邬刚受邀在先进封装创新发展论坛与半导体产业前沿与…

JSON 性能测试 - WastJson 性能也很快

WAST 是一个高性能 Java 工具集库包&#xff0c;包括 JSON、YAML、CSV、HttpClient、JDBC 和 EL 引擎. WastJson 无论是小中大文本各种数据类型等性能都没有明显的短板&#xff0c;除了推广外可以说是六边形战士&#xff0c;更多测试参考 wast-jmh-test: wast性能测试 (并非所…