javaweb学习day02（CSS）

最新推荐文章于 2024-05-20 11:15:42 发布
最新推荐文章于 2024-05-20 11:15:42 发布
阅读量681 收藏 7
点赞数 5
分类专栏： 韩顺平javaweb 文章标签： 学习 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51580177/article/details/135846393
版权

一、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 优先级说明

菜菜小林然
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
java教程超全面javaweb教程28天day2- 02 css的简介
08-31
java教程超全面javaweb教程28天day2-_02_css的简介
javaweb学习day01
adser_user的博客
05-03 856
央视网
JavaWeb之day02css与js
weixin_34206899的博客
10-27 64
目录： 1、CSS概述和与HTML的结合方式（四种）(*******) 2、CSS的基本选择器(******) 3、CSS的扩展选择器(了解) 4、CSS的盒子模型(了解) 5、CSS的布局（浮动）(了解) 6、CSS的布局（定位）(了解) 7、图文混排案例(了解) ============================================= 1、javascrip...
javaWeb-day02-HTML&CSS
xingxing_LM的博客
01-14 113
1.表单标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--form:用于表示采集用户信息的范围 action:指定提交数据的url method：指定提交方式 *一共有7种2种比较常用 get
javaWEB学习日记day02
azure10492的博客
09-13 88
1.端口被占用:BindeException * 方式一: 找到占用的端口号,并且找到对应的进程,关闭该进程 * cmd -> netstat -ano 找到对应的PID,启动任务管理系统,找对应的PDID * 方式二:修改自身的端口号 * conf -> server.xml 修改配置文件信息 -> <connector> 修改端口号 _______________________________________________ 2.将项目部署到Tomca.
java教程超全面javaweb教程28天day2- 04 css的优先级
08-31
java教程超全面javaweb教程28天day2-_04_css的优先级
java教程超全面javaweb教程28天day2- 08 css的盒子模型
08-31
java教程超全面javaweb教程28天day2-_08_css的盒子模型
java教程超全面javaweb教程28天day2- 05 css的基本选择器
08-31
java教程超全面javaweb教程28天day2-_05_css的基本选择器
java教程超全面javaweb教程28天day2- 07 css的扩展选择器
08-31
java教程超全面javaweb教程28天day2-_07_css的扩展选择器
FME学习之旅---day27
summer_corner的博客
05-17 191
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1078
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
Page对象的学习
2301_77523055的博客
05-14 999
ASP.NET允许开发者创建自定义控件和用户控件来扩展页面的功能。自定义控件是从现有的ASP.NET控件派生出来的新控件，而用户控件则是将多个控件组合成一个可重用的单元。这些控件可以像其他ASP.NET控件一样在页面上使用，并通过Page对象进行交互。Page_Init主要用于在控件加载之前进行初始化设置和添加事件处理程序。Page_Load主要用于处理页面回发和加载数据，以及执行其他需要在页面加载时完成的逻辑。由于Page_Init在Page_Load之前触发，因此在Page_Init。
学习kong官方文档
好好学习日记
05-17 270
当然，我会用更简洁的方式重新解释这两个概念：Helm和Kubectl是Kubernetes生态系统中常用的两个工具，它们各自有不同的用途：
在学习uni-app过程中使用的css样式记录
最新发布
qq_34080064的博客
05-20 552
​在学习uni-app过程中，记录下使用的css样式，持续更新。
推荐系统学习笔记（一）
weixin_44880995的博客
05-15 143
同类策略（精排中的两种模型）天然互斥，并且（两条召回通道）效果会相互影响，避免干扰。反转：有的指标立刻影响，有的需要长期观测-------尽快推全也可以长期观测。10%作为holdout桶，实验使用剩余的90%，做diff（需要归一化）不同策略（添加召回通道，优化粗排模型）通常不会干扰，可以作为正交的两层。保留10%，完全不受实验影响，可以考察整个部门对业务指标的贡献。同层互斥----避免一个用户被两个实验影响。不同层正交----每层独立随机分配用户。推全：新层，与其他层正交，90%用户。
RustGUI学习（iced/iced_aw）之扩展小部件（十九）：如何使用context_menu部件来创建右击菜单？
用沸腾的热血，支付我们的人生吧！
05-15 65
本专栏是学习Rust的GUI库iced的合集，将介绍iced涉及的各个小部件分别介绍，最后会汇总为一个总的程序。iced是RustGUI中比较强大的一个，目前处于发展中（即版本可能会改变），本专栏基于版本0.12.1.
DB类的学习
2301_77523055的博客
05-15 364
"不返回结果集" 意味着执行 SQL 语句后，你不会得到一个可以逐行读取的数据集。相反，你可能会得到一个表示受影响的行数的整数，或者只是一个表示命令是否成功执行的确认。
docker学习和常用命令
OutRoading的博客
05-14 180
镜像仓库datahub。
javaweb学习系统
07-20
JavaWeb学习系统是一个用于学习和实践JavaWeb开发技术的在线教育平台。该系统通过提供丰富的学习资料、在线编程实践环境和互动交流平台，帮助学习者系统地学习并应用JavaWeb开发技术。 首先，JavaWeb学习系统提供了...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜菜小林然

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值