JavaWeb（day3）

最新推荐文章于 2025-07-28 17:03:50 发布
原创 最新推荐文章于 2025-07-28 17:03:50 发布 · 129 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了CSS的基本概念，包括层叠样式表的作用、三种引用方式及其优缺点，深入讲解了CSS样式的优先级、各种选择器的使用场景及格式，如标签名、ID、类、属性、派生、子元素、分组、伪元素和任意元素选择器。

###CSS 


- CSS Cascading 层叠 Style样式  Sheet表  层叠样式表，CSS技术用于美化html页面，html相当于建房子，css相当于装修房子。


###CSS的引用方式


1. 内联样式：在标签的内部，通过style属性添加css样式，弊端只能作用于一个元素，不能够复用。
     

<div style="color:red; border:1px solid blue ">我是一个div</div>
<span style="background-color:yellow">我是一个span</span>


2. 内部样式：通过一个Style标签引入css，可以在当前页面中进行复用，应用场景比内联要广，但是优先级内联要高，弊端是只能在当前页面中复用，工作中使用不多，工作中要把样式和html代码分离，但是学习过程中内部用的最多。
 

<style type="text/css">
        /* 通过选择器找到相对应的标签 把样式加到这个标签上  */
        div{
            color:pink;
            border:2px solid green;
        }
        span{
            background-color:purple
        }
        </style>


3. 外部样式：通过在head里面写link标签，把外部的样式文件引入

      

 <link rel="stylesheet" href="first.css"> 



###CSS样式优先级


- 内联样式的优先级最高
- 后执行的会覆盖前面执行的效果


###CSS的选择器


####标签名选择器
          标签名{
            样式代码1；
            样式代码2
        }
####id选择器
- 通过id找到相对应的标签（元素)
- 场景：当需要对页面中的某一个元素设置效果的时候选择id选择器
- 格式：#id{}

####类（class）选择器
- 通过标签的class属性值选择标签
- 场景：当页面需要给多个元素设置相同样式时使用类选择器
- 格式 .class{}

    

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <style type="text/css">
        #d2{
            color:red;
        }
        #d3{
            border:1px solid blue;
        }
        .s1{
            background-color: yellow;
        }
        .s2{
            background-color: green;
        }
        </style>
        </head>
        <body>
            div>div1</div>
            <div id="d2">div2</div>
            <div id="d3">div3</div>
            <span class="s1">s1</span>
            <span class="s2">s2</span>
            <span class="s1">s3</span>
            <span class="s2">s4</span>
            <span class="s1">s5</span>
            <span class="s2">s6</span>
        </body>
        </html>


####属性选择器
- 通过标签的属性名和值找到相对应的标签
- 场景：如果需要属性查找请使用
   

 /* 属性选择器 */
    input[type='text']{
        background-color: red;
    }
    input[type='password']{
        background-color: pink;
    }

    <input type="text"><br>
    <input type="password">



####派生选择器（后代选择器）
- 类似于一个路径，找到符合要求的标签匹配所有的后代（子元素 孙子元素...）

     

   /* 后代选择器  */
        #d1 .c1 span{
            color:red;
        }
        #d2 .c2 span{
            color: green;
        }


####子元素选择器
- 类似于一个路径，找到符合要求的标签 只匹配所有的子标签

        

/* 子元素选择器   */
        #d1>.c1>span{
            color: red;
        }
        .c2>span{
            background-color: green;
        }
        p span{
            background-color: blue;
        }


####分组选择器
- 如果需要对页面多种不相关的元素设置相同的样式，如果一个选择器搞不定，可以使用分组选择器把多组选择器通过，合并成一个

       

 /* 分组选择器  */
        ul li a, input[type="text"], .c1>p>span , h1{
            background-color: green;
        }



####伪元素选择器
- 用于选择元素的状态

  1. visited:访问过的状态
  2. link:未点击的而状态
  3. hover：鼠标悬停的状态
  4. active：鼠标点击时的而状态


- hover必须写在link和visited的后面，active必须写在hover的后面，按照下面的代码的顺序写即可。

<style type="text/css">
        /* 访问后的状态  */
            a:VISITED{
                color: red;
            }
            /* 未点击的状态  */
            a:LINK {
                color: yellow;
            }
            /* 鼠标悬停状态  */
                a:HOVER {
                    color: blue;    
                }
            /* 点击时的状态  */
                a:ACTIVE {
                color: pink;
        }
        </style>


####任意元素选择器
- 如果需要给页面所有元素天价相同的样式可以选择使用此选择器*{}

         

   *{
                border: 1px solid red;
            }
            html{
                border: 1px solid yellow;
            }
            body{
                border: 1px solid blue;
            }


##css中常用的属性


###元素的宽高
- width/height 只能修改块级元素的宽高，不能修改行内元素的宽高

###颜色赋值

  1. 通过颜色名称赋值 red yellow blue green pink purple...
  2. 通过6位16进制的方式赋值
  3. 通过3位16进制的方式赋值
  4. 10进制 通过rgb（255,0,0）
  5. 10进制 通过rgba（255,0,0,0-1） alpha 透明度 


       

         /* 1.通过颜色名称赋值  */
            background-color:blue;
         /* 2.6位16进制赋值 每两位表示一个颜色 红 绿 蓝 ff表示255 当前颜色的最大值*/
            background-color: #ff0000;
         /* 3. 3位16进制的赋值  */
            background-color: #ff0;
         /* 4. 10进制 通过rgb（255,0,0） */
            background-color: rgb(0,255,0);
         /* 5. 10进制 通过rgba（255,0,0,0-1） alpha 透明度 */
            background-color: rgba(0,0,255,0.6);



###背景图片

    

        border: 1px solid red;
        width:500px;
        height:500px;
        /* 添加背景图片  */
        background-image:url("../imgs/k.jpg");    
        /* 图片尺寸 */
        background-size:300px 300px;
        /* 不重复 */
        background-repeat:no-repeat;
        /* 控制图片位置 bottom底部 top顶部 center 中间  left 左边 right 右边   */
        background-position:center bottom;
        /* 通过百分比控制位置  */
        background-position:80% 30%;



### 布局相关属性（盒子模型）



####  一个元素在页面所占的宽度如何计算？

- 左外边距+左边框的宽度+左内边距+元素的宽度+右内边距+右边框的宽度+右外边距

#### 外边距指元素边框距离相邻元素或上级元素边框的距离

   

        /* 单独设置外边距  */
         margin-left:50p
         margin-top:50px;
        /* 批量设置外边距  */
         margin:50px;/* 上右下左都是50  */  
         margin :10px 30px;*/  /* 上下  左右 */
         margin :0px duto; */ /* 上下0 左右居中 */
         margin : 10px 20px 30px 40px; *//* 上右下左 顺时针  */


#### 行内元素左右边距生效 上下不生效

#### 两个相邻元素的上下外边距 取最大值，两个相邻元素的左右边距是左外+右外










 

崔希凡javaweb笔记day08-day13
11-09
3. **JDBC与数据库操作**：day10的笔记可能会介绍如何使用Java Database Connectivity (JDBC) API进行数据库连接、查询、插入、更新和删除等操作。学员可能学会了编写SQL语句和使用PreparedStatement以防止SQL注入。...
崔希凡JavaWeb笔记day19-day21
10-22
### 基于崔希凡JavaWeb笔记day19-day21的知识点提炼 #### 一、BaseServlet设计思想及实现 **知识点1：BaseServlet的设计背景与意义** - **背景**：随着项目的扩大，单一的`Servlet`类数量急剧增多，这不仅增加了...
Javaweb Day3
c____shen的博客
07-28 322
input type="button" id="btn1" value="事件绑定" onclick="on()"><input type="button" id="btn2" value="事件绑定2" >v-show 根据条件展示某元素，区别在于切换的是display属性的值。基于MVVM思想，实现数据的双向绑定，将编程的关注点放在数据上。事件：HTML事件是发生在HTML元素上的“事情"比如。v-for 列表渲染，遍历容器的元素或者对象的属性。条件性的渲染某元素，判断为true是渲染，否则不。
javaweb Day3
2401_88249193的博客
07-02 223
artifactId：定义当前Maven项目名称（通常是模块名称，例如 order-service、goods-service）groupId：定义当前Maven项目隶属组织名称（通常是域名反写，例如：com.itheima）通过设置坐标的依赖范围(scope)，可以设置对应jar包的作用范围：编译环境、测试环境、运行环境。3.定义坐标的 groupId，artifactId，version。2.default：核心工作，例如编译，测试，打包，安装等。IDEA 配置 Maven。Maven 中的坐标是。
Javaweb day3
shui_si_的博客
05-31 311
创建vue项目：在想要创建项目的文件夹输入cmd,在命令行输入vue ui，没有环境输入npx vue ui，打开vscode，点击终端，点击运行，选择npm serve。
黑马JAVAWeb Day3
CaiZijian2002的博客
10-25 1596
P34 Ajax介绍。
javaweb day3 day4 day5
weixin_74886522的博客
02-24 496
==会判断类型是否相同。
JavaWeb day3 MySQL约束
weixin_46468241的博客
08-09 173
MySQL约束
黑马Javaweb Day3 07-16
CaiZijian2002的博客
10-25 148
饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。P40 Element 快速入门。
javaweb day2
2201_75609739的博客
06-22 839
​ 单位：px像素、换行标签引入音频标签引入图片，src指定图片存储的位置建议宽度和高度只设置一个，另一个会等比例缩放<//* 元素选择器 *//*span{}*//* id选择器 *//*.cls{}*//* class选择器 */#timecolora/* 去除超链接下方的下划线 */;</</</</</</</</</</</</</</</</</</</</</</用于加粗展示文本内容用于加粗展示文本内容，有强调语义的倾斜字符实体;
javaweb day3重难点总结
ckx12138的博客
08-08 453
Servlet 转发与重定向 当前的地址 http://localhost:8080/web04/ 转发（地址变化） http://localhost:8080/web04/LoginServlet index.jsp -> loginservlet -> success.jsp 转发只访问了一次 重定向 http://localhost:8080/web04/fail.jsp 用户 -> index.jsp -> loginservlet 用户 -> fail.jsp 重
javaweb day1
2201_75609739的博客
06-21 543
HTML超文本标记语言，由标签名构成的语言。超文本：超越了文本的限制，比普通文本更强大，除了文字信息，还可以定义图片、音频、视频等内容。HTML所有的标签都是预定义好的。
崔希凡javaweb笔记day18-day23
11-09
3. **JSTL与EL表达式**（day20）：JSTL（JavaServer Pages Standard Tag Library）是一组标准标签库，用于简化JSP页面。EL（Expression Language）是用于获取和设置JavaBean属性的简洁表达式。在day20的笔记中，可能...
JavaWeb视频教程_day2-资料源码.rar_JavaWeb视频教程_javaweb
09-21
3. **AJAX（异步JavaScript和XML）**：在JavaWeb中，AJAX允许网页在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。它结合了JavaScript、XML、HTTP请求等多种技术，提升了用户体验。 4. **JavaScript...
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
MQTT.fx客户端详解[代码]
11-21
本文详细介绍了MQTT.fx客户端软件的下载、安装及使用方法。MQTT.fx是一款基于Eclipse Paho的MQTT客户端工具，使用Java语言编写，支持通过Topic订阅和发布消息，适用于与物理云平台的前期调试。文章从官方下载地址的选择开始，逐步指导用户完成32位或64位版本的下载，并详细描述了安装过程中的路径修改、图标创建等步骤。安装完成后，文章还介绍了软件的主界面及各功能设置界面，包括通用设置、用户信息设置、安全证书设置、网络代理设置、遗嘱设置以及申请License key的方法。
Mac版Java安装教程[项目源码]
11-21
本文提供了在Mac OS上安装JDK及配置环境变量的详细步骤。首先，从Oracle官网下载适合Mac OS的JDK安装包，根据芯片类型选择Arm 64或X64版本。下载完成后，双击安装并验证安装是否成功。接着，通过终端命令查询JDK安装路径并复制备用。然后，配置环境变量，包括检查或创建.bash_profile文件，并在其中添加必要的代码。最后，通过source命令使配置生效，并验证环境变量是否设置成功。整个过程详细且易于跟随，适合初学者。
PTA数组冒泡排序[源码]
最新发布
11-21
本文介绍了如何使用冒泡排序算法对给定的n个整数进行从小到大的排序，并输出每一趟排序的结果。输入格式为一个不超过20的正整数n和n个用空格分隔的整数，输出格式包括原始序列和随后n-1趟排序的结果。示例输入为5 4 3 2 1，输出展示了每一趟排序后的序列变化。文章还提供了C语言实现的代码示例，包括输入处理、排序逻辑和输出格式。
基于MATLAB的车辆出入库检测系统设计与实现
11-21
本资源为一项毕业设计成果，内容为运用MATLAB环境开发的车辆进出停车位检测系统。该设计在答辩环节获得95分的优秀评审成绩，所有程序代码均通过完整调试与功能验证，保证可正常执行。 此资源适用于计算机科学、电子信息工程、智能科学与技术及相关领域的在校学生、教师及行业技术人员参考使用，可作为课程实践、综合实验、毕业设计等多种教学场景的辅助材料。系统整体架构清晰，算法实现具有显著的参考价值，掌握基础开发能力的使用者可基于现有框架进行功能拓展与个性化调整。 本资源致力于提供学习交流平台，欢迎相关领域工作者下载研究，共同探讨技术实现方案。注：资源文件中不包含任何外部链接及联系方式。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
JavaWeb Day12教程：深入理解XML与JavaScript
从标题“day12_javaweb_javascript_day12-xml_energy7fo_”以及描述“自己学习使用的javaweb资源，大家可以看，只是day2的，后面还有很多”可以推断出，这是一个关于JavaWeb学习的资料包，它包含了与JavaWeb相关的多...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值