html5学习笔记21-css简略学习

CSS

https://www.runoob.com/css/css-tutorial.html
CSS (Cascading Style Sheets,层叠样式表),是一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言,CSS 文件扩展名为 .css。
CSS3 现在已被大部分现代浏览器支持,而下一版的 CSS4 仍在开发中。
css解决内容与表现分离的问题。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
在这里插入图片描述
css注释 //
CSS 中 id 选择器以 “#” 来定义。#para1{…}
CSS 中class选择器以一个点 . 号显示:.center {text-align:center;}
属性选择器 [title=runoob]、input[type=“text”]
p 元素使用 class=“center”: p.center{}
优先级: 内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器
外部样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

可被定义的属性:
背景、文本、字体、
链接的4种状态、
无序列表ul、有序列表ol(order list)、
表格:边框、宽、高、文字对齐、填充、颜色
css盒子模型:
在这里插入图片描述
边框border样式、宽度、颜色、单独设置各边
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS margin(外边距)属性定义元素周围的空间。
CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。
分组选择器:h1,h2,p {…}
嵌套选择器:p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
显示隐藏控制
定位position
CSS overflow 属性用于控制内容溢出元素框时显示的方式。
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
文本对齐:text-align: center;
组合选择
伪元素用来添加一些选择器的特殊效果。a:hover {color:#FF00FF;} /* 鼠标划过链接 */
CSS 伪元素是用来添加一些选择器的特殊效果。p:first-line {}
css导航栏:https://www.runoob.com/css/css-navbar.html
CSS 创建一个鼠标移动上去后显示下拉菜单的效果。https://www.runoob.com/css/css-dropdowns.html
CSS 创建提示信息:https://www.runoob.com/css/css-tooltip.html
CSS创建图片廊、透明图像、图像拼合、图像悬停、
CSS 计数器通过一个变量来设置,根据规则递增变量,设置多级目录。https://www.runoob.com/css/css-counters.html
网页布局:https://www.runoob.com/css/css-website-layout.html
在这里插入图片描述
css实例:https://www.runoob.com/css/css-examples.html

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

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

相关文章

Windows环境下Elasticsearch相关软件安装

Windows环境下Elasticsearch相关软件安装 本文将介绍在 windows 环境下安装 Elasticsearch 相关的软件。 1、安装Elasticsearch 1.1 安装jdk ElasticSearch是基于lucence开发的&#xff0c;也就是运行需要java jdk支持&#xff0c;所以要先安装JAVA环境。 由于ElasticSear…

合宙Air724UG LuatOS-Air LVGL API控件-二维码(Qrcode)

二维码&#xff08;Qrcode&#xff09; 示例代码 qrcodelvgl.qrcode_create(lvgl.scr_act(),nil)lvgl.qrcode_set_txt(qrcode,"https://doc.openluat.com/home")lvgl.obj_set_size(qrcode,400,400)lvgl.obj_align(qrcode, nil, lvgl.ALIGN_CENTER, 0, 0)创建 可以通…

【服务器 | 宝塔】宝塔面板卸载重装教程:清理删除宝塔面板并重新开始

宝塔面板卸载重装怎么操作?我们很多用户可能安装宝塔之后会经常看一下有没有新版本&#xff0c;如果有新版直接右上角 宝塔面板卸载重装怎么操作?我们很多用户可能安装宝塔之后会经常看一下有没有新版本&#xff0c;如果有新版直接右上角”更新”升级一下版本就可以了&#…

【聚类】DBCAN聚类

OPTICS是基于DBSCAN改进的一种密度聚类算法&#xff0c;对参数不敏感。当需要用到基于密度的聚类算法时&#xff0c;可以作为DBSCAN的一种替代的优化方案&#xff0c;以实现更优的效果。 原理 基于密度的聚类算法&#xff08;1&#xff09;——DBSCAN详解_dbscan聚类_root-ca…

OIDC协议 — 理解OIDC身份认证授权

1、OIDC协议与OAuth2协议的区别 1.1 OAuth2 协议 我们在日常开发中&#xff0c;OAuth2协议可能接触比较多&#xff0c;例如用户权限系统集成Spring Security OAuth2进行身份授权认证&#xff1b;那什么是OAuth2协议&#xff1f; OAuth 即 Open Authorization &#xff0c;用于…

React-Hooks 和 React-Redux

注&#xff1a;Redux最新用法参考 个人React专栏 react 初级学习 Hooks基本介绍------------------------- Hooks&#xff1a;钩子、钓钩、钩住&#xff0c; Hook 就是一个特殊的函数&#xff0c;让你在函数组件中获取状态等 React 特性 &#xff0c;是 React v16.8 中的新增功…

分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测

分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测 目录 分类预测 | MATLAB实现WOA-CNN-BiGRU鲸鱼算法优化卷积双向门控循环单元数据分类预测分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.Matlab实现WOA-CNN-BiGRU多特征分类…

PyQt5安装以及使用

PyQt5安装以及使用 1 简介2 安装方法2.1 pip install PyQt52.2 pip install PyQt5‑5.15.9‑cp37‑cp37m‑win_amd64.whl 3 Qt相关工具介绍4 安装PyQt5-tools5 设置环境变量6 测试7 Qt Designer7.1 安装7.2 在 PyCharm 中配置 Qt Designer7.3 在PyCharm中测试Qt Designer 8 将u…

使用ExcelJS快速处理Node.js爬虫数据

什么是ExcelJS ExcelJS是一个用于处理Excel文件的JavaScript库。它可以让你使用JavaScript创建、读取和修改Excel文件。 以下是ExcelJS的一些主要特点&#xff1a; 支持xlsx、xlsm、xlsb、xls格式的Excel文件。可以创建和修改工作表、单元格、行和列。可以设置单元格样式、字…

android studio安卓模拟器高德SDK定位网络连接异常

背景 使用了高德SDK创建了一个 project, 下面是运行界面: 点击 "开始定位"按钮, 结果并没有返回定位信息, 而是报错了: 根据错误提示打开这个网址: https://lbs.amap.com/api/android-location-sdk/guide/utilities/errorcode, 并且找到错误码 4 的信息, 显示的是网…

【2023年11月第四版教材】第12章《质量管理》(第三部分)

第12章《质量管理》&#xff08;第三部分&#xff09; 5 管理质量5.1 管理质量★★★ &#xff08;17下9&#xff09;5.2 数据分析★★★5.3 数据表现★★★5.4 审计★★★ 6 控制质量6.1 控制质量6.2 数据收集★★★6.3 数据分析 ★★★6.4 数据表现★★★ 5 管理质量 组过程…

mianshiyan资料汇总(整理后)

前端优化方式 css3特性, [html5的特性](https://blog.csdn.net/qq_53472371/article/details/121881111) flex, 移动端开发, 各种居中 反爬虫&#xff0c;加密&#xff0c;前端攻击&#xff0c;跨域 cookie session jwt相关 前端优化方式 Turbopack WebComponentes6的新特性 B…