html中的css

news/2025/2/27 5:40:18

css_0">css

（cascading style sheets，串联样式表，也叫层叠样式表）
在这里插入图片描述
css规范一般约定：
1.存放CSS样式文件的目录一般命名为style或css。
2.在项目初期，会把不同类别的样式放于不同的CSS文件，是为了CSS编写和调试的方便；在项目后期，出网站性能的考虑会将不同的CSS文件整合到一个CSS文件中，这个文件一般命名为style.css或css.css。
3.推荐样式命名（见表）
4.在CSS中添加注释非常简单，它是以“/”开始，以“/”结尾。注释可以是单行，也可以是多行，并且可以出现在CSS代码的任何地方。一般将注释分为结构性注释和提示性注释。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>个人博客网站</title>
    <style type="text/css">
        body {font-size: 11pt;} /*设置主体字体大小*/
        /*设置区块宽度 600px、边框 1px 绿色虚线*/
        div {width: 780px; border: 1px green #00f;}
        /*设置 h3 标题的字体、颜色、对齐方式*/
        h3 {font-family: 黑体; font-size: 22pt; color: black; text-align: center;}
        h3.title {font-size: 18pt; font-weight: bold; color: #666; text-align: center;} /*设置 h3 的副标题*/
        /*设置段落文字 11pt；黑色；文本缩进两个字符*/
        p {font-size: 11pt; color: black; text-indent: 2em;}
        p.img {text-align: center;} /*设置段落中的图像居中对齐*/
        p.author {color: blue; text-align: right;} /*设置段落中的作者文字蓝色、右对齐*/
        img {width: 200; height: 160; border: 1px solid; color: skyblue;} /*设置图像的宽、高、边框*/
    </style>
</head>
<body>
    <div>
        <h3>如何快速建立自己的</h3>
        <h3 class="title">个人博客网站</h3>
        <p class="img"><img src="images/blog.jpg"></p>
        <p>各大博客门户网站相继关闭，做一个独立的个人博客网站是将来的趋势。越来越多的个人站长倾向于独立建站，那如何快速建立自己的个人博客网站呢？</p>
        <p>个人博客应该简单、优雅、稳重、大气、低调，采用 HTML5+CSS3 设计，nav 导航实现鼠标悬停渐变显示英文标题的效果，banner 部分，选择大图作为背景，利用 CSS3 中的 animation 属性结合文字图片实现文字从左到右的渐变效果。</p>
        <p class="author">发布：小江</p>
    </div>
</body>
</html>

在 HTML 中，style 标签用于定义文档的样式信息，而 type 属性指定了样式表的类型。对于 CSS，这个类型通常是 text/css。

可用link键入外部的css文件

...
<link rel="stylesheet" href="外部样式表文件名.css" type="text/css">
...
</head>

导入外部样式表文件

<style type="text/css">
    @import url("外部样式表的文件名1.css");
    @import url("外部样式表的文件名2.css");
    /* 其他样式表的声明 */
</style>

（建议使用link）
css的两个主要特性

1.层叠

层叠（Cascade）是指CSS能够对同一个元素应用多个样式表。（如果有矛盾的样式，会遵循覆盖的原则）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多重样式表的层叠</title>
    <style type="text/css">
        div { color: red; font-size: 12pt; }
        p { color: blue; }
    </style>
</head>
<body>
    <div>
        <!-- p元素里的内容会继承div定义的属性 -->
        <p>这个段落的文字为蓝色 12号字</p>
    </div>
</body>
</html>

【说明】显示结果表明“这个段落的文字为蓝色12号字”继承div属性，为12号字；而color属性则依照最后的定义，为蓝色。

2.继承

继承指的是特定的CSS属性可以从父元素向下传递到子元素。这种特性允许样式不仅应用于某个特定的元素，同时也应用于其后代，而后代所定义的新样式，却不会影响父样式。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>继承示例</title>
    <style type="text/css">
        p {
            color: #00f; /* 定义文字颜色为蓝色 */
            text-decoration: underline; /* 增加下画线 */
        }
        p em { /* 为 p 元素中的 em 子元素定义样式 */
            font-size: 24px; /* 定义文字大小为 24px */
            color: #f00; /* 定义文字颜色为红色 */
        }
    </style>
</head>
<body>
    <h3>CSS 基础</h3>
    <p>CSS 是一组格式设置规则，用于控制 <em>Web</em> 网页的外观。</p>
    <ul>
        <li>表现和内容（结构）分离</li>
        <li>易于维护和<em>改版</em></li>
        <li>更好地控制页面布局</li>
    </ul>
    <ul>
        <li>CSS 设计与编写原则</li>
    </ul>
</body>
</html>

在这里插入图片描述

注意事项：
1.如果有多个单词要用引号
2.虽然最后一个属性值后面不需要加；但是最好记得加上
3.在每一行尽量都只描述一个属性
4.可以通过选择器的分组，让相同的选择器享受相同的分组
在这里插入图片描述

选择器（Selector）

也被称为选择符，CSS选择器用于指明样式对哪些元素生效。HTML中的所有元素都是通过不同的CSS选择器进行控制的。在CSS中，根据选择器的功能或作用范围，可以将选择器分为元素选择器、class类选择器、id选择器和伪类选择器等。
其中，通配符选择器也称全局选择器，其作用是定义网页中所有元素均使用同一种样式。在编写代码时，用“*”表示通配符选择符。
属性选择器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>属性选择器示例</title>
    <style type="text/css">
        img[alt] {border: 3px solid #00F;} /* 作用于任何带 alt 属性的 img 元素 */
        a[href][title] {font-weight: bold;} /* 作用于同时带 href 和 title 属性的 a 元素 */
        a[href="www.taobao.com"][title="淘宝"] {font-size: 18px;} /* 作用于地址指向 www.taobao.com 并且 title 为"淘宝"的 a 元素 */
        a[title~="baidu"] {color: red;}
        *[lang|="en"] {color: blue;}
        p[title^="my"] {color: yellow;}
        p[title$="Test"] {color: green;}
        p[title*="est"] {background-color: aqua;}
    </style>
</head>
<body>
    <p><img src="images/tulip.jpg" alt="郁金香" width="200" height="120" /></p>
</body>
</html>

在这里插入图片描述
后代选择器，如：h3 em选择器，这是一个并集选择器，只会对h3里面的em生效
而父子选择器h3>em则是只会对h3下的直接子元素生效
相邻兄弟选择器则会对相邻的后一个“兄弟”进行修改
例子：

h3+p{color:red;}

这里会对p进行修改但是仅仅是一个p，
而通用兄弟选择器，会对之后的所有p作出修改：

h3～p{color:red;}

id选择器；使用特有id时要加“#”

格式为：E#idValue{property1:value1;property2:value2;...}

（用于为某id单独设置样式）
在这里插入图片描述

class选择器：

可以为指定类的html元素单独设计样式

id 选择器示例

CSS3 简介

CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。

CSS3 语法基础

CSS 的基本语法由两部分组成，其格式为：

selector{property1: value1; property2: value2;...}

selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。


```dart
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>id 选择器示例</title>
    <style type="text/css">
        #title {color: red;}
        #sub_title {background-color: aqua;}
        #p_content, #p_title strong {color: blue;}
        p {text-indent: 2em;}
    </style>
</head>
<body>
    <h2 id="title">CSS3 简介</h2>
    <p id="p_content">CSS (Cascading Style Sheet，串联样式表，也叫层叠样式表)，简称为样式表，CSS 是用于定义如何显示 HTML 元素，控制网页样式并将样式与网页内容分离的一种标记性语言。</p>
    <h2 id="sub_title">CSS3 语法基础</h2>
    <p>CSS 的基本语法由两部分组成，其格式为：</p>
    <p id="p_title"><strong>selector{property1: value1; property2: value2;...}</strong></p>
    <p>selector 被称为选择器，选择器决定了样式定义需要改变的 HTML 元素。property: value 被称为样式声明，有一条或多条样式时，用冒号隔开，以分号结束，包含在一对大括号“{}”内。</p>
</body>
</html>

伪类选择器：可以实现交互功能
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        a:link {color: blue;} /* 超链接单击之前是蓝色 */
        a:visited {color: red;} /* 超链接单击之后是红色 */
        a:hover {color: green; font-size: large; background-color: aqua;} /* 鼠标指针悬停时，绿色，较大的字体，背景是湖绿色 */
        a:active {color: black; background-color: blueviolet;} /* 按下鼠标按键不松手的时候，字体是黑色，背景是蓝紫色 */
        input:focus {background-color: yellow;} /* 输入框获得焦点时，背景色是黄色 */
        li:first-child {font-size: 22px; background-color: #00FFFF;} /* 列表的第一项元素字体是 22px，背景色是浅蓝色 */
    </style>
</head>
<body>
    <p>应用最为广泛的锚点元素 a 的几种状态（未访问超链接状态、已访问超链接状态、鼠标指针悬停超链接状态和被激活超链接状态）:</p>
    <a href="https://www.taobao.com/">淘宝</a><br />
    <a href="https://www.bilibili.com/">哔哩哔哩</a>
    <form action="login" method="post">
        用户名: <input type="text" name="username" id="username" value="" /><br />
        密码: <input type="password" name="password" id="password" value="" />
    </form>
    <div id="">
        <ul>
            <li>咖啡</li>
            <li>茶</li>
            <li>可口可乐</li>
        </ul>
        <ol>
            <li>面包</li>
            <li>馍</li>
            <li>汉堡</li>
        </ol>
    </div>
</body>
</html>

用于单独处于特殊状态的元素
伪元素选择器是CSS中的一种选择器，用于选择HTML元素的特定部分，而不是整个元素。它通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容等。
特点
• 创建虚拟元素：伪元素选择器会创建一个虚拟的元素，这个元素不在文档树中，但可以通过CSS进行样式控制。
• 语法：伪元素选择器以双冒号（::）开头，例如::before、::after等。不过，为了兼容旧版本浏览器，单冒号（:）的写法也被支持。
• 使用场景：常用于在元素的前后插入内容、修饰首行文字或首字母等。
常见的伪元素选择器
• ::before：在元素内容之前插入内容。
• ::after：在元素内容之后插入内容。
• ::first-line：选择元素的第一行内容。
• ::first-letter：选择元素的第一个字母。
示例
以下是一个使用::before和::after的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before {
            content: "前缀：";
            color: red;
        }
        div::after {
            content: " 后缀";
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是主要内容</div>
</body>
</html>

在这个示例中，div::before会在div元素的内容前面插入“前缀：”，div::after会在div元素的内容后面插入“后缀”。
伪元素选择器是CSS中非常强大的工具，可以帮助开发者实现复杂的页面布局和动态效果。


http://www.niftyadmin.cn/n/5869536.html

相关文章

k8s拉取harbor镜像部署

k8s拉取harbor镜像部署

在k8s中创建凭证 首先在节点docker登录harbor&#xff0c; 登录成功之后会在$HOME/.docker/ 生成一个config.json文件&#xff0c;这个就是登录凭证&#xff0c;后面docker pull就不需要再登录了。但是如果在k8s发布pod或者deploment时&#xff0c;这个凭证要在k8s中创建一个对…
阅读更多...
Word表格中如何只单独调整某一单元格宽度

Word表格中如何只单独调整某一单元格宽度

大家好&#xff0c;我是小鱼。 在日常制作Word表格时&#xff0c;表格中不同单元格有时需要设置不同的宽度&#xff0c;但是很多小伙伴会发现想单独调整某一个单元格宽度时&#xff0c;发现其它单元格宽度也会发生变化。那么&#xff0c;到底怎么才能单独调整某一单元格宽度呢…
阅读更多...
网络通信/IP网络划分/子网掩码的概念和使用

网络通信/IP网络划分/子网掩码的概念和使用

文章目录 概述子网的考题子网掩码的历史有/无类地址子网划分!子网掩码超网技术/CIDR子网掩码和路由IP子网掩码定义 网络规划网络规划-拆子网网络规划-组超网子网划分案例 区分于其他特殊IP地址IP地址和网络地址子网掩码和网络地址子网掩码和广播地址 子网间的通信其他 概述 本…
阅读更多...
消息队列（RocketMQ+Kafka）

消息队列（RocketMQ+Kafka）

基础 什么是消息队列&#xff1a;具备生产者&#xff0c;消费者&#xff0c;消息队列的场景 应用场景&#xff1a; 异步&#xff08;电商订单的创建、支付、发货流程&#xff09;解耦削峰填谷&#xff08;淘宝的双十一&#xff09; 需解决的问题&#xff1a; 消息重复&…
阅读更多...
RAG-202502

RAG-202502

目录 RAG场景的坑知识等级金字塔 初级RAG存在的问题高级RAG索前优化检索优化检索后优化 优化经验总结参考 RAG场景的坑 晦涩的专业术语 误区&#xff1a;在专业领域中。许多文献和资料中充满了专业术语&#xff0c;这些术语对于非专业人士&#xff08;甚至是大模型&#xff0…
阅读更多...
IDE/Mermaid + VSCode + Deepseek 生成可视化流程图和UML图

IDE/Mermaid + VSCode + Deepseek 生成可视化流程图和UML图

文章目录 概述什么是 Mermaid ?是编程语言 &#xff1f;优势在哪里 ? VSCode 中安装 MermaidMermaid 文件类型Mermaid在 VSCode下的插件Mermaid 预览 借助 Mermaid 实现文生图表Mermaid 流程图示例Mermaid 类图示例Mermaid 时序图示例Mermaid 甘特图示例饼图示例 小总结 概述…
阅读更多...
低代码与开发框架的一些整合[3]

低代码与开发框架的一些整合[3]

1.基本说明 审批流程是企业内部运营的运行流程&#xff0c;与业务板块进行关联&#xff0c;在企业数智化过程中启动业务串联的作用&#xff0c;与AI业务模型及业务agent整合后&#xff0c;将大大提升企业的运行效率以及降低运营风险。 近期对开源的近40个携带流程平台的项目进…
阅读更多...
蓝桥杯 3.搜索

蓝桥杯 3.搜索

蓝桥杯 3.搜索 文章目录 蓝桥杯 3.搜索DFS回溯DFS剪枝记忆化搜索编程66-75 DFS回溯 回溯法简介 使用**DFS(深度优先搜索)**实现, DFS是一种遍历或搜索图, 树或者图像等数据结构的算法, 当然这个图, 树未必要存储下来(隐式处理就是回溯法)搜索树一般是排列型搜索树 (总节点个数…
阅读更多...
最新文章

Copyright @ 2022~2023