css初体验

devtools/2024/10/21 6:02:14/
htmledit_views">

简介

css用于定义网页样式,包括针对不同设备和屏幕尺寸的设计和布局。

语法:由选择器和声明组成。

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

css使用方法

1.外部css,

使用最多,就是创建一个后缀为.css 的文件,在html文件中用<link>标签引用它

html"><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>

2.内部 CSS

如果一张 HTML 页面拥有唯一的样式,那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

html"><!DOCTYPE html>
<html>
<head>
<style>
body {background-color: linen;
}h1 {color: maroon;margin-left: 40px;
} 
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>

3.行内 CSS

行内样式(也称内联样式)可用于为单个元素应用唯一的样式。

如需使用行内样式,请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

html"><!DOCTYPE html>
<html>
<body><h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p></body>
</html>

若一个元素被多次定义,则只保留最后一个属性

层叠顺序

当为某个 HTML 元素指定了多个样式时&#x


http://www.ppmy.cn/devtools/42463.html

相关文章

JavaFX学习教程一

一、准备工作 Jdk 从 1.8 起支持 JavaFx&#xff0c;到 Jdk 11 不再包含 JavaFx&#xff0c;而是改为 OpenJFX&#xff0c;需要另行安装。 以下是JavaFX的官方教程&#xff1a; java8(java1.8)的客户端技术说明指南(开发工具为NetBeans IDE )&#xff1a;客户端技术&#xf…

【C语言回顾】联合和枚举

前言1. 联合体1.1 联合体的声明1.2 联合体的特点1.3 联合体的使用 2. 枚举2.1 枚举的声明2.2 枚举的特点2.3 枚举的使用 结语 #include<GUIQU.h> int main { 上期回顾: 【C语言回顾】结构体 个人主页&#xff1a;C_GUIQU 专栏&#xff1a;【C语言学习】 return 一键三连;…

vue3 vant4实现抖音短视频功能

文章目录 1. 实现效果2. 精简版核心代码3. 完整功能点&#xff08;本文章不写&#xff0c;只写核心代码&#xff09; 1. 实现效果 2. 精简版核心代码 使用的 vue3 vant4组件使用van-swipe进行轮播图切换实现 <template><div :style"{width: width px,overflo…

二叉树求解大小操作详解

目录 一、求所有结点个数 1.1 递归思路 1.2 递归分支图 1.3 递归栈帧图 1.4 C语言实现 二、求叶子结点个数 2.1 递归思路 2.2 递归分支图 2.3 递归栈帧图 2.4 C语言实现 三、求第K层的结点个数 3.1 递归思路 3.2 递归分支图 3.3 递归栈帧图 3.4 C语言实现 四、求…

Java代码审计---SpEL表达式注入

简单了解 SpEL&#xff08;Spring Expression Language&#xff09; 是 Spring 中的表达式语言&#xff0c;用于在运行时评估和处理表达式。它提供了一种灵活的方式来访问和操作对象的属性、方法和其他表达式。SpEL可以用于配置文件、注解、XML 配置等多种场景&#xff0c;用于…

k8s遇到的错误记录

时隔四年有开始重新鼓捣k8s了&#xff0c;重新安装后遇到的错误记录如下&#xff1a; Error: Package: kubelet-1.14.0-0.x86_64 (kubernetes) Requires: kubernetes-cni 0.7.5 Available: kubernetes-cni-0.3.0.1-0.07a8a2.x86_64 (kubernetes) …

Python 全栈体系【四阶】(五十二)

第五章 深度学习 十二、光学字符识别&#xff08;OCR&#xff09; 2. 文字检测技术 2.1 CTPN&#xff08;2016&#xff09; 2.1.1 概述 CTPN全称Detecting Text in Natural Image with Connectionist Text Proposal Network&#xff08;基于连接文本提议网络的自然图像文本…

pdfbox pdf转换图片时中文丢失,变成方框,提示No glyph for xxx in font STSong-Light

使用pdfbox转换图片时&#xff0c;转换出来的图片中文丢失&#xff0c;变成方框。原因是由于服务器字体缺失&#xff0c;pdfbox在转换时找不到合适的字体。 有几种方案&#xff1a; 服务器安装字体&#xff0c;具体资源百度使用备用字体。 将pdfbox中的FontMapperImpl类&…