JAVAWeb02-CSS

news2024/11/27 0:48:20

1. CSS

CSS 指的是层叠样式表 (Cascading Style Sheets)

1.1 概述

1.1.1 官方文档

地址: https://www.w3school.com.cn/css/index.asp

1.1.2 为什么需要 CSS

  1. 在没有 CSS 之前,我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性,费心费力。所以 CSS 就出现了。
  2. 使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发)
  3. CSS 可以让 html 元素(内容) + 样式(CSS)分离,更好的控制页面
    在这里插入图片描述

1.2 CSS 快速入门

应用实例:simple_css.html, 使用 css 完成下面页面

  1. 需求: 创建: simple_css.html 完成如下网页显示
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 快速入门</title>
    <!--
        解读
        1. 在head标签内,出现了 <style type="text/css"></style>
        2. 表示要写css内容
        3. div{} 表示对div元素进行样式的指定, div就是一个选择器(元素/标签选择器)
        4. width: 300px(属性); 表示对div样式的具体指定, 可以有多个
        5. 如果有多个,使用; 分开即可, 最后属性可以没有; 但是建议写上
        6. 当运行页面时,div就会被 div{} 渲染,修饰
        7. 小经验:在调试css时,可以通过修改颜色,或者大小来看
        8. css的注释是 /* */ ,快捷键 ctrl+/
    -->
    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<!--先使用传统的方法-->
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<div>hello, 天津</div>
<br/>
<div>hello, 深圳</div>
<br/>
</body>
</html>

1.3 CSS 语法

  1. CSS 语法可以分为两部分: (1)选择器 (2)声明
  2. 声明由属性和值组成,多个声明之间用分号分隔
    在这里插入图片描述
  3. 说明:最后一条声明可以不加分号(建议加上)
  4. 一般每行只描述一个属性
  5. CSS 注释:/*注释内容*/, 类似 java
    在这里插入图片描述

1.4 常用样式-字体颜色

1.4.1 介绍

颜色可以写颜色名 比如 green,也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090
在这里插入图片描述
应用实例 color.html:

  1. 修改 color.html, 完成如下页面.
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <style type="text/css">
        /*
            说明:
            颜色可以写颜色名 比如 green,
            也可以写 rgb 值 比如 rgb(200,200,200)
            和十六进制表示值 比如 #708090
            color: rgb(255, 222, 1); //color: #ff7d44; //color: red;
         */
        div {
            /*有三种方式,指定颜色
                1. 英文
                2. 16进制 #ff7d44 [使用最多]
                3. 三原色 rgb(1,1,1)
            */
            color: #ff7d44;
        }
    </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

1.5 常用样式-边框 border

应用实例:border.html

  1. 修改 border.html, 完成如下页面.
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style type="text/css">
        div {
            /*width: 300px; 具体的像素*/
            width: 50%; /*百分比*/
            height: 100px;
            /*
			*  dashed 是虚线
			*  solid  是实线
			*/
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

1.6 常用样式-宽度 width/高度 height

宽度/高度像素值:100px; 也可以是百分比值:50%

应用实例:
参考1.5
在这里插入图片描述

1.7 常用样式-背景颜色

应用实例:bg.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: #ff7d44;
        }
    </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

1.8 常用样式-字体样式

  1. font-size: 指定大小,可以按照像素大小
  2. font-weight : 指定是否粗体
  3. font-family : 指定类型

应用实例 font-style.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小,可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
        }
    </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

1.9 常用样式-DIV 居中

应用实例:div-center.html
需求,修改 div-center.html, div 居中效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中显示</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小,可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
            4. margin-left margin-right 如果设置为auto, 表示左右居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div>hello world</div>
</body>
</html>

1.10 常用样式-文本居中

应用实例 text-center.html

需求,修改 text-center.html , 显示如下网页
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中显示</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小,可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
            4. margin-left margin-right 如果设置为auto, 表示左右居中
            5. 表示文本居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div>hello world</div>
</body>
</html>

1.11 常用样式-超链接去下划线

应用实例 link_none.html

需求,修改 link_none.html, div 居中效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接去掉下划线</title>
    <!--
        1. decoration 修饰
    -->
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">点击到百度</a>
</body>
</html>

1.12 常用样式-表格细线

应用实例 table-collapse.html

需求,修改 table-collapse.html, 实现如下效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <style type="text/css">
        /*
            设置边框 : border: 1px solid black
            将边框合并: border-collapse: collapse;
            指定宽度: width
            设置边框: 给 td, th 指定即可 border: 1px solid black;

            解读
            1. table, tr, td 表示组合选择器
            2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
         */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse; //边框合并
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td align=center colspan="3">星期一菜谱</td>
    </tr>

    <tr>
        <td rowspan=2>素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan=2>荤菜</td>
        <td>油闷大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉</td>
        <td>烤全羊</td>
    </tr>
</table>

</body>

</html>

1.13 常用样式-列表去修饰

应用实例:ul-none.html

需求,修改 ul_none.html, 完成如下网页显示
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修饰</title>
    <style type="text/css">
        ul {
            /*说明:list-style:none表示去掉默认的修饰*/
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>三国演义</li>
    <li>红楼梦</li>
    <li>西游记</li>
    <li>水浒传</li>
</ul>
</body>
</html>


1.14 CSS 使用三种方式

1.14.1 方式 1:在标签的 style 属性上设置 CSS 样式

应用实例

修改 1.use-css-style.html , 看使用效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在标签的 style 属性上设置CSS样式</title>
</head>
<body>
<div style="width: 300px;height: 100px;background-color: red">hello, 北京</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 上海</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 天津</div>
<br/>
</body>
</html>

问题分析:

  • 标签多了。样式多了,代码量庞大
  • 可读性差
  • CSS 代码没有复用性

1.14.2 方式 2:在 head 标签中,使用 style 标签来定义需要的 CSS 样式

应用实例

修改 2.use-css-style.html , 看使用效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在 head 标签中,使用 style 标签来定义需要的 CSS 样式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
        span {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

问题分析:

  • 只能在同一页面内复用代码维护不方便,
  • 实际项目中会有很多页面,需要到对应页面去修改。工作量大

在这里插入图片描述

1.14.3 方式 3:把 CSS 样式写成单独的 CSS 文件,再通过 link 标签引入

应用实例:

创建 test.css 和 修改 3.use-css-style.html

my.css

div {
    width: 200px;
    height: 100px;
    background-color: red;
}
span {
    border: 2px dashed blue;
}

3.use-css-style.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部的css文件</title>
    <!--
        1. rel : relation 关联
        2. href 表示要引入的css文件的位置,可以是web的完整路径
        3. type="text/css" 可以有,也可以不写
        4. 推荐使用第3种
    -->
    <link rel="stylesheet" href="./css/my.css" />
</head>
<body>
<div>hello, 北京~</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>
  • 第三种方式是我们推荐使用的

1.15 CSS 选择器

1.15.1 CSS 元素选择器

  1. 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
  2. CSS 元素/标签选择器通常是某个 HTML 元素, 比如 p、h1、a div 等
  3. 比如:
    在这里插入图片描述

应用实例:

修改 element-selector.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <!-- 
        说明:元素选择器会修饰所有的对应的元素
    -->
    <style type="text/css">
        h1{
            color: beige;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
<h1>你好</h1>
<h1>你好2</h1>
<h1>你好3</h1>
<p>hello, world~</p>
</body>
</html>

1.15.2 ID 选择器

  1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  2. id 选择器以 “#” 来定义。
  3. 比如:
    在这里插入图片描述

应用实例:

修改 id-selector.html, 演示使用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id 选择器</title>
    <!-- 
        解读
        1. 使用id选择器,需要先在要修饰元素指定id属性, id值是程序员自己指定
        2. id是唯一的,不能重复
        3. 在<style> 标签中指定id选择器时,前面需要有 #id值
    -->
    <style type="text/css">
        #hsp1 {
            color: gold;
        }
        #css2 {
            color: green;
        }
    </style>
</head>
<body>
<h1 id="hsp1">你好</h1>
<p id="css2">hello, world~</p>
</body>
</html>

1.15.3 class 选择器(类选择器)

  1. class 类选择器,可以通过 class 属性选择去使用这个样式
  2. 基本语法
    在这里插入图片描述

应用实例 :

修改 class-selector.html,演示如何使用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!-- 
    解读
    1. 使用class选择器,需要在被修饰的元素上,设置class属性,属性值程序员指定
    2. class属性的值,可以重复
    3. 需要在 <style></style> 指定类选择器的具体样式, 前面需要是 .类选择器名称
    -->
    <style type="text/css">
        .css1 {
            color: red;
        }
        .css2 {
            color: sandybrown;
        }
    </style>
</head>
<body>
<div class="css1">hello</div>
<div class="css1">hello8</div>
<p class="css2">hello, world~</p>
</body>
</html>

1.15.4 组合选择器

  1. 组合选择器可以让多个选择器共用同一个 css 样式代码
  2. 语法格式
    在这里插入图片描述

应用实例:

修改 all-selector.html, 演示如何使用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
            组合选择器的基本语法:
            选择器 1,选择器 2,选择器 n{ 属性:值; }
         */
        .class01,#id01 {
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="class01">hello</div>
<p id="id01">hello, world~</p>
</body>

</html>

1.15.5 优先级说明

行内样式 > ID 选择器 > class 选择器 > 元素选择器

1.16 CSS 课后练习题

测试链接:https://www.w3school.com.cn/quiz/quiz.asp?quiz=css
错题:
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

nodegui搭建/你好/打包

0、github连接问题 警告&#xff1a;如果你的网络有任何有任何有任何有任何有任何有任何有任何有任何有任何有任何连接 github 的问题&#xff0c;彻底放弃该框架 请转到其他框架 electron-egg教程、electron-egg官网&#xff0c;或其他electron项目 Tauri教程、Tauri官网 NW.…

Smartbi电子表格软件架构与差异化特色

选择和Excel结合Smartbi电子表格软件选择与Excel结合的原因在于&#xff0c;Excel一直被模仿&#xff0c;从未被超越。虽然市场上的报表软件很多&#xff0c;但存在太多的不完美。国外的产品功能复杂、难于学习&#xff08;控件方式&#xff09;&#xff0c;做不了中国式复杂格…

SpringBoot使用Redis实现分布式缓存

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

Matlab群体智能优化算法之巨型睡莲优化算法(VAO)

Matlab群体智能优化算法之巨型睡莲优化算法(VAO) 摘要&#xff1a;介绍一种新型智能优化算法&#xff0c;巨型睡莲优化算法。其应用于24个基准测试函数&#xff0c;并与其他10个著名算法进行了比较。提出的算法在10个优化问题上进行了测试&#xff1a;最小生成树、枢纽位置分配…

技术复盘(4)--docker

技术复盘--docker资料地址环境初始docker安装dockerdocker常用命令-都需要先启动dockerdocker容器打包为镜像docker坑docker卸载docker数据卷dockerFile构建过程搭建私有仓库--非图形化界面搭建私有仓库--图形化界面docker理论知识资料地址 docker官网&#xff1a;https://www…

一种供水系统物联网监测系统

1.1供水系统 1.1.1监测范围选择依据 &#xff08;1&#xff09;管网老化区域管网 管网建设年代久远&#xff0c;通常管网发生破损问题较大&#xff0c;根据管网本身属性和历史发生事件的统计分析&#xff0c;结合数理统计&#xff0c;优先选择管网老化区域的管段所在区域进行…

基于imx8m plus开发板全体系开发教程4:Linux系统开发

前言&#xff1a; i.MX8M Plus 开发板是一款拥有 4 个 Cortex-A53 核心&#xff0c;运行频率 1.8GHz;1 个 Cortex-M7 核心&#xff0c;运行频率 800MHz;此外还集成了一个 2.3 TOPS 的 NPU&#xff0c;大大加速机器学习推理。 全文所使用的开发平台均为与NXP官方合作的FS-IMX8…

深入浅出Kafka

这个主题 武哥漫谈IT &#xff0c;作者骆俊武 讲得更好 一、什么是Kafka&#xff1f; 首先我们得去官网看看是怎么介绍Kafka的&#xff1a; https://kafka.apache.org/intro Apache Kafka is an open-source distributed event streaming platform. 翻译成中文就是&#xff1…

Git分布式版本控制软件

1.什么是git git是分布式版本控制软件。 软件&#xff1a;git是从别的地方下载下来安装到我们电脑上的软件。 版本控制&#xff1a;跟毕业论文一样&#xff0c;先写好版本1然后交给导师&#xff0c;导师说不行&#xff0c;然后再改为版本2&#xff0c;然后循环下去&#xff0…

Su+ELK实现网络监测(2)——ELK安装与配置

ELK安装配置文档一、环境准备基础配置二、Jdk1.8环境部署1、安装jdk2、编辑环境变量三、ElasticSearch部署1、安装2、修改文件所有者3、修改配置文件4、启动四、elasticsearch-head部署&#xff08;可不安装&#xff0c;跳过&#xff09;1、nodejs安装2、head插件安装3、修改he…

智慧工厂可视化合集,推动行业数字化转型

图扑软件基于 HTML5&#xff08;Canvas/WebGL/WebVR&#xff09;标准的 Web 技术&#xff0c;满足了工业物联网跨平台云端化部署实施的需求&#xff0c;以低代码的形式自由构建三维数字孪生、大屏可视化、工业组态等等。从 SDK 组件库&#xff0c;到 2D 和 3D 编辑&#xff0c;…

软化水处理知识总结

软化水除了广泛应用在饮用、浴室、厨房、洗衣等生活用水&#xff0c;和酒店、学校、写字楼、公寓、餐饮等商业用水的处理&#xff0c;还可用于锅炉、交换器、蒸发冷凝器、空调、直燃机等系统的补给水的软化。 那什么是软化水&#xff0c;和除盐水、纯水有什么区别&#xff1f;…

大学物理第四单元:刚体

1.刚体的定轴转动 思考&#xff1a;改变转动状态的因素 答&#xff1a;改变刚体运动状态的的因素有力的大小及力臂有关&#xff0c;力与力臂的乘积为力矩。 力臂&#xff1a;力到转轴的距离 简而言之&#xff0c;改变刚体运动状态的因素是力矩&#xff0c;与力和力臂有关。 …

谷粒学院项目笔记第一部分

1.环境搭建&#xff0c;准备工作 &#xff08;1&#xff09;创建数据库 &#xff08;2&#xff09;创建项目完整结构 &#xff08;3&#xff09;父工程springboot,子工程maven &#xff08;4&#xff09;父工程pom设置版本&#xff0c;添加pom #版本 <version>2.2.1.R…

11个AI写作软件工具!知名4A广告公司蓝标宣布停止文案外包!

AI的这场熊熊大火&#xff0c;终于还是烧到了广告界&#xff01; 2023年4月12日&#xff0c;是一个再普通不过的日子&#xff0c;但这一天会被很多人记住。不是因为席卷整个华北区的漫天黄沙&#xff0c;而是因为一封代表着AI势不可挡的决心和象征着一个行业巨变拉开序幕的邮件…

学会 制作极简搜索浏览器 —— 并将 ChatGPT 接入浏览器

前期回顾 Vue3 Ts Vite pnpm 项目中集成 —— eslint 、prettier、stylelint、husky、commitizen_0.活在风浪里的博客-CSDN博客搭建VIte Ts Vue3项目并集成eslint 、prettier、stylelint、huskyhttps://blog.csdn.net/m0_57904695/article/details/129950163?spm1001.2…

采用D-K迭代设计不确定对象的鲁棒控制器(μ-controllers)

采用D-K迭代设计不确定对象的鲁棒控制器&#xff0c;将H∞综合(K步)与μ分析(D步)相结合&#xff0c;优化闭环鲁棒性能。 Step 1&#xff1a;利用H∞综合方法找到使标称系统闭环增益最小的控制器。 Step 2&#xff1a;进行鲁棒性分析&#xff0c;以估计闭环系统的鲁棒H∞性能。…

手把手kubernetes本地化部署(含疑难杂症排查解析)

文章目录一、什么是Kubernetes&#xff1f;二、Kubernetes的基本概念PodDeploymentServiceNamespaceConfigMapSecret三、Kuberntes单机本地部署3.1、安装minikube命令行工具3.2、安装docker3.3、启动minikube3.4、使用Dashboard3.5、异常问题解决3.5.1、提示Docker失败3.5.2、d…

迅为瑞芯微RK3568国产化实时操作系统,大容量内存

基于瑞芯微四核 64 位 Cortex-A55 ARMv8 架构处理器 RK3568&#xff0c;主频可达 2.0GHz&#xff0c;CPU 采用 22nm 制程工艺&#xff0c;动态调频调压技术&#xff0c;进一步放大能效比优势。 大容量内存 最大容量支持 8GB 内存&#xff0c;能够有效发挥处理器性能&#xff0…

服装标签二维码,要如何制作?含品牌案例

睡衣上的二维码标签、大衣的洗护说明二维码、衣服上的防伪二维码… 服装行业应用二维码&#xff0c;已经非常常见了。 服装行业中的二维码&#xff0c;不仅帮助品牌更好地展示产品信息、传播品牌影响力&#xff0c;更重要的是&#xff0c;通过这些服装二维码&#xff0c;直接优…