javaweb学习day02（CSS）

news2025/3/15 11:20:02

一、CSS介绍

1 官方文档

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • 地址: https://www.w3school.com.cn/css/index.asp
  • 离线文档: W3School 离线手册(2017.03.11 版).chm

2 为什么需要 CSS 

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

3 CSS 快速入门 

应用实例 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 元素进行样式的指定
    4. width: 300px(属性); 表示对 div 样式的具体指定, 可以有多个
    5. 如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上
    6. 当运行页面时，div 就会被 div{} 渲染，修饰
-->
    <style type="text/css" >
        div{
            width: 300px;
            height: 100px;
            background-color: beige;

        }

    </style>
</head>
<body>
        <div>hello, 北京</div>
        <br/>
        <div >hello, 上海</div>
        <br/>
        <div>hello, 天津</div>
        <br/>
        <div>hello, 深圳</div>
        <br/>
</body>
</html>

 4 CSS 语法

  • CSS 语法可以分为两部分： (1)选择器 (2)声明 
  • 声明由属性和值组成，多个声明之间用分号分隔 
  •  最后一条声明可以不加分号(建议加上)
  • 一般每行只描述一个属性
  • . CSS 注释：/*注释内容*/, 类似 java 

二、常用样式

1 字体颜色

  • 颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <!--    说明:
    颜色可以写颜色名 比如 green，
    也可以写 rgb 值 比如 rgb(200,200,200)
    和十六进制表示值 比如 #708090
    color: rgb(255, 222, 1); //color: #ff7d44; //color: red;-->
    <style type="text/css">
        /*有三种方式，指定颜色
        1. 英文
        2. 16 进制 #ff7d44 [使用最多]
        3. 三原色 rgb(1,1,1)
        */
        div{
            color: #ff7d44;
        }
    </style>
</head>
<body>
    <div>林然</div>
</body>
</html>

2 边框 border

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 100px;
            border: 6px solid blue ;
        }
    </style>
</head>
<body>
    <div>林然</div>
</body>
</html>

3 宽度 width/高度 height 

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

4 背景颜色 

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

 5 字体样式

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

6 DIV 居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div 居中</title>
    /*
    说明:
    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否是粗体
    3. font-family : 指定字体类型
    4.margin-left和margin-right设置为auto，则为左右居中
    */
    <style type="text/css">
        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>林然</div>
</body>
</html>

 7 文本居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本 居中</title>
    /*
    说明:
    1. font-size: 指定大小，可以按照像素大小
    2. font-weight : 指定是否是粗体
    3. font-family : 指定字体类型
    4.margin-left和margin-right设置为auto，则为左右居中
    */
    <style type="text/css">
        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>林然</div>
</body>
</html>

 8 超链接去下划线

<!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>

 9 表格细线

<!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>

10 列表去修饰

<!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>

三、CSS 使用三种方式

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

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

 

2 在 head 标签中，使用 style 标签来定义需要的 CSS 样式 

<!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/>
        <div >hello, 天津</div>
        <br/>
        <div>hello, 深圳</div>
        <br/>
        <span>hello, span</span>
</body>
</html>

 

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>把 CSS 样式写成单独的 CSS 文件，再通过 link 标签引入</title>
    <!--link 标签专门用来引入 css 样式代码-->
    <!-- rel:relation 关联
        href 表示要引入的css文件的位置，可以是完整的web的路径
       -->
    <link rel="stylesheet" type="text/css" href="./css/my.css">
</head>
<body>
    <div>hello, 北京~</div>
    <br/>
    <div>hello, 上海</div>
    <br/>
    <span>hello, span</span>
</body>
</html>
div{
    width: 200px;
    height: 100px;
    background-color: brown;
}
span{
    border: 2px dashed blue;
}

四、CSS 选择器

1 元素 选择器

 2 ID 选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式 
  • id 选择器以 "#" 来定义
  • id选择器只能特定选择一个

3 class 选择器 

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

 4 组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">教育</div>
    <p id="id01">hello, world~</p>
</body>
</html>

5 优先级说明

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

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

相关文章

【LeetCode: 429. N 叉树的层序遍历 + BFS】

【LeetCode: 429. N 叉树的层序遍历 + BFS】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
作业帮 x TiDB丨多元化海量数据业务的支撑

作业帮 x TiDB丨多元化海量数据业务的支撑

导读 作业帮是一家成立于 2015 年的在线教育品牌&#xff0c;致力于用科技手段助力教育普惠。经过近十年的积累&#xff0c;作业帮运用人工智能、大数据等技术&#xff0c;为学生、老师、家长提供学习、教育解决方案&#xff0c;智能硬件产品等。随着公司产品和业务场景越来越…
阅读更多...
【Linux】Framebuffer 应用

【Linux】Framebuffer 应用

# 前置知识 LCD 操作原理 在 Linux 系统中通过 Framebuffer 驱动程序来控制 LCD。 Frame 是帧的意思&#xff0c; buffer 是缓冲的意思&#xff0c;这意味着 Framebuffer 就是一块内存&#xff0c;里面保存着一帧图像。 Framebuffer 中保存着一帧图像的每一个像素颜色值&…
阅读更多...
使用cockpit安装kvm虚拟机

使用cockpit安装kvm虚拟机

下载管理虚拟机的插件 如果安装完成之后&#xff0c;出现报错&#xff0c;则刷新。如下图所示 添加虚拟网桥 进入添加网桥之后&#xff0c;名称自己修改&#xff0c;端口设置为自己的网卡名称。 之后返回xshell之后再次查看ip地址就会出现 添加镜像到物理机的根目录下 将系统…
阅读更多...
MATLAB离线文档安装

MATLAB离线文档安装

MATLAB离线文档安装 来源于最全matlab安装离线文档教程只是对内容进行了精简&#xff0c;同时更方便查找 一、下载离线文档 我上传的2023b离线文档 提供本体属于违规行为&#xff0c;本体下载链接已删除 为方便已安装好软件的朋友想安装离线帮助文档&#xff0c;由于官网下载…
阅读更多...
【数据结构】18 二叉搜索树（查找，插入，删除）

【数据结构】18 二叉搜索树（查找，插入，删除）

定义 二叉搜索树也叫二叉排序树或者二叉查找树。它是一种对排序和查找都很有用的特殊二叉树。 一个二叉搜索树可以为空&#xff0c;如果它不为空&#xff0c;它将满足以下性质&#xff1a; 非空左子树的所有键值小于其根节点的键值非空右子树的所有键值都大于其根结点的键值左…
阅读更多...
循环、数组、match

循环、数组、match

for循环 循环&#xff1a;周而复始 For&#xff08;临时变量&#xff1b;循环条件&#xff1b;腰间变更&#xff09;{ 循环体 } For循环可以嵌套 while循环 声明变量 While&#xff08;条件&#xff09;{ 循环体 变量的变化} do while循环 do{ 执行语句&#xff1b; …
阅读更多...
五、ActiveMQ的Broker(嵌入到java程序)

五、ActiveMQ的Broker(嵌入到java程序)

ActiveMQ的Broker 一、是什么二、Java应用嵌入ActiveMQ1.pom.xml2.borker实现3.生产者4.消费者 一、是什么 Broker相当于一个ActiveMQ服务器实例实现了用代码的形式启动ActiveMQ将MQ嵌入到Java代码中&#xff0c;以便随时用随时启动&#xff0c;在用的时候再去启动这样能节省了…
阅读更多...
【前端工程化面试题】如何优化提高 webpack 的构建速度

【前端工程化面试题】如何优化提高 webpack 的构建速度

使用最新版本的 Webpack 和相关插件: 每个新版本的 Webpack 都会带来性能方面的改进和优化&#xff0c;因此始终确保你在使用最新版本。同时&#xff0c;更新你的相关插件也是同样重要的。 使用DllPlugin动态链接库: 使用DllPlugin和DllReferencePlugin来将第三方库的代码进行…
阅读更多...
L2-021 点赞狂魔

L2-021 点赞狂魔

一、题目 二、解题思路 统计每个人点赞的不同标签的数量&#xff1a;每行列出一位用户的点赞标签&#xff0c;这些标签可能有重复的&#xff0c;所以将用户的点赞标签存放在 set 里&#xff0c;通过 size() 函数获得点赞的不同标签的数量&#xff1b;结构体包括用户的信息&…
阅读更多...
如何打开Windows 10及更低版本系统的控制面板？这里提供详细步骤

如何打开Windows 10及更低版本系统的控制面板？这里提供详细步骤

Windows中的控制面板是一组小程序，有点像小程序，可以用来配置操作系统的各个方面。 例如，“控制面板”中的一个小程序允许你配置鼠标指针的大小（以及其他内容），而另一个则允许你调整所有与声音相关的设置。 其他小程序可用于更改网络设置、设置存储空间、管理显示设置等…
阅读更多...
TIM编码器接口（编码器测速）

TIM编码器接口（编码器测速）

定时器编码器接口自动计次--------->对应手册14.3.12编码器接口模式 应用场景&#xff1a; 电机控制PWM驱动电机&#xff0c;编码器测电机速度&#xff0c;PID算法闭环控制 ------------------------------------------------------------------------------------------…
阅读更多...
lv15 I2C背景知识（裸机I2C、linux对I2C支持、MPU6050）4

lv15 I2C背景知识（裸机I2C、linux对I2C支持、MPU6050）4

一、I2C总线背景知识 SOC芯片平台的外设分为&#xff1a; 一级外设&#xff1a;外设控制器集成在SOC芯片内部 二级外设&#xff1a;外设控制器由另一块芯片负责&#xff0c;通过一些通讯总线与SOC芯片相连 Inter-Integrated Circuit&#xff1a; 字面意思是用于“集成电路之…
阅读更多...
在面试中，如何回复擅长 Vue 还是 React

在面试中，如何回复擅长 Vue 还是 React

目录 一、Vue.JS 二、React 三、Vue和React的区别 四、前端开发框架 一、Vue.JS Vue.js&#xff08;通常简称为Vue&#xff09;是一个用于构建用户界面的开源JavaScript框架。它采用了MVVM&#xff08;Model-View-ViewModel&#xff09;的架构模式&#xff0c;通过数据驱动…
阅读更多...
74HC373使用方法

74HC373使用方法

74HC373属于D锁存器 OC&#xff1a;输出控制&#xff0c;低电平输出使能 LE&#xff1a;锁存使能输入&#xff0c;低电平直通&#xff0c;高电平锁存 Q&#xff1a;数据输出引脚 D&#xff1a;数据输入引脚
阅读更多...
[VulnHub靶机渗透] Fowsniff

[VulnHub靶机渗透] Fowsniff

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…
阅读更多...
外包干了3个多月，技术退步明显。。。。

外包干了3个多月，技术退步明显。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近3年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…
阅读更多...
linux 网络服务小实验

linux 网络服务小实验

实验图和要求&#xff1a; 1&#xff09;网关服务器&#xff1a;ens36&#xff1a;12.0.0.254/24&#xff0c;ens33&#xff1a;192.168.44.254/24&#xff1b;Server1&#xff1a;192.168.44.20/24&#xff1b;PC1和Server2&#xff1a;自动获取IP&#xff1b;交换机无需配置。…
阅读更多...
[职场] 优质简历怎么做 #学习方法#笔记

[职场] 优质简历怎么做 #学习方法#笔记

优质简历怎么做 简历是求职的“敲门砖”&#xff0c;直接影响着求职成败。然而&#xff0c;不少求职者对简历不太重视&#xff0c;认为简历就是写自己的经历。因此&#xff0c;在招聘现场&#xff0c;常会看到这样的简历&#xff1a;有的是从某招聘网站直接下载而来&#xff0c…
阅读更多...
基于SFLA算法的神经网络优化matlab仿真

基于SFLA算法的神经网络优化matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 SFLA的基本原理 4.2 神经网络优化 5.完整程序 1.程序功能描述 基于SFLA算法的神经网络优化。通过混合蛙跳算法&#xff0c;对神经网络的训练进行优化&#xff0c;优化目标位神经网络的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023