05 CSS-CSS语法【尚硅谷JavaWeb教程】

news2024/9/27 5:37:42

05 CSS-CSS语法【尚硅谷JavaWeb教程】

JAVAWEB的学习笔记
学习视频来自：https://www.bilibili.com/video/BV1AS4y177xJ/?vd_source=75dce036dc8244310435eaf03de4e330

  1. 为什么需要CSS
    传统的园区网络采用设备和链路冗余来保证高可靠性，但其链路利用率低、网络维护成本高，CSS技术将两台交换机虚拟成一台交换机，达到简化网络部署和降低网络维护工作量的目的。
  2. CSS最基本的分类：标签样式表、类样式表、ID样式表、组合样式
  3. CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表

CSS： 层叠式样式表

html中的样式标签现在基本已经淘汰，而是使用CSS表示。

过去使得段落改变颜色的标签 font

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        
    </style>
</head>
<body>

    <p><font color="red">这里是段落一</font></p> <!--过去使得段落改变颜色font-->
    <p>这里是段落二</p>
</body>
</html>

效果展示：
在这里插入图片描述

在 < style> 标签中写CSS代码

标签样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境，可以写CSS代码*/
        /*标签样式表*/
        p{ /*设置p标签样式*/
            color: red;
        }

    </style>
</head>
<body>
    <p>这里是段落一</p>
    <p>这里是段落二</p>

</body>
</html>

效果展示：
在这里插入图片描述
类样式 前面有个 点（.）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境，可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }

    </style>
</head>
<body>
<!--
    <p><font color="red">这里是段落一</font></p>
    <p>这里是段落二</p>
-->
    <p>这里是段落一</p>
    <p>这里是段落二</p>
    <p class="f20">这里是段落三</p>
    <p>这里是段落四</p>
</body>
</html>

在这里插入图片描述

ID样式 前面有个井号(#)
id属性在整个HTML文档中，尽量保持唯一（虽然重复不报错）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境，可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
        #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }
    </style>
</head>
<body>
<!--
    <p><font color="red">这里是段落一</font></p>
    <p>这里是段落二</p>
-->
    <p>这里是段落一</p>
    <p>这里是段落二</p>
    <p class="f20">这里是段落三</p>
    <p id="p4">这里是段落四</p> <!--id属性在整个HTML文档中，尽量保持唯一（虽然重复不报错）-->
</body>
</html>

在这里插入图片描述
组合样式 单独改变div 内部的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        /*被style标签包围的范围是CSS环境，可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
        #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }
        /* 组合样式  div内部的标签遵从这个样式*/
        div p{
            color: blue;
        }
        div .f32{
            font-size: 32px;
            font-family: "黑体";
        }
    </style>
</head>
<body>
<!--
    <p><font color="red">这里是段落一</font></p>
    <p>这里是段落二</p>
-->
    <p>这里是段落一</p>
    <p>这里是段落二</p>
    <p class="f20">这里是段落三</p>
    <p id="p4">这里是段落四</p> <!--id属性在整个HTML文档中，尽量保持唯一（虽然重复不报错）-->

    <!--表示层-->
    <div>
        <p><span>HELLO</span></p>
        <span class="f20">World</span>
        <span class="f20">!!!</span>
    </div>
</body>
</html>

-->

在这里插入图片描述

嵌入式样式表：（写在标签里面）

        <p><span style="font-size: 60px; font-weight: bolder; color: chocolate">HELLO</span></p>

在这里插入图片描述

内部样式表：（写在< style > 标签里面）

<head>
    <meta charset="utf-8">
    <!-- 内部样式表 -->
    <style type="text/css">
        /*被style标签包围的范围是CSS环境，可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
        #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }
        /* 组合样式  div内部的标签遵从这个样式*/
        div p{
            color: blue;
        }
        div .f32{
            font-size: 32px;
            font-family: "黑体";
        }
    </style>
</head>

外部样式表: html 不写css代码，专门用一个文件写css代码，然后在html代码中引用css代码文件。

创建一个css文件：
在这里插入图片描述
写入css样式代码：

/* ID 样式*/
#p4{
    background-color: aquamarine;
    font-size: 24px;
    font-weight: bolder;
    font-style: italic;
    font-family: "华文彩云";
}
/* 组合样式  div内部的标签遵从这个样式*/
div p{
    color: blue;
}
div .f32{
    font-size: 32px;
    font-family: "黑体";
}

在head标签内部引用：

<link rel="stylesheet" href="static/css/cs_demo01.css">

效果展示：
在这里插入图片描述

本节所有代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- 内部样式表 -->
    <style type="text/css">
        /*被style标签包围的范围是CSS环境，可以写CSS代码*/
        /*标签样式表*/
        p{
            color: red;
        }
        /* 类样式 */
        .f20{
            font-size: 20px;
        }
        /* ID 样式*/
       /* #p4{
            background-color: aquamarine;
            font-size: 24px;
            font-weight: bolder;
            font-style: italic;
            font-family: "华文彩云";
        }*/
        /* 组合样式  div内部的标签遵从这个样式*/
        /*div p{
            color: blue;
        }
        div .f32{
            font-size: 32px;
            font-family: "黑体";
        } */


    </style>
    <!--引用外部样式表-->
    <link rel="stylesheet" href="static/css/cs_demo01.css">
</head>
<body>
<!--
    <p><font color="red">这里是段落一</font></p>
    <p>这里是段落二</p>
-->
    <p>这里是段落一</p>
    <p>这里是段落二</p>
    <p class="f20">这里是段落三</p>
    <p id="p4">这里是段落四</p> <!--id属性在整个HTML文档中，尽量保持唯一（虽然重复不报错）-->

    <!--表示层-->
    <div>
        <p><span style="font-size: 60px; font-weight: bolder; color: chocolate">HELLO</span></p>
        <span class="f20">World</span>
        <span class="f20">!!!</span>
    </div>
</body>
</html>

<!--
1. 为什么需要CSS
2. CSS最基本的分类：标签样式表、类样式表、ID样式表、组合样式
3. CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表
-->

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Task7：动态函数

Task7：动态函数

目录注意一 Filter函数二 Subtotal函数注意 filter&#xff0c;目前只有office365支持 一 Filter函数 作用&#xff1a;需要根据指定的条件&#xff0c;将符合条件的所有记录从数据源表格式查找过来之前方法&#xff1a; 用高级筛选&#xff08;缺点&#xff1a;在查询下一个…
阅读更多...
SAP ADM100-Unit4 数据库工作原理：中央数据库管理与DBA Cockpit

SAP ADM100-Unit4 数据库工作原理：中央数据库管理与DBA Cockpit

概览 本节介绍DBA Cockpit，介绍SAP环境下数据库管理和监控的要点。 使用DBA Cockpit计划日历去计划数据和日志信息的周期性备份。 课程目标 备份数据库内容 检查数据库备份是否成功被执行。 1、DBA Cockpit总览 为了最少的系统停机时间和更高的系统性能，必须计划定期的…
阅读更多...
云计算|OpenStack|社区版OpenStack安装部署文档（一 --- 前期硬件准备和部署规划）

云计算|OpenStack|社区版OpenStack安装部署文档（一 --- 前期硬件准备和部署规划）

前言&#xff1a; 社区版OpenStack是比较难以安装部署的&#xff0c;本文将就安装部署做一个详细的说明。 首先&#xff0c;OpenStack社区版本众多&#xff0c;如何选择一个合适的版本是第一个要解决的问题&#xff08;这里的合适是指的OpenStack版本和操作系统的版本合适&am…
阅读更多...
MATLAB-自动控制原理-时域分析

MATLAB-自动控制原理-时域分析

目录 step函数&#xff08;求阶跃响应&#xff09;: impulse函数&#xff08;求脉冲响应&#xff09;: lsim函数&#xff08;求输出&#xff09;: 1&#xff0c;求二阶系统不同阻尼比条件下的阶跃响应曲线 2&#xff0c;求二阶负反馈系统的动态性能指标 利用MATLAB可以方…
阅读更多...
五、好友关注，feed流推送

五、好友关注，feed流推送

文章目录关注和取消关注&#xff0c;共同关注Feed流推送Feed介绍Timeline推模式Feed流滚动分页滚动分页查询收邮箱官方命令文档&#xff1a;https://redis.io/commands/ 关注和取消关注&#xff0c;共同关注 需求&#xff1a; 可以对一个用户进行关注和取消关注查询和一个用…
阅读更多...
深刻理解状态机设计需要避免的冒险；处理单元里的control和datapath；时序电路可能存在essential hazard；竞争冒险【SV】【VLSI】

深刻理解状态机设计需要避免的冒险；处理单元里的control和datapath；时序电路可能存在essential hazard；竞争冒险【SV】【VLSI】

深刻理解状态机设计需要避免的冒险&#xff1b;处理单元里的control和datapath&#xff1b;时序电路可能存在essential hazard&#xff1b;竞争冒险【SV】【VLSI】0. 前言&#xff1a;时序电路可能存在essential hazard1. 理解control和datapath1.1 Datapath control2. 硬件电路…
阅读更多...
JavaScript XHR、Fetch

JavaScript XHR、Fetch

前后端分离的优势 ◼ 早期的网页都是通过后端渲染来完成的&#xff1a;服务器端渲染&#xff08;SSR&#xff0c;server side render&#xff09;&#xff1a; \qquad 客户端发出请求-> 服务端接收请求并返回相应HTML文档-> 页面刷新&#xff0c;客户端加载新的HTML文…
阅读更多...
如何采用conda配置python虚拟环境

如何采用conda配置python虚拟环境

文章目录一、创建python虚拟环境二、配置刚创建的虚拟环境三、将虚拟环境配置到相应项目一、创建python虚拟环境 首先选中要配置环境的文件 如下&#xff1a; 在此处输入cmd按回车 此处我创建一个环境名为hands3dtext&#xff0c;环境版本为3.7.2的初始环境 conda create -n…
阅读更多...
Visual Studio 2015配置OpenCV4.5.3(c++版)

Visual Studio 2015配置OpenCV4.5.3(c++版)

学习目标学会在Visual Studio 2015部署Opencv一个简单的C Opencv实例一、 Visual Studio 2015配置Opencv4.5.31.1 Visual Studio 2015网上关于Visual Studio 2015的下载&#xff0c;也有很多介绍。大家自行搜索安装。1.2 OpenCVOpenCV大家根据需求下载相应版本&#xff0c;官网…
阅读更多...
ObjectARX如何修改多行文字的格式

ObjectARX如何修改多行文字的格式

一 AutoCAD中多行文字的格式设置 AutoCAD在设置多行文字格式时使用了非常特殊的方式&#xff0c;多行文字整体可以有诸多格式属性&#xff0c;比如字高、颜色、旋转角度等等&#xff1b;但是&#xff0c;多行文字的每一个字符其实也可以有自己单独的格式。 比如&#xff0c;下…
阅读更多...
java ssm学校二手服饰交易系统服装商城的卖家

java ssm学校二手服饰交易系统服装商城的卖家

目 录 Abstract 1 第一章 绪论 2 1.1课题背景 2 1.2课题研究的目的和意义 3 1.3论文所做的主要工作 3 第二章 技术介绍 4 2.1 B/S架构 4 2.2 MySQL 介绍 4 2.3 JSP技术介绍 4 第三章 系统分析与设计 6 3.1 可行性分析 6 3.2系统说明 6 3.…
阅读更多...
Hexo 添加 Github 贡献图

Hexo 添加 Github 贡献图

参考&#xff1a;https://akilar.top/posts/1f9c68c9/ 安装 hexo-filter-gitcalendar 插件 执行命令安装 hexo-filter-gitcalendar 插件 npm install hexo-filter-gitcalendar --save在站点配置文件 _config.yml 或者主题配置文件如 _config.butterfly.yml 中添加 # hexo-filte…
阅读更多...
jmeter录制脚本及报错：Could not create script recorder解决办法

jmeter录制脚本及报错：Could not create script recorder解决办法

本文分两部分&#xff1a;一、录制脚本最简单步骤&#xff1b;二、报错解决步骤 一、录制脚本步骤 1、右击【测试计划】添加一个线程组&#xff08;用于存放录制的脚本&#xff09;&#xff1b; 2、右击测试计划添加一个HTTP代理服务器&#xff08;添加--非测试元件--HTTP代理…
阅读更多...
（mysql的相关操作）和（Navicat与MySQL的连接使用）

（mysql的相关操作）和（Navicat与MySQL的连接使用）

mysql的相关操作 详细教程 链接1: http://edu.jb51.net/mysql/mysql-tutorial.html 链接2: http://c.biancheng.net/view/2441.html mysql安装教程&#xff1a;https://blog.csdn.net/weixin_36369605/article/details/113599400?ops_request_misc%257B%2522request%255Fid%…
阅读更多...
ABAP CDS-介绍(ABAP CDS视图)

ABAP CDS-介绍(ABAP CDS视图)

目录前言架构概述CDS版本SAP平台CDS的可用性CDS其他的好处后续参考前言文章翻译自Tushar Sharma的文章&#xff0c;转载请注明原作者和译者&#xff01;在SAP发展到SAP HANA版本之后&#xff0c;SAP内部的技术正在快速地变化&#xff0c;SAP开发业务应用程序的方式已经发生了范…
阅读更多...
CUDA编程笔记（8）

CUDA编程笔记（8）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言原子函数完全在GPU中归约性能比较总结前言 原子函数的合理使用 原子函数 在cuda里&#xff0c;一个线程的原子操作可以在不受其他线程的任何操作的影响下完成对…
阅读更多...
快！用Vim

快！用Vim

文章目录简介基操移动删改查搜索替换多文件操作text object赋值粘贴macro补全配色自定义配置映射插件常用插件gopython浏览补全格式化gitTmuxneovim简介 在 Linux 平台使用 Vim 编辑器&#xff0c;成为NB Vimer安装 vim 就不介绍了 基操 三种模式 inserta: append i: inser…
阅读更多...
ESP-C3入门6. 使用UART串口

ESP-C3入门6. 使用UART串口

ESP-C3入门6. 使用UART串口一、简介二、UART使用的一般步骤三、使用的API1. uart_config_t结构体和设置参数函数uart_param_config()2. 专用函数设置参数3. 设置通信管脚uart_set_pin()4. 安装驱动程序uart_driver_install()5. 运行UART通信 uart_write_bytes()和uart_read_byt…
阅读更多...
Spring Batch 批处理-执行上下文

Spring Batch 批处理-执行上下文

引言 接着上篇&#xff1a;Spring Batch 批处理-作业监听器&#xff0c;了解作业监听器后&#xff0c;本篇就来了解一下Spring Batch执行上下文&#xff0c;来看看Spring Batch 如何在作业与步骤间进行数据共享。 作业与步骤上下文 语文中有个词叫上下文&#xff0c;比如&am…
阅读更多...
设置mysql远程链接

设置mysql远程链接

一、 进入mysql数据库 mysql -uroot –p密码 二、 创建用户进行远程链接 Mysql>grant all privileges on *.* to duan%identified by 111111 with grant option; ‘duan’:用户名 ‘%’&#xff1a;表示所有主机都可以登录&#xff0c;如果‘ip’表示该主机可…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023