编程语言Java学习02之CSS

已于 2022-01-23 23:42:12 修改
阅读量96 收藏
点赞数 1
分类专栏： JAVA学习路线 文章标签： java css java
于 2021-11-28 19:43:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KeyichenCRAZY/article/details/121596263
版权
·一.选择器（技术咨询vx:keyichen_free)
1.1html
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
      <style>
             h1{                                  
                  color:red;
                }
       </style>
</head>
<body>
         <h1>学java</h1>
         <p>听</p>
</body>
</html>
1.2CSS的4种导入方式

内部样式；

/*第一种*/
<h1 style = "color:red">内容</h1>;

/*第二种*/
<style>
	  h1{
         color:red;
	     }
</style>

外部样式；

/*在外部编写的代码*/
<style>
   h1{
       color:red;
      }
</style>
/*在内部编写的代码*/
<link rel = "stylesheet" href = "css/style.css">     /*href = "文件名"*/
1.3三种基本的选择器（重点）

作用：选择页面上面的某一个元素

基本选择器：

  1. 标签选择器
  2. 类选择器 class
  3. id 选择器
<!DOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       
      <style>
               h1{                               /*1.标签选择器，自动改变这个页面所有h1变迁的字体颜色*/
                              color:red;
                   }
               .qiang{                          /*2.类选择器，可以使这个页面class的改*/变，跨标签

                  }
               #wo{                             /*3.id选择器，必须保证全局唯一*/
                  
                  }
       </style>
</head>
<body>
  
<h1 class = "qiang" id = "wo">学java</h1>
<h1 class = "qiang">学JAVA</h1>
<p>听</p>

</body>
</html>

/*优先级：id > class > 标签选择器
1.4层次选择器（四种）
  1. 后代选择器：
body p{
       background:  red;
       }

2.子悬选择器

 body>p{
        background:red;
        }

3.相邻选择器

.active+p{                    /*只有p2颜色发生改变*/
          background:  red;
          }

4.通用选择器

.active~p{                 /*用class~来表示，active下面的所有同级的都变化*/
        background:red;
}

例：
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
      <style>
             body p{
                    background: red;
                   }
             body>p{
                    background:red;
                    }
             .active + p{               /*只有p2颜色发生改变，只有下面相邻的一个*/
                     background:   red;
                   }
             .active~p{                 /* 与p相邻同级且在p下面的所有改变*/
                  background: red;
              }
      </style>
</head>
<body>
           <p class = "active">p1</p>   
           <p>p2</p>
           <p>p3</p>
            <ul>
                <li>
                     <p>p4</p>
                </li>
                <li>
                      <p>p5</p>
                </li>       
                <li>
                      <p>p6</p>
                </li>

</body>
</html>
1.5结构伪类选择器

（会用到的四种）


/*ul的第一个子元素*/
ul li:first-child{
         background:red;
         }
/*ul的最后一个子元素*/
ul li:last-child{
}
/*选中p1：定位到父元素，选择当前的第一个元素，选择当前p元素的父级元素,且是当前元素才能生效！顺序*/
p:nth-child(1){
           }
/*选中父元素下的p元素的第二个，类型*/
p:nth-of-type{
}

例：
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       /*避免使用id 和 class 选择器*/ 
      <style>
       /*ul的第一个子元素*/
            ul li:first-child{
                 background:red;
            }
      /*ul的最后一个子元素*/
            ul li:last-child{
            }
      /*选中p1：定位到父元素，选择当前的第一个元素，选择当前p元素的父级元素,且是当前元素才能生效！顺序*/
           p:nth-child(1){
           }
        /*选中父元素下的p元素的第二个，类型*/
           p:nth-of-type{
          }
      </style>
</head>
<body>
           <p class>p1</p>   
           <p>p2</p>
           <p>p3</p>
           <ul>
                <li>p4</li>
                <li>p5</li>       
                <li>p6</li>
</body>
</html>
1.6属性选择器（重要)

1.属性名

a[id]{
      background: red;
      }

2.属性名加属性值

a[id=first]{      
          }

3.带有某种元素

a[class*= link]{   
          }

4.以上面开头，以上面结尾

a[href^= http]{     
          }

开头的：^=
结尾的：$=

例：

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       /*避免使用id 和 class 选择器*/ 
      <style>
       /*存在id的元素     a[]{}*/
          a[id]{
               background: red;
          }
       /*属性名=属性值*/
          a[id=first]{
               
          }
      /*  class中带有某种links的属性*/
      /* *= 是包含这个元素，= 是绝对等于*/
      /*只要class中带有link的都会随之改变*/
          a[class*= link]{
               
          }
      /*选中href中以http开头的元素*/
           a[href^= http]{
               
          }
      </style>
</head>
<body>

<p class = "demo">
      <a href = "http://www.baidu.com" class = "link item" id = "first">1</a>
</body>
</html>
二.美化网页的元素
2.1字体样式

span: 约定熟成的，用来表示重要突出的字，使用span套起来

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       
      <style>
/*
        font-famoily:     字体类型
        font-size:        字号
        font-weight:      字体粗细
*/
      body{
          font-famoily:楷体;
          font-size:
          font-weight: 
      }
      body{
          font:obligue lighter 16px 楷体;
      }
      </style>
</head>
<body>


</body>
</html>
2.2文本样式

  1. 颜色

  2. 文本对齐的方式

  3. 首行缩进

  4. 行离 line-height 单行文件上下对齐ww

  5. 装饰 : text-decoration

  6. 文本图片水平对齐： vertical-align:middle;

颜色：       
      <style>
         /*
             单词
             rgb
             rgba
         */
         body{
         color: rgb(  ,    ,);
         color: rgba(   ,   ,   ,0 ~ 1);    /*透明度*/
         }
</style>

文本对齐的方式:
<style>
        body{
        text-align:left;    /*排版*/
        }
</style>

首行缩进：
<style>
        body{
        text-indent:2em;    /*首行缩进2格，px是指像素*/
        height:300px;
        line- height:300px; /*行高和块的高度一致的时候就可以实现上下居中*/
        }
</style>
2.3文本阴影和超链接伪类

伪类：

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
       <style>
       /*默认的颜色*/
       p{
            
       }
       /*鼠标悬停的颜色*/
       p：hover{
            
       }
       /*鼠标未激活的颜色*/
       p：active{
            
       }

       </style>
</head>
<body>
    
<p> hhel</p>

</body>
</html>

阴影:

<style>
       body{
       text-shadow       /*text-shadow:阴影颜色，水平偏移，s
       }
</style>
2.4列表
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*ul li
list-style:
     none:去掉原点
     circle:空心圆
     decimal:数字
*/
ul li{
     height:30px;
     list-style:none;
}

</style>

</head>
<body>
<ul>
   <li href= "#">hello</li>
   <li href= "#">hello</li>
   <li href= "#">hello</li>
</ul>
</body>
</html>
2.5背景

背景颜色

背景图片

<style>

div{
     width:
     height:
     background-image url("images/tx.jpd");/*默认是全部平铺*/
}
.div1{
     background-repeat:repeat-x;/*水平平铺*/
}
.div2{
     background-repeat:repeat-x;/*竖直平铺*/
}
.div3{
     background-repeat:no-repeat;/*不平铺*/
}
</style>

.title{
     /*颜色  图片 图片位置    平铺方式*/
    background: red url("../image/d.gif") 270px 10px no-repeat;
}
2.6渐变
三.盒子模型
3.1什么是盒子

img

margin:外边距

padding:内边框

border:边框

3.2边框

1.边框的粗细

2.边框的样式

3.边框的颜色

<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
    #box{
          width:200px;
          border:粗细，样式，颜色;
          margin:0 auto;  /*上下左右*/
    }
div:nth-of-type(1)>input{
     border:3px solid black;       /*solid 实线 dash 虚线*/
}
</style>

</head>
<body>

<div id="app">
    <h2>会员登陆</h2>
    <form action= "#">
       <div>
          <span>姓名</span>
          <input type="text">
       </div>
       <div>
          <span>姓名</span>
          <input type="text">
       </div>
       <div>
          <span>姓名</span>
          <input type="text">
       </div>
    </from>
</div>

</body>
</html>
3.3盒子的计算

决定一个元素的大小：

margin + border + padding + 内容

3.4圆角边框
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*        圆圈：半径 = 圆角
*/
 div{
     width: 100px;
     height: 100px;
     border: 10px solid red;
     border-radius: 10px;     /*设置圆角边框*/
}
</style>

</head>
<body>

<div >
    
</div>

</body>
</html>
3.5阴影
四.浮动
4.1.标准文档流

块级元素：独占一行

行内元素：不独占一行

span a image ..

行内元素可以被包含在一行，块级元素不可

4.2.display
<!DoOCTYPE html>
<html lang = "en">
<head>
       <meta charset = "UTF-8">
       <title>Title</title> 
<style>
/*
             block :块内元素
             inline:行内元素
             inline-block:
             none:
*/
 div{
     width: 100px;
     height: 100px;
     border:
     display:inline-block:
       
}
</style>

</head>
<body>

<div >
    
</div>
<span>
</span>

</body>
</html>
4.3.float
float: left
float: right
4.4父级元素塌陷问题

clear:

clear:left;     /*左边不允许有浮动元素*/
clear:right;    /*右边不允许有浮动元素*/
clear:both;    /*两边不允许有浮动元素*/

解决方法：

1.增加父级元素的高度

2.增加一个空的div元素来清除(但是代码中尽量避免空的div)

3.overflow

/*在父级元素中增加一个：*/
overflow:scroll;    /**产生了滚动条*/

overflow:scroll; /*产生了滚动条/

4.在父类中增加一个伪(推荐)

#father:after{
     content:'';
     display:block;
     clear:both;
}
4.5对比

display:

无法确定元素的位置，方向不可控制

float:

可以改动元素的位置，会同理标准文档流，但是要解决父级塌陷的问题

五.定位
5.1相对定位
position: relative;

bottom
top
left
right

发生相对定位依然在标准文档流

5.2绝对定位
position: absolute

1.没有父级元素的情况下，是基于浏览器定位

2.相对于父级元素定位

3.在父级元素范围内移动

（不在标准文档中，原位置变化）

5.3固定定位
5.4z-index

层次

5.5opacity

许有浮动元素*/
clear:right; /右边不允许有浮动元素/
clear:both; /两边不允许有浮动元素/




解决方法：

1.增加父级元素的高度

2.增加一个空的div元素来清除(但是代码中尽量避免空的div)

3.overflow

```css 
/*在父级元素中增加一个：*/
overflow:scroll;    /**产生了滚动条*/

overflow:scroll; /*产生了滚动条/

4.在父类中增加一个伪(推荐)

#father:after{
     content:'';
     display:block;
     clear:both;
}
4.5对比

display:

无法确定元素的位置，方向不可控制

float:

可以改动元素的位置，会同理标准文档流，但是要解决父级塌陷的问题

五.定位
5.1相对定位
position: relative;

bottom
top
left
right

发生相对定位依然在标准文档流

5.2绝对定位
position: absolute

1.没有父级元素的情况下，是基于浏览器定位

2.相对于父级元素定位

3.在父级元素范围内移动

（不在标准文档中，原位置变化）

5.3固定定位
5.4z-index

层次

5.5opacity
KeyichenCRAZY
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
为什么我心中TOP1的编程语言是Java？我为什么选择Java？
zhangxia_的博客
06-27 1万+
作为一名技术人员，我心中的 Top 1 编程语言是 Java。Java 在众多编程语言中脱颖而出，有着许多令人称赞的特点和优势。在本篇博客中，我将详细解释为什么我选择 Java，并通过具体的例子和代码来支持我的观点。Java 全栈开发技术是一种整合多种技术的开发方式，涉及众多领域，如：前端、后端、数据库等。Java 全栈开发技术的全面普及，使得该领域成为了就业和职业发展的焦点。为了快速入门 Java 全栈开发，我们可以从下面的路线开始学习。
仿品优购项目优享网，编程语言：Web+CSS+HTML+JSP
12-18
【标题】"仿品优购项目优享网"是一个基于Web技术构建的在线购物平台，主要涉及的技术包括CSS、HTML、JSP以及Java编程语言。这个项目旨在提供一个仿真的电商平台，用户可以在其中浏览商品、搜索信息、进行购物操作。 ...
html和css是编程语言吗,js和css是什么？
weixin_39634876的博客
05-31 1959
HTML和CSS，JavaScript(简称js)是万维网的核心技术，三种技术一起构成前端开发。下面本篇文章给大家介绍一下CSS和JS，希望对大家有所帮助。什么是JS(JavaScript)？JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。JavaScript是一种高级的、解释型、直译式脚本语言，是一种...
Html和css算是编程语言吗,不被承认的编程语言
weixin_35073008的博客
06-04 4169
众所周知，比较著名的编程语言有许多，比如PHP、Java、Python、C++等等，他们有着非常优秀的作用。但是基本每一个程序员都知道这一门不被承认的编程语言——HTML为什么他不被承认呢?HTML是 HyperText Markup Language (超级文本标记语言)首字母缩写。它属于网页编程语言(Web programming language)中的一种。它是人眼可识别的文本文件。HTML...
Java学习路线（完整详细版）超详细
热门推荐
曾昭武
05-14 25万+
一门永不过时的编程语言——Java 软件开发。 Java编程语言占比： 据官方数据统计，在全球编程语言工程师的数量上，Java编程语言以1000万的程序员数量位居首位。 而且很多软件的开发都离不开Java编程，因此其程序员的数量最多。而在以Java编程为核心的开发领域中，javaEE程序员的需求量10年来一直居于首位！ Java工程师就业： 1.通过各大招聘网站统计，全国海量公司都在招聘J...
2020 年最牛逼的 10 门编程语言
沉默王二
08-20 3万+
大学新生看过来。
编程爱好者博客地带(html+css+java).zip
08-20
本章的博客系统主要分为：个人博客空间、个人博客管理和博客后台管理3部分。结合目前博客系统的设计方案，本项目具有以下特点：界面设计美观大方、操作简单。功能完善、结构清晰。个人博客浏览。...
css.rar_Java编程_Java_
08-12
标签中的“Java编程”和“Java”表明这个压缩包的内容与Java语言及其应用相关，尤其是与Java在Web开发中的应用。Java编程不仅涉及后端逻辑处理，还包括与前端交互的部分，如通过HTTP响应发送CSS文件，或者使用JavaFX...
Java编程课程-Java核心基础
07-07
【Java编程课程-Java核心基础】是一门全面深入讲解Java编程语言的教程，旨在帮助初学者从零开始掌握Java核心技术。这门课程涵盖了尚学堂的Java入门内容，适合没有任何编程经验的人士学习，逐步建立起对Java编程的...
java项目之编程爱好者博客地带源码.zip
07-14
这个Java项目是一个专门为编程爱好者设计的博客平台源码，它为用户提供了一个互动交流的环境，让他们可以分享自己的编程经验、技巧以及对各种编程语言的理解。这个项目的核心是使用Java编程语言构建，它体现了Java在...
Linux配置Maven环境
Java全栈开发者
08-18 390
官网地址：https://maven.apache.org/download.cgi。获取其对应的下载链接（也可以使用下载到本地后，手动上传到服务器的方式）切到自己想要存放的路径后，使用wget下载。使用pwd查看文件路径，ll查看文件名称。这里以当前最新版本3.9.8为例。
手撕快排——三种实现方法（附动图及源码）
jsjs1346的博客
08-16 956
🤖💻👨‍💻👩‍💻🌟🚀🤖🌟👨‍💻👩‍💻👨‍💻👩‍💻🚀是一种高效的排序算法，广泛应用于各种场景。它采用策略，将一个数组分成两个子数组，然后递归地对这两个子数组进行排序。本文将介绍三种快速排序的实现方法，并附上相应的源码。⚙️一、快速排序的基本原理一个基准元素（pivot）分成两个子数组递归合并O(n log n)O(n log n)O(n^2)后文我们将给出优化方案O(log n)📚三、实现霍尔方法是快速排序原始版本中使用的分区方法。
【Spring框架】
m0_71941456的博客
08-18 1000
Spring框架的功能远不止于此，它还包括Spring MVC、Spring Data、Spring Security等多个模块，每个模块都有其独特的应用场景。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 514
【代码】springboot网上商品订单转手系统bootpf
指针详解（四）
Limerence_Aries的博客
08-18 1006
目录1. 字符指针变量2. 数组指针变量3. 数组指针变初始化4. 二维数组传参的本质5. 函数指针变量1）函数指针变量的创建2）函数指针变量的使用3）代码解析6. typedef关键字7. 函数指针数组8. 转移表 代码const char* pstr = "hello bit."; 不是把字符串 hello bit 放到字符指针 pstr 里，而是把字符串hello bit.的首字符的地址放到了pstr中我们通过一道例题加深理解 所以数组指针变量：存放的应该是数组的地址，能够指向数组的指针变
旅游网站
weixin_43213064的博客
08-16 1180
【代码】springboot旅游网站
Yolov8：模型部署到安卓端
最新发布
m0_70694811的博客
08-21 360
下载安装jdk-8u202-windows-x64.exe，这篇文章有百度网盘资源链接，直接下载，并按照这篇文章的JDK步骤进行安装和环境变量配置。C:\Program Files\Java\jdk-1.8\bin和C:\Program Files\Java\jdk-1.8\jre\bin。比如因为我的jdk路径是C:\Program Files\Java\jdk-1.8，所以这两个相对路径就改成。参考这边文章的USB驱动设置和手机端设置。同意协议后，下载相应版本的JDK。
二叉树(源码+lw+部署文档+讲解等)
lpw1012的博客
08-21 475
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》
如何使用 Java 记录简化 Spring Data 中的数据实体
08-20 491
Java 开发人员一直依赖Spring Data来实现高效的数据访问。但是，随着Java Records的引入，数据实体的管理方式发生了重大变化。在本文中，我们将讨论 Java Records 在 Spring Data 应用程序中的集成。我们将探讨使用 Java 记录创建健壮的数据实体的好处，并提供真实世界的示例来展示它们在 Spring Data 中的潜力。Java 记录的力量：概述J...
Java学习与CSS详解
在Java部分，虽然没有具体展开，但我们可以推测这是关于Java编程语言的基础学习，包括了对Java的概述，比如它的历史、用途以及如何搭建开发环境。此外，还提到了Java语言基础的学习，这部分通常涉及变量、数据类型、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

KeyichenCRAZY

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

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

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

打赏作者

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

抵扣说明：

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

余额充值