JavaEE——简单认识CSS

最新推荐文章于 2024-06-10 10:07:38 发布
最新推荐文章于 2024-06-10 10:07:38 发布
阅读量334 收藏
点赞数
分类专栏： JavaEE 文章标签： java-ee css java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62905847/article/details/130179242
版权

文章目录

一、简单了解什么是 CSS

CSS 的工作就是将网页中元素的排版进行精确的控制，实现美化页面的效果。

CSS的基本语法规则如下：
选择器 + {一条 / N条声明}

对于 CSS 有下面几种写的方式：

  • 内部样式
    使用 style 标签，直接将 CSS 写入到 html 文件中。
    <p>这是内部样式</p>
    <!--内部样式-->
    <style>
        p {
            color: red;
            font-size: 30px;
        }
    </style>

在这里插入图片描述

  • 内联样式
    同样使用 style 标签，针对指定的元素设置样式。(此时只对当前元素生效)
    <p style="color: green; font-size: 40px;"> 
        内联样式
    </p>

在这里插入图片描述

  • 外部样式
    将 CSS 代码单独作为一个 .css 文件，通过 link 标签，让 html 引入该文件。
    这是 .css 文件
p { 
    color: blue;
    font-size: 50px;
}

这是 html 的代码

    <!--这里是外部样式的引入方式-->
    <link rel="stylesheet" href="style.css">
    <p>
        外部样式的测试
    </p>

在这里插入图片描述

二、CSS 选择器

1.标签选择器

在 style 标签中使用 {}，在 { 前面写上标签名称。 此时，就意味着会选中当前页面中所有指定的标签。

    <style>
        p{
            color: blueviolet;
        }
    </style>
    <p>
        这是 css 选择器测试
    </p>

    <div>
        <p>
            这是div中 css 选择器测试
        </p>
        <p>
            这是div中 css 选择器测试
        </p>
        这是一个 div
    </div>

在这里插入图片描述

2.类选择器

可以创建 CSS 类，手动来指定哪些元素使用这个类。

    <style>
        /* 此处定义一个 css 类，名字为 one */
        .one{
            color: aqua;
        }
        .two{
            color: gray;
        }
        .three{
            color: fuchsia;
        }
        .four{
            font-size: 30px;
        }
    </style>

    <div class ="one">
        这是第一个div
    </div>

    <div class="two">
        这是第二个div
    </div>

    <div class="three">
        这是第三个div
    </div>

在这里插入图片描述
到这里，我们已知类选择器的使用方式，但是，还需要注意：
一个类，可以被一个元素引用，也可以被多个元素引用。
一个元素可以引用一个类，也可以引用多个类。

    <div class ="one four">
        这是引用了多个类的div
    </div>

在这里插入图片描述

3.ID 选择器

html 中的每个元素，都是可以设置一个唯一的 id 作为元素的身份标识。

    <style>
        #oneDiv{
            color: darkred;
        }
        #twoDiv{
            color: darkorange;
        }
    </style>


    <div id="oneDiv">
        这是一个测试ID选择器的div
    </div>

    <div>
        这是一个测试ID选择器的另一个div
    </div id="twoDiv">

在这里插入图片描述

总结，类选择器 和 ID选择器 两者的特点。
类选择器， 是可以让多个元素应用用一个类的。
ID 选择器，只能针对唯一元素生效，一个页面中只能有唯一的 ID。

4.后代选择器

    <style>
        ul li {
            color: red;
        }
    </style>

这里代码的含义是，先在页面中找到所有的 ul，然后在这些 ul 中找到所有的 li。

注：
这里的 li 只要是 ul 的后代即可，不一定非得是 “子元素”。

    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>

    <ul>
        <li>aaa</li>
        <ul>
            <li>111</li>    
        </ul>
        <li>bbb</li>
        <li>ccc</li>
    </ul>

在这里插入图片描述

5.子选择器

只是找到匹配的单一的子元素，不找其他孙子元素之类的。

    <style>
        .test>ul{
            color: rgb(223, 92, 5);
        }
    </style>

这里的代码含义是，只在 .test 的子元素中找到 ul 标签。

    <div class="test">
        <ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>            
        </ul>
    </div>

在这里插入图片描述

6.伪类选择器

前面 的选择器是选中某个元素。
伪类选择器选中的是某个元素的特定状态。

:hover 鼠标悬停时的状态。
:active 鼠标按下时的状态。

    <style>
        .one1:hover{
            color: green;
            font-size: 30px;
        }
        .one1:active{
            color: greenyellow;
            font-size: 50px;
        }
    </style>
    <div class="one1">
        这是一个测试伪类选择器的div
    </div>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、字体属性

1.设置字体家族

font - family 当前使用哪种字体来显示。

    <style>
        .one{
            font-family: 宋体;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述
注： 这个属性指定的字体，需要是系统已经安装了的。

2.设置字体大小

font - size 单位是 px(像素)

    <style>
        .one{
            font-size: 40px;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

3.设置字体粗细

font - weight
实际设置是有两种设置风格。
1.使用单词
在这里插入图片描述

    <style>
        .one{
            font-weight: bold;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

2.使用数字

    <style>
        .one{
            font-weight: 100;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

4.文字倾斜

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

在这里插入图片描述

四、文本属性

1.文本对齐

text - align 属性来设置对齐方式。

对齐方式有下面三种：
center：居中对齐
left：左对齐
right：右对齐

在这里就只演示 center 居中对齐.

    <style>
        .one{
            text-align: center;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

2.文本装饰

text-decoration 属性来进行文本装饰。

装饰的常用取值有下面几个：
underline 下划线
none 什么都没有，可以给 a 标签去掉下划线
overline 上划线
line - through 删除线

下划线

    <style>
        .one{
            text-decoration: underline;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

none

    <style>
        a{
            text-decoration: none;
        }
    </style>
    <br>
    <a href="#">百度</a>
    <br>

在这里插入图片描述

overline 上划线

    <style>
        .one{
            text-decoration: overline;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

line - through 删除线

    <style>
        .one{
            text-decoration: overline;
        }
    </style>
    <div class="one">
        这是一个div
    </div>

在这里插入图片描述

3.文本缩进

text - indent 每个段落首行缩进两个文字。
这里常用的单位是 em 。这个单位表示的是一个相对的量。是以问字尺寸为基础进行设置的。

    <style>
        .one{
            font-size: 40px;
            text-indent: 2em;
            line-height: 60px;
        }
    </style>
    <div class="one">
        文本缩进
    </div>

在这里插入图片描述
这就很明显的展示出了是相对于文字进行缩进的。

这里要说明一个新名词 —— 行高
行高 = 文字高度 + 行间距
在这里插入图片描述

4.背景设置

设置背景分为两种：
1.设置背景颜色： background - color 设定单一颜色。
2.设置背景图片： background - image：url(图片路径)；

这里我直接演示如何设置背景图片。

    <style>
        .one{
            background-image: url(touxiang.png);
            /* 这里设定一个较大的高度便于观察 */
            height: 1000px;
        }
    </style>
    <div class="one">
        这是背景
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore nemo, necessitatibus beatae voluptatibus rem esse, quam unde voluptatem excepturi impedit pariatur nulla nobis facilis voluptates odit delectus, incidunt qui deleniti.
    </div>

在这里插入图片描述
如图所示，会出现一个这样平铺的效果。

background - repeat: no-repeat 这段代码可以解决图片在页面平铺的问题。

    <style>
        .one{
            background-image: url(touxiang.png);
            /* 这里设定一个较大的高度便于观察 */
            background-repeat: no-repeat;            
            height: 1000px;
        }
    </style>
    <div class="one">
        这是背景
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit vel soluta cupiditate laborum ipsa ex voluptatibus obcaecati, esse quisquam nisi, nulla facilis saepe consectetur voluptates repellendus magnam voluptas nostrum optio.
    </div>

在这里插入图片描述

此时，我们有会发现一个问题，就是背景图片出现在了左上角。如果我们想将图片转移到中间，呢么，background-position:
center center; 这串代码可以解决问题。
这里就不在演示。

background - size 设置背景图的尺寸。
由此，来实现背景图片的页面全覆盖。

    <style>
        .one{
            background-image: url(touxiang.png);
            /* 这里设定一个较大的高度便于观察 */
            background-repeat: no-repeat;            
            height: 1000px;
            background-position: center center;
            background-size: cover;
        }
    </style>
    <div class="one">
        这是背景
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit vel soluta cupiditate laborum ipsa ex voluptatibus obcaecati, esse quisquam nisi, nulla facilis saepe consectetur voluptates repellendus magnam voluptas nostrum optio.
    </div>

注： 这里的截图不好展示，大家可以自行试验一下。

五、圆角矩形

在我们编辑页面时，可以使用 div 通过限制其高度，宽度。以此来实现一个矩形。
但是，有时需要通过圆角矩形来让页面更加美化。
对此，使用 border-radius: 可以实现需求。

    <style>
         .one{
            /* 通过设置宽高来限制范围 */
            width: 200px;
            height: 100px;
            /* 设置矩形的背景颜色 */
            background-color: black;
            color: white;

            text-align: center;
            line-height: 100px;
            /* 设定矩形的角的弧度像素数 */
            border-radius: 10px;
        }       
    </style>
        <div class="one">
        <p>
        这是一个测试圆角矩形的div            
        </p>
    </div>

在这里插入图片描述

六、CSS 盒子模型

在这里插入图片描述
如上图所示，这就是一个 html 的元素基本布局规则。

1.介绍边框与外边框

要改变边框属性需要使用到一个关键字 border。

默认情况下，直接使用 border 是直接设置了四个方向。
要实现准确的设置还有下面的操作：
border - left： 设置左边框
border - right：设置右边框
border - top：设置顶部边框
border - bottom：设置下方边框

为了方便后面的解释，这里在引入一个关键字。

margin-bottom: 这个关键字是控制外边距，即，控制盒子与盒子之间的距离。

    <style>
                .one{
            width: 300px;
            height: 100px;
            background-color: cadetblue;
            color: blue;

            text-align: center;
            line-height: 100px;
            border: 10px black solid;

            /* 控制外边距让两个元素之间有间隙 */
            margin-bottom: 5px;
        } 
		/*这是对比元素*/
		        .contrast{
            width: 300px;
            height: 100px;
            background-color: chartreuse;
            color: black;

            text-align: center;
            /* 控制外边距让两个元素之间有间隙 */
            margin-bottom: 10px;
        }
    </style>
    <div class="eight">
        这是一个测试边框属性的div            
    </div>
    <div class="contrast">
        这是对比的div
    </div>

在这里插入图片描述
如上图所示，我们发现边框的添加，会导致盒子的撑大。
对此，这里再引入一个属性 box-sizing: border-box;

        .one{
            width: 300px;
            height: 100px;
            background-color: cadetblue;
            color: blue;

            text-align: center;
            line-height: 100px;
            border: 10px black solid;

            box-sizing: border-box; 

            /* 让两个元素之间有间隙 */
            margin-bottom: 5px;
        }

在这里插入图片描述

这里介绍几种边框样式：

  • 粗细: border-width
  • 样式: border-style,
  • 默认没边框.
  • 实线边框 solid
  • 虚线边框 dashed
  • 点线边框 dotted
  • 颜色: border-color

2.介绍内边框

对于内边框，这里的属性关键字是 padding

padding 在这里应用有下面几种形式

  • padding：10px； 表示四个方向都是 10
  • padding：10px 20px； 表示上下边距是10，左右边距是 20
  • padding：10px 20px 30px 40px； 上右下左(顺时针方向设定)

这里使用第二种形式解释：

    <style>
                .one{
            width: 300px;
            height: 100px;
            background-color: aquamarine;
            color: blueviolet;

            text-align: left;
            /* line-height: 100px; */
            border: 10px rgb(168,168,0) solid;

            box-sizing: border-box;

            padding: 10px 20px;

            margin-bottom: 15px;
        }
    </style>
    <div class="nine">
        这是一个测试内边距属性的div
    </div >

在这里插入图片描述

七、弹性布局

首先，我们先创建出一个 div，内部包含三个 span

    <style>
        div{
            width: 100%;
            height: 150px;
            background-color: red;
        }

        div>span{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
        
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

在这里插入图片描述

开启弹性布局
display：flex；

要给水平排列的父元素，设置 flex。这样水平方向上的尺寸边距就会变得比较可控。

设置元素的水平排列方式
justify-content: space-around;

这里的排列方式的值，常用的有下面几条：
在这里插入图片描述

设置元素的垂直排列方式
align-items:

这里展现一个简单调整过的界面

    <style>
        div{
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        div>span{
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
        
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

在这里插入图片描述
码子不易，您小小的点赞是对我最大的鼓励！！！

Mo_yang.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaEE---CSS
baijaiyu的博客
10-01 378
二 : 基本语法规范 选择器 + {一条/N条声明} 此处将CSS标签写到style标签内 , 通常将style标签放到head标签内 .1写在 style 标签中. 嵌入到 html 内部.理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中.通过 style 属性, 来指定某个标签的样式. 注意 : 行内样式的优先级默认 > 内部样式和外部样式 !这是实际开发中最常用的样式 . 优点: 样式和结构彻底分离了.缺点: 受到浏览器缓存影响, 修改之后 不一定立刻生
02_css（跟着宝哥学java：ee之css） css概念、css盒子模型、css选择器、css定位和css浮动
跟着宝哥学java的博客
03-20 5466
css（跟着宝哥学java：ee之css） css概念、css盒子模型、css选择器、css定位和css浮动
【Java EE】-CSS详解
m0_63979882的博客
04-24 460
CSS引入html的三种方式，CSS八大选择器，CSS属性元素(文字，文本，背景，圆弧），块级元素和行内元素的区别，CSS盒子模型，CSS弹性布局
JavaEE——CSS
zh_tnis的博客
10-21 567
1.什么是CSS？ 1、css是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 2、CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 3、CSS为HTML标记语言提供了一种样式描述，定义了其中元素...
API整合 J2EE CSS3 HTML5 SSH Jquery ZK maven
03-21
整合了一些常用到的API和帮助文档 有需要的可以看看 因为上传大小限制 只能上传这些
javaEE——在线打车系统.zip
12-29
javaEE——在线打车系统.zip
JAVAEE——基于ECLIPSE和WEBLOGIC
10-25
JAVAEE——基于ECLIPSE和WEBLOGIC课件及实验指导 实验1（08）. JavaEE环境安装.doc 实验2-JNDI访问远程资源.doc 实验3-使用JNDI访问连接池08.doc
详解JAVAEE——SSH三大框架整合（spring+struts2+hibernate）
08-30
主要介绍了详解JAVAEE——SSH三大框架整合（spring+struts2+hibernate），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaEE、HTML、CSS、JavaScript开发文档集合.zip
03-18
JavaEE、HTML、CSS、JavaScript开发文档集合 JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发文档集合JavaEE、HTML、CSS、JavaScript开发...
javaEE课后代码——客户管理系统
06-30
这是javaEE企业开发级应用教程最后一章客户管理系统的代码，包含数据库，框架完整，可以直接套用，我们小组期末作业就是用这个框架。 分页写的也很好。
javaEE初阶 — CSS 常用的属性
超烦豆先森
03-13 700
字体属性、设置字体家族 font-family、设置字体大小 font-size、设置字体粗细 font-weight、文字倾斜 font-style、文本属性、文本颜色、文本对齐、文本装饰、文本缩进、行高、背景属性、背景颜色、背景图片、背景位置、背景尺寸、圆角矩形、基本用法、圆形的生成、圆角矩形的生成
JAVAEE----CSS
m0_58157267的博客
05-05 435
每一个CSS语句包含两个部分:选择器+应用的属性 我们来看一个例子: CSS代码可以放到html文件中的style标签里,style标签可以放到html中的任意位置,但一般style标签放到head标签中 CSS的引入方式 1.内部样式表 在style标签写CSS 比如这样: 2.内联样式(这种样式优先级较高,会覆盖其他样式) 通过style属性来指定某个标签的样式 内联样式只针对当前元素生效,不需要写选择器,不用写{},直接写CSS属性和值即可 这种写法只适合...
【JavaEE】CSS基础（详解）
xqs196301的博客
05-13 812
【JavaEE】CSS基础（详解）
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
热门推荐
freshlover的专栏
12-05 14万+
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。 首
JavaEE之CSS学习
q1454739828的博客
02-03 654
CSS cascade style sheet 层叠样式表 1.概念 决定页面的样式. 1>.配色 2>.布局 2.CSS与 HTML的结合方式 1> style属性 在标签上加入style属性.  属性的值就是css代码. 如：HelloWord 2> style标签 在页面的head标签中, 书写一个style标签. 在style标签中书写cs
Java ee CSS
m0_57180439的博客
05-02 1042
文章目录一、CSS是什么？二、基本语法总结 提示：以下是本篇文章正文内容，下面案例可供参考 一、CSS是什么？ CSS是层叠样式表（Cascading Style Sheets） CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 说句人话就是：css就是化妆 如果说HTML只是表示页面的结构和内容，那么CSS描述的就是页面的样式 具体来说，就是描述了任意一个网页的元素：大小/位置/字体/颜色/背景/边框… 二、基本语法 选择器 +引用的属性： 1
【Java成王之路】EE初阶第十九篇: 前端三剑客 CSS基础篇
m0_64397675的博客
08-08 396
浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别. 为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式. 使用通配符选择器即可完成这件事情.如果要是当前不是正方形,就是一个比较扁的矩形,通过把 border-radius 的值为矩形高度的一半,此时也可以实现一个类似于 矩形和圆形混合的一种形状.(时刻牢记,真实的网站,css是从服务器下载到浏览器的.css代码越长,要下载的内容就越多,就越消耗带宽!...
java ee链接css_JavaEE——CSS3选择器
weixin_33168794的博客
03-02 119
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。选择器中的属性： 之前介绍过[ ]里可以定义属性或属性值，之后的标签中只要含有该定义的属性或属性值就会拥有该样式。所以继续介绍剩下的几种声明方式。 1.[attribute=value]，例如：[title=”abc”]，选择只要是title属性值以abc开头的...
JavaEE——声明式事务管理案例：实现用户登录
最新发布
PAP
06-10 2253
JavaEE——声明式事务管理案例：实现用户登录
javaee使用idea编写css文件放在哪
05-13
在JavaEE项目中，通常将CSS文件放在Web应用程序的WebContent目录下的一个名为css的文件夹中。如果你使用Idea作为开发工具，可以按照以下步骤将CSS文件添加到项目中： 1. 在Idea中打开JavaEE项目。 2. 右键单击...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值