JAVA后端学习day02

最新推荐文章于 2024-05-17 13:43:01 发布
最新推荐文章于 2024-05-17 13:43:01 发布
阅读量218 收藏
点赞数 1
文章标签： java 学习 后端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56174646/article/details/127175876
版权

1、CSS样式

CSS：层叠样式嵌套，作用：用来美化界面

语法：属性名：属性值，......

2、CSS的引入方式

1、行内样式  2、内部样式  3、外部样式

（1）行内样式 

         内联样式：在标签中直接通过style属性设置样式的方式。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!--
      1、在标签上使用style属性对元素进行添加样式
      2、在style标签中添加样式
      语法：属性名：属性值；....

      在任何一个html标签都可以使用style属性

-->

     <span style="color:pink;font-size:30px">添加一段文字</span>

</body>
</html>

   （2）内部样式

  内部样式：可以在head标签中添加一个style标签进行定义样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
        <title>Document</title>
    <style>

     p{font-size：30px；
       background-color：pink；
      }
 
    </style>
</head>
  <body>

      <!--
      内部样式语法：
      1、在head中添加style
      2、在style标签中编写样式
          选择器{
                 属性名：属性值；
                 属性名：属性值；
                 ....
                }

       -->    
       <p>添加想要写的文字</p>
       <p>添加你想要对我说的话</P>
   </body>
</html>

   （3）外部样式

  就是将公用样式抽取到外部样式文件中（xx.css），在html页面通过link引用外部文件。

  语法：在head标签引用。

<!--首先就是在目录下建立文件夹 文件下要建立要以.css结尾 
在.css中我们点需要写规则 然后将规则在head下面就行。
link 在你所需要的文件中-->
<!--优先级问题 与引入顺序有关 后引入的会覆盖先引入的 就近原则  行内大于 内部样式和外部样式 就近原则-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部的css文件  href：css 文件的资源路径 rel：指定文件类型-->
    <link rel="stylesheet" href="css/01.css"> 这里就link了
</head>
<body>
    
 <!--
       外部样式：
             （1）创建一个.css文件
             （2）在css文件中编写属性
                  选择器{
                        
                        属性名：属性值；
                        属性名：属性值；
                        ....
               
                        }
                       
             （3）引入外部css样式（在head标签中添加link标签引入css）
  -->

    <P>翱翔</P>
    <P>飞翔</P>
    
</body>
</html>

    （4）样式优先级问题

 仔细看我们会发现 ，若将三个样式作为比喻 行内样式是一把刀，内部样式是一把剪子，外部样式，是一个指甲刀，同时拿三把武器去劫持，那请问谁对你的伤害最大呢。

 很明显是一把刀。也就是说 人要听对他伤害最大的武器从大到小是，行内样式大于内部样式和外部样式（内部样式和外部样式 可不一定哟）要遵循的原则就是就近原则。

    （5）CSS选择器

  CSS选择器从大方面分为：（1）简单选择器（2）层次选择器（3）伪类选择

（1）简单选择器：1、id选择器  2、class选择器  3、标签选择器  4、*选择器

  简单选择器

            1 id选择器

              在标签中添加id属性。

              在style标签中编写样式。

              语法：#id名称{属性名：属性值；......}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

 <style>

/* id选择器建议不多次使用 在标签中使用ID属性引用ID名称*/

#d1{
    color:orange;
    font-size: 40px;
}

</style>

</head>

<body>
   
<P id="d1">飞翔</P>

</body>
</html>

            2 class选择器

              在标签中添加class属性。

              在style标签中编写样式。

              语法：class名称{属性名：属性值；......}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

 <style>

/* 类选择器 使用.开头 可以多次使用 在标签中使用class属性引用c1名称 */
.c1{
    color:blue;
    font-size:35px;
}

</style>

</head>

<body>
   
<div class="c1">翱翔</div>

</body>
</html>

            3 标签选择器

           在style标签中编写样式。

           语法：标签名称{属性名：属性值；......}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

 <style>
/* p 标签 如果没有其他的东西 在body中的标签全会被弄成一种样式*/
/* id选择器>类选择器>标签选择器 */

p{
    color:red;
    font-size:20px;
}

span{
    backgound-color:#FF0000;
}

</style>

</head>

<body>
   
<P>测试</P>
<span>这是一个span标签</span>

</body>
</html>

          *选择器

          *选择器表示选择页面上所有元素（全局选择器）

           语法：*{属性名：属性值；......}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

 <style>

/* 全局选择器*/
*{
    font-size: 30px;
    color:orange;
}

</style>

</head>
<body>

<p>这是p标签</p>
<span>这是一个span标签</span>
<div>这是一个div标签</div>

</body>
</html>

           优先级顺序：id>class>标签>*

  层次选择器

         （1）后代选择器

           后代选择器指的是被选择的元素所有的后代 div span。 有点c++继承的味道了。

           语法：选择器1 选择器2  选择器3 {属性名；属性值......}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>

<style>
    
/* 后代选择器：包含子子孙孙*/
    .d1 .p1{
        color:aqua;
        font-size:30px；
    }

</style>
    
</head>

<body>
    <!--这里面不只是可应用标签，其他均可 例如我们应用 类   .c1 span{
                                                       color:aqua;
                                                        }-->
 <!-- 这样就可以 选择d1中的子子孙孙 -->
   <div class="d1">
   <p class="p1">这是div中的p标签</p>
  <div>
    <p class="p1">这是div中的p标签2</p>
  </div>
   </div>

   <div class="p1">
   <p class="p1">这是div中的p标签</p>
  <div>
    <p class="p1">这是div中的p标签2</p>
  </div>
   </div>

</body>

</html>

         （2）子代选择器

           子代选择器指的是被选择元素的所有子代（不包含孙子）div>span

           语法：选择器1>选择器2{属性名：属性值；......}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>

<style>
   
    /* 子选择器：只包含子代 不包含间接元素*/
    div>span{
    color:bisque;
    font-size:30px;
    }
</style>
    
</head>

<body>
    <!--子代选择器-->
 
  <div class="d1">
    <p class="p1">这是div中的p标签</p>
    <div>
       <p class="p1">这是div中的p标签2</p>
    </div>
  </div>
</body>

</html>

  伪类选择器

          语法：元素：伪类名称{属性名：属性值；......}  

          a:link 未被单击时 默认状态

          a：hover 悬浮状态

          a：active 激活状态

          a：visited 单击过后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*默认状态 目前 去下划线 换个颜色*/
       
       a:link{ /*超链接初始状态*/
            text-decoration:none;
            color:aqua;
        }
      
        /* 鼠标悬浮*/
        a:hover{ /*鼠标放上去的状态*/
            text-decoration:underline;
            color:yellow;
        }
       
        /*激活状态*/
        a:active{ /*鼠标点击不松开的状态*/
            color:green;
        }

         /*访问过后*/
        a:visited{ /*超链接点击之后的状态*/
            color:pink;
        }
        
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
</body>
</html>

CSS的属性

          （1）文字属性:  font

           文字大小：font-size

           文字字体：font-family

           文本样式：font-style（italic/normal）

           文字加粗：font-weight（bold/bolder 300px）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
              font-size：30px;

              font-family: 宋体;

              font-style:italic;

              font-weight:bold;
             }
     </style>
</head>
<body>
   <span>这是一句话......</span>
</body>
</html>

          （2） 文本属性 

           文本颜色：color

           文本对齐方式：text-align

              （1）center：居中对齐

           文本装饰：text-decoration

              （1）line-through 删除线

              （2）underline  下划线

              （3）none 去除装饰

           文本行高：line-height

                 将行高和容器是高度设置一样可以实现垂直居中

           字符间距：letter-spacing

           文本阴影：text-shadow 语法： text-shadow 5px 10px 8px red

           参数1：横向偏移量

           参数2：纵向偏移量

           参数3：阴影模糊程度

           参考4：阴影颜色

WangFengCong
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
springboot学习笔记day13.xmind
04-21
springboot学习笔记day13.xmind
springboot学习笔记day12.xmind
03-30
springboot学习笔记day12.xmind
Java后端学习DAY11
2302_76786736的博客
04-24 91
反转字符串替换数字翻转字符串中的单词选择字符串。
java后端学习DAY04
2302_76786736的博客
04-12 273
JAVAGUIDE：java基础常见面试总结（上）
Java后端实现Excel导出，及添加Excel文件标题样式
weixin_43992507的博客
12-07 6610
简单Java实现Excel文件导出 Java导出要在action层（controller层）中操作 需要到的jar包： 、 后端代码： /** * 导出房产信息 * @param fcHouseProMain * @param request * @param response * @param redirectAttributes * @return */ @Req...
10 万字节Spring Boot +redis详细面试笔记(带完整目录)全新开源
2401_84102400的博客
04-13 176
本文从基础到高级再到实战，由浅入深，把MySQL讲的清清楚楚，明明白白，这应该是我目前为止看到过最好的有关MySQL的学习笔记了，我相信如果你把这份笔记认真看完后，无论是工作中碰到的问题还是被面试官问到的问题都能迎刃而解！MySQL50道高频面试题整理：网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024b （备注Java）一个人可以走的很快，但一群人才能走的更远！
java引入css样式_引入样式表(css)的四种方式
weixin_39617215的博客
03-02 810
一、使用STYLE属性： 将STYLE属性直接加在个别的元件标签里。例如：这种用法的优点 是可灵巧应用样式於各标签中，但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签： 将样式规则写在...标签之中。例如：通常是将整个的 ...结构写在网页的 部份之中。这种用法的优点就是在於整篇文件的统一性，只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签...
springboot学习笔记day11.xmind
03-11
springboot学习笔记day11.xmind
java自学笔记day2
02-12
java自学笔记day2
spring-day02
05-25
spring-day02
Java后端学习DAY01
2302_76786736的博客
04-09 88
对着答案写了一遍，理解了思想。暴力解法：用时38分钟。1.leetcode刷题2道。（1）长度最小的子数组。
java后端学习DAY12
2302_76786736的博客
04-25 139
KMP算法、滑动窗口算法。常见异常、自定义异常。
css样式学习
Ting1king的博客
06-21 146
文章目录样式表：内联样式(行内样式)嵌入式样式表（页内样式）外部样式选择器元素选择器类选择器ID选择器包含选择器并列选择器全后代选择器直接后代选择器超链接定位属性 样式表： 内联样式(行内样式) 属性名为style 举例:<p style=“”></p> 嵌入式样式表（页内样式） <style type=“text/css”> p{} </style> 外部样式 不需要style标签 <link rel=“stylesheet” href=“” /
java后台设置样式_前台控制后台方法来控制样式。
weixin_33622555的博客
02-16 384
方法一：前台控制后台方法来控制样式。#region 判断是否创建人等于登录人/// /// 判断创建人是否为登录人，假如是前台显示修改，否则显示浏览;/// protected string Judge(object obj,bool flay){if (obj != null && obj.ToString() == UserInfo.UserOrganizationNO){re...
jar包增量更新分析
junlaiyan的专栏
05-16 245
借助jdeps分析出jar包的增量文件
java实现拼图小游戏
monkey108的博客
05-16 610
本文主要提供用java实现的拼图小游戏源代码。
c【语言】了解指针，爱上指针（1）
yzqy_的博客
05-16 896
在计算机中，数据是存储在内存中的，cpu从内存中读取数据，为了方便读取数据，内存又被划分为了一个个的内存单元，一个内存单元的大小就是一字节，一字节等于8bit位，我们给内存进行编号，这个编号就是地址，在c语言中给这个地址起了个名字。是的，亲爱的读者你肯定发现了，&a、p和pc输出的地址是一样的,但&a+1与p+1输出的地址是一样的00EFF940，一次都跳过了4字节，而pc+1输出的却是00EFF93D，一次只跳过一个字节。但是硬件与硬件之间是相互独立的，这该如何实现数据传输呢？”答案当然是否定的。
命令执行漏洞（二）
XLbb的博客
05-15 896
POST方法，S2-045-bypass-2漏洞存在！,程序更改为S2-045-bypass-2漏洞测试模式, 响应码: 200。POST方法，S2-046-bypass漏洞存在！POST方法，S2-045-bypass漏洞存在！POST方法，S2-046-1漏洞存在！POST方法，S2-046-2漏洞存在！POST方法，S2-046-3漏洞存在！POST方法，S2-045-1漏洞存在！POST方法，S2-045-3漏洞存在！POST方法，S2-045-2漏洞存在！POST方法，S2-045-4漏洞存在！
java数据结构与算法(验证二叉搜索树)
最新发布
磐门的博客
05-17 242
节点返回空为ture,节点的值不在对应数据大小范围内返回false。将验证二叉搜索树计算同样可以转换为相同子问题，所以比较适合用递归。node为root的左节点时，max更新为root.val。node为root的右节点时，min更新为root.val。
Java 后端 Calendar 设置本月26号
06-14
好的，以下是Java后端设置Calendar应用程序中本月26号日期的代码示例： ```java import java.util.Calendar; public class Main { public static void main(String[] args) { Calendar calendar = Calendar....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值