【Java EE】-CSS详解

已于 2023-04-28 18:21:28 修改
阅读量462 收藏 1
点赞数 3
分类专栏： 【JavaEE】 文章标签： css java-ee html
于 2023-04-24 23:37:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63979882/article/details/130251472
版权

作者：学Java的冬瓜
博客主页：☀冬瓜的主页🌙
专栏：【JavaEE】
分享: 且视他人如盏盏鬼火，大胆地去走你的道路。——史铁生《病隙碎笔》
主要内容：CSS引入html的三种方式，CSS八大选择器，CSS属性元素(文字，文本，背景，圆弧），块级元素和行内元素的区别，CSS盒子模型，CSS弹性布局

在这里插入图片描述

文章目录

一、CSS引入方式

1. 行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内样式</title>
	</head>
	<body>
		<!-- 内联定义语法： 
			<标签 style="样式名:样式值; 样式名:样式值..."></标签>
		 -->
		 <div style="width: 500px; height: 300px; background-color: blue;"></div>
	</body>
</html>

2. 内部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部样式</title>
	</head>
	<body>
		<!-- 类选择器使用 -->
		<div class="student"></div>
		
		<!-- 内部样式 -->
		<style>
			/* 类选择器:*/
			.student{
				width: 200px;
				height: 50px;
				background-color: blue;
			}
		</style>
	</body>
</html>

3. 外部样式

CSS/my.css:

#div1{
    width: 300px;
    height: 100px;
    background-color: blue;
    border: 1px solid red;
}

html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		
		<!-- 引入外部独立的CSS文件 -->
		<link rel="stylesheet" href="CSS/my.css"/>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

二、CSS选择器

1、 基础选择器

优先级：id选择器优先级 > 类选择器 > 标签选择器
注意：在style中直接选中相应标签，进行设置

1.1、标签

<!-- 标签选择器 -->
	<div>i am a div</div>  <!--使用方法-->
	<style>                /* 样式 */
	    div {
	        width: 100%;
	        height: 200px;
	        background-color: aquamarine;
	    }
	</style>

1.2、类

<!-- 类选择器 -->
    <div class="blue">i am a div</div>   <!--使用方法-->
    <style>                              /* 样式 */
        .blue {
            color: blue;
        }
    </style>

1.3、id

<!-- id选择器 -->
	<div id="red">i am a div</div>   <!--使用方法-->
    <style>                          /* 样式 */
        #red {
            color: red;

            background-color: blue;
            width: 200px;
            height: 150px;
        }
    </style>

1.4、通配符

注意：使用通配符选择器，选中所有标签

<!-- 通配符选择器 -->
    <div>i am a div</div>
    <style>
        * {
            color: purple;
        }
    </style>

2、复合选择器

注意：复合选择器可以是任意基础选择器的组合，包括标签，类，id。

2.1、后代选择器

元素1 元素2 { 样式声明 }     
注意：1> 元素二可以使用子元素(选中子元素)，也可以使用孙子元素(选中孙子元素)；
2>后代选择器会选中父元素的指定后代元素(包括元素2及其后代元素)。

<!-- 后代选择器 -->
    <div>                                         <!-- 使用方式 -->
        <span>i am the first span, 是div的后代
            <div>我是span的后代</div>
        </span>
        <p>i am the first p</p>
    </div>
    <style>                                      /* 样式 */
        div div {/*选中div的孙子元素，也是span的子元素div及其后代元素*/
            color: aqua;
        }
    </style>

2.2、子类选择器

元素1 元素2 { 样式声明 }
注意：1> 元素二只能使用子元素(选中子元素)；
2> 子类选择器会选中指定子元素及其后代。

<!-- 子类选择器 -->
    <div>
        <span>i am the first span, 是div的后代
            <div>我是span的后代</div>
        </span>
        <p>i am the first p</p>
    </div>
    <style>
        div > span {/*这里选中了div的子元素span及其后代元素*/
            color: aqua;
        }
    </style>

2.3、并集选择器

元素1, 元素2 { 样式声明 }
注意：表示通知选中元素1和元素2

<!-- 并集选择器 -->
    <div>
        <span>i am the first span, 是div的后代
            <div id="one">我是span的后代</div>
        </span>
        <p>i am the first p</p>
    </div>
    <style>
        #one, p {
            color: aqua;
        }
    </style>

2.4、伪类选择器

注意：这是属于复合选择器的特殊用法。

a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)

<!-- 伪类选择器 -->
    <div class="one">i am a div</div>
    <span>i am a span</span>
    <style>
        .one:hover {  /*设置鼠标悬停颜色*/
            color: orange;
        }
        span:active { /*设置鼠标按下未放开时颜色*/
            color: red;
        }
    </style>

三、属性

1、字体属性

设置字体类型：font-family    黑体、宋体等
设置字体大小：font-size       可以用px，也可以用large、medium等
设置字体粗细：font-weight    可以使用数字(范围1~1000)，也可以使用单词
设置文字样式：font-style     italic设置倾斜，normal设置恢复

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		
		<!-- 引入外部独立的CSS文件 -->
		<link rel="stylesheet" type="text/css" href="CSS/my.css"/>
	</head>
	<body>
		<div id="div1">i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?</div>

        <style>
            div {
            	/* 1.字体属性部分 */
				/* 设置字体类型 */
                font-family: '宋体';
				/* 设置字体大小 */
                font-size: 20px;
				/* 设置字体粗细 */
                font-weight: 20;
				/* 设置字体样式:（斜体） */
                font-style: italic;  
            }
        </style>
	</body>
</html>

结果展示：
在这里插入图片描述

2、文本属性

设置文本颜色：color    RGB(红绿蓝)

  • 可以使用这三种方式：1> rgb(255,255,255)   2> #ff0000(红)  3> #000(黑) 4> blue…

设置文本对齐：text-align     left、right、center，
设置文本装饰：text-decoration    

  • underline 下划线(常用)
  • none 去掉装饰，可以给a标签去掉下划线
  • overline 上划线(不常用)
  • line-through(不常用)

设置文本缩进：text-indent     2em是相对的量，1em是一个文字尺寸大小。
设置行高：line-height    行高=文字高度+行间距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		
		<!-- 引入外部独立的CSS文件 -->
		<link rel="stylesheet" type="text/css" href="CSS/my.css"/>
	</head>
	<body>
		<div id="div1">i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?</div>

        <style>
            div {
				/* 1.字体属性部分 */
				/* 设置字体类型 */
				font-family: '宋体';
				/* 设置字体大小 */
				font-size: 20px;
				/* 设置字体粗细 */
				font-weight: 20;
				/* 设置字体样式:（斜体） */
				font-style: italic;  
	
	
				/* 2.文本属性部分 */
				/* 设置文本颜色 */
				color: #000;
				/* 设置文本对齐 */
				text-align: left;
				/* 设置文本装饰 */
				text-decoration: none;
				/* 设置文本缩进 */
				text-indent: 2em;
				/* 设置行高 */
				line-height: 50px;
            }
        </style>
	</body>
</html>

结果展示：
在这里插入图片描述

3、背景属性

设置背景颜色：background-color
设置背景图片：background-image: url(路径)    此处路径不需要加引号
设置背景图片的大小：background-size    后跟宽度和高度设置图片尺寸，contain表示图片在元素范围内变大，图片weight或height大的达到背景大小；cover则放大图片盖满元素范围，图片weight或height小的达到背景大小
设置背景尺寸：height 和 width：    1>数字px 2>数字%
设置背景平铺：background-repeat

  • repeat: 平铺
    no-repeat: 不平铺
    repeat-x: 水平平铺
    repeat-y: 垂直平铺

设置背景位置： background-position    后跟坐标x,y，以左上角为远点，以水平线为x，竖直线为y。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		
		<!-- 引入外部独立的CSS文件 -->
		<link rel="stylesheet" type="text/css" href="CSS/my.css"/>
	</head>
	<body>
		<div id="div1">i am a div Lorem ipsum dolor sit amet consectetur adipisicing elit. Error tenetur nesciunt esse possimus perferendis! Dolor deleniti a libero obcaecati, perferendis quia nobis iste est doloribus illo, dolore quibusdam, eaque quaerat! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore fugit velit eos animi incidunt qui esse? Delectus quam laboriosam, nam saepe perspiciatis, natus vel enim velit incidunt eum cupiditate nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti totam vitae. Molestias numquam dicta harum at explicabo. Fugit ullam perferendis et tempora. Velit officiis repellat explicabo fuga quia est. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui maiores beatae ipsum! Accusantium, reprehenderit totam temporibus sapiente placeat obcaecati, quas aliquid illo, doloribus maiores consectetur possimus asperiores? Dolorum, impedit consectetur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui vero fuga odio quas saepe quisquam eius mollitia unde similique incidunt quis voluptatibus dolore vitae ad, sequi maiores tempore nam consectetur?</div>

        <style>
            div {
				/* 1.字体属性部分 */
				/* 设置字体类型 */
				font-family: '宋体';
				/* 设置字体大小 */
				font-size: 20px;
				/* 设置字体粗细 */
				font-weight: 20;
				/* 设置字体样式:（斜体） */
				font-style: italic;  

				/* 2.文本属性部分 */
				/* 设置文本颜色 */
				color: #000;
				/* 设置文本对齐 */
				text-align: left;
				/* 设置文本装饰 */
				text-decoration: none;
				/* 设置文本缩进 */
				text-indent: 2em;
				/* 设置行高 */
				line-height: 50px;

				/* 3.背景属性部分 */
				/* 设置背景颜色 */
				background-color: #0f0;
				/* 设置背景图片 */
				background-image: url(image/女.jpg);
				/* 设置背景图片的大小 */
				background-size: contain;
				/* 设置背景尺寸 */
				height: 500px;
				width: 100%;
				/* 设置背景平铺 */
				background-repeat: repeat;
				/* 设置背景位置 */
				background-position: center center;
            }
        </style>
	</body>
</html>

结果展示：
在这里插入图片描述

4、圆角矩形

设置内切圆半径：border-radios    length，length为内切圆半径，length越大，弧度越强烈。

div四角变成圆弧： length小一点

<div class="one">I am a div</div>
<style>
    .one {
        width: 200px;
        height: 100px;
        background-color: aqua;

        color: #fff;
        text-align: center;  /*先水平居中，然后用line-height垂直居中*/
        line-height: 100px;

        border-radius: 5px; /*设置内切圆半径长度*/
    }
</style>

在这里插入图片描述

div变成水平胶囊状： length是背景的高度height的一半

只需要修改上面的第12行代码为下面
border-radius: 50px; /*设置内切圆半径长度*/

在这里插入图片描述

生成div圆形：背景heigth和width一样大，length为他俩的一半

<div class="one">I am a div</div>
<style>
    .one {
        width: 100px;
        height: 100px;
        background-color: aqua;

        color: #fff;
        text-align: center;  /*先水平居中，然后用line-height垂直居中*/
        line-height: 100px;

        border-radius: 50px; /*设置内切圆半径长度，也可用em */
    }
</style>

在这里插入图片描述

四、元素的显示模式

显示模式重点的有：块级元素和行内元素：
块级元素和行内元素的区别：
1> 块级元素会独占一行；行内元素不会独占一行
2> 块级元素高度、宽度、内外边距都是可以设置的；行内元素高度、宽度\行高无效，内边距有效，外边距有时有效，有时无效。
3> 块级元素默认宽度是和父元素一样宽；行内元素宽度默认和里面的内容一样宽。

五、CSS盒子模型

在这里插入图片描述

设置元素边框：border    设置了四个方向可以分为border-top，border-right，border-bottom，boder-left四个标签设置。

  • 边框粗细：数字+px
  • 边框颜色：rgb，#+六位十六进制，#+三位十六进制
  • 边框风格：solid(实线)

注意：边框默认情况下会撑大盒子，使用box-size：border-box，那么边框是向内延展，不会撑大盒子。
防止边框撑大盒子：box-size：border-box
设置内边距：padding    元素和该元素内容之间的距离
设置外边距：margin    元素和元素之间的距离

注意：margin的特殊用法：把margin-left和margin-right设置成auto(让浏览器自动调节)，垂直方向无效

<div class="one">I am a div</div>
<style>
    .one {
        width: 200px;
        height: 100px;
        background-color: aqua;

        color: #fff;
        text-align: center;  /*先水平居中，然后用line-height垂直居中(垂直居中的值和背景的height一样大)*/
        line-height: 100px;

        border-radius: 2em; /*设置内切圆半径长度*/

        border: 8px #000 solid;
        box-sizing: border-box;
        padding: 10px 20px 30px 40px;
        margin: 20px;
    }
</style>

六、弹性布局

注意：弹性布局用于解决页面水平方向排列的问题。

开启弹性布局的方法：在父元素的设置样式中添加：display:flex，代表在父元素上面的子元素变成了弹性的元素，可以设置尺寸和边距。

开启弹性布局后，可以设置：

未指定justify-content时， 默认按照从左到右的方向布局。
指定 justify-content:设置水平方向的排列

  • end：弹性元素靠右排列
  • flex-start：靠左排列
  • center ：居中
  • space-around：空白环绕弹性元素
  • space-between：弹性元素环绕空白

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

  • end：弹性元素靠下排列
  • flex-start：靠上排列
  • center：垂直方向居中
    另外两个对应类似

理解：行内块元素可以解决行内元素尺寸高度无效的问题，但是行内元素和行内块元素，都会把源码中span之间的这个换行当作一个空格，对页面布局产生影响。因此使用弹性布局是比较理想的做法。

<!--弹性布局-->
	<div>
        <span>1</span> <!--注意：行内元素和行内块元素，都会把源码中span之间的这个换行当作一个空格，对页面布局产生影响-->
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
    <style>
        div {
            width: 100%;
            height: 150px;
            background-color: red;

            /* 开启弹性布局
                此时在弹性容器里的元素，不再是"块级元素",而是成了弹性元素，此时就可以设置尺寸和边距了。
                在要设置水平排列的元素的父元素，设置flex 
            */
            display: flex;

            /* justify-content:设置水平方向的排列
            弹性元素靠右排列:end 靠左排列:flex-start 居中:center 空白环绕弹性元素space-around 弹性元素环绕空白space-between*/
            justify-content: space-around;

            /* align-items:设置元素垂直方向的排列*/
            align-items: center;

            
        }
        div>span {
            width: 100px;  /* 如果不使用弹性布局，设置宽度和高度无用 */
            height: 100px;
            background-color: aqua;
        }
    </style>
  • 弹性布局以上三个操作：display:flex     justify-content     align-items:都是在父元素的样式中添加的。
学Java的冬瓜
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
javaEE---CSS
baijaiyu的博客
10-01 382
二 : 基本语法规范 选择器 + {一条/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 5478
css（跟着宝哥学java：ee之css） css概念、css盒子模型、css选择器、css定位和css浮动
JavaEE——CSS
zh_tnis的博客
10-21 574
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初阶 — CSS 常用的属性
超烦豆先森
03-13 704
字体属性、设置字体家族 font-family、设置字体大小 font-size、设置字体粗细 font-weight、文字倾斜 font-style、文本属性、文本颜色、文本对齐、文本装饰、文本缩进、行高、背景属性、背景颜色、背景图片、背景位置、背景尺寸、圆角矩形、基本用法、圆形的生成、圆角矩形的生成
java从入门到精通知识详解
01-23
本知识详解将涵盖从入门到精通的多个关键点，帮助读者深入理解和掌握Java的精髓。 首先，我们要了解基础概念。Java是一种面向对象的、跨平台的编程语言，由Sun Microsystems（现为Oracle Corporation的一部分）于...
java-web-project
02-13
Java Web项目通常涉及到Java标准版（Java SE）和企业版（Java EE）的使用。 **知识点详解：** 1. **Servlet**：Servlet是Java EE的一部分，用于扩展服务器的功能，处理HTTP请求并返回响应。在Java Web项目中，...
java ee实训小项目
03-19
【Java EE实训小项目详解】 Java EE，全称Java Platform, Enterprise Edition，是Java平台针对企业级应用开发的一个标准和框架。它包含了多种服务、组件和API，用于构建分布式、多层的企业级应用程序。在这个实训小...
JAVA毕业设计-企业门户网站
04-03
【企业门户网站开发基于JAVA技术详解】 企业门户网站是企业面向公众展示自身形象、提供服务和信息的重要平台。在JAVA毕业设计中，我们通常会涉及到多个关键技术和概念，这将涵盖前端界面设计、后端服务器处理、...
基于java的网上书店(struts+hibernate+css+mysql).zip
06-19
这是一个基于Java技术栈开发的网上书店项目，使用了经典的MVC设计模式，即Struts作为控制器，Hibernate作为数据持久化层，CSS用于样式设计，以及MySQL作为后台数据库。以下是这个项目涉及的主要知识点详解： 1. **...
JAVAEE----CSS
m0_58157267的博客
05-05 439
每一个CSS语句包含两个部分:选择器+应用的属性 我们来看一个例子: CSS代码可以放到html文件中的style标签里,style标签可以放到html中的任意位置,但一般style标签放到head标签中 CSS的引入方式 1.内部样式表 在style标签写CSS 比如这样: 2.内联样式(这种样式优先级较高,会覆盖其他样式) 通过style属性来指定某个标签的样式 内联样式只针对当前元素生效,不需要写选择器,不用写{},直接写CSS属性和值即可 这种写法只适合...
JavaEE——简单认识CSS
qq_62905847的博客
11-30 337
简单介绍了 css 的基本语法和使用。对于 css 有一个系统的简单认识。
【JavaEE】CSS基础（详解）
xqs196301的博客
05-13 821
【JavaEE】CSS基础（详解）
CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
热门推荐
freshlover的专栏
12-05 14万+
CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致，这个估计谁都会写，但是涉及到filter的具体语法含义和各版本写法的不同区别，很多人都搞不准确，我曾经问过许多群里的大牛，说的都不是很准确，网上的说法就更五花八门了。今天呢，主要是重新温习一下这个属性，并实际测试来说明正确的写法，和IE各版本的支持度和书写区别。 首
JavaEE之CSS学习
q1454739828的博客
02-03 659
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 1050
文章目录一、CSS是什么？二、基本语法总结 提示：以下是本篇文章正文内容，下面案例可供参考 一、CSS是什么？ CSS是层叠样式表（Cascading Style Sheets） CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 说句人话就是：css就是化妆 如果说HTML只是表示页面的结构和内容，那么CSS描述的就是页面的样式 具体来说，就是描述了任意一个网页的元素：大小/位置/字体/颜色/背景/边框… 二、基本语法 选择器 +引用的属性： 1
【Java成王之路】EE初阶第十九篇: 前端三剑客 CSS基础篇
m0_64397675的博客
08-08 406
浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别. 为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式. 使用通配符选择器即可完成这件事情.如果要是当前不是正方形,就是一个比较扁的矩形,通过把 border-radius 的值为矩形高度的一半,此时也可以实现一个类似于 矩形和圆形混合的一种形状.(时刻牢记,真实的网站,css是从服务器下载到浏览器的.css代码越长,要下载的内容就越多,就越消耗带宽!...
java ee链接css_JavaEE——CSS3选择器
weixin_33168794的博客
03-02 121
声明：本栏目所使用的素材都是凯哥学堂VIP学员所写，学员有权匿名，对文章有最终解释权；凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。选择器中的属性： 之前介绍过[ ]里可以定义属性或属性值，之后的标签中只要含有该定义的属性或属性值就会拥有该样式。所以继续介绍剩下的几种声明方式。 1.[attribute=value]，例如：[title=”abc”]，选择只要是title属性值以abc开头的...
scss概念及使用
最新发布
m0_74293254的博客
07-10 1136
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

学Java的冬瓜

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

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

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

打赏作者

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

抵扣说明：

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

余额充值