javafx combobox css padding样式

转载

技术领航者之声 2024-11-28 23:34:35

学习java的第十八天

一. CSS基本概念
二. 基本语法:行内（内嵌）样式 > 内部样式 > 外部样式。
三. CSS选择器:ID选择器>类选择器>标签选择器
四. CSS基本属性:尺寸相关,文字相关,背景相关,列表相关
五. float作用和图片效果
六. position具体作用和z-index
七. 变形
八. 动画

一. CSS基本概念

CSS Cascade Style Sheet 意思是层叠样式表，简称样式表。
作用主要是让页面的内容呈现不同的颜色，大小，位置，动画等。

二. 基本语法:行内（内嵌）样式 > 内部样式 > 外部样式。

color: red; 样式的名称: 样式的值; （key/value键值对） 符号都是英文的，不能使用中文符号。

使用行内样式

<p style="color: red;">
	你好，我的国
</p>
使用内部样式 (此处使用的是标签选择器)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p{
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			你好，我的国
		</p>
	</body>
</html>
使用外部样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/common.css" />
	</head>
	<body>
		<p>
			你好，我的国
		</p>
	</body>
</html>
样式的优先级：

行内（内嵌）样式 > 内部样式 > 外部样式。

三. CSS选择器:ID选择器>类选择器>标签选择器

CSS中的选择器是指页面上元素引用CSS效果的方式。

标签选择器

标签选择器会应用到页面上所有的该名称的标签。

类选择器

可以使用.来定义某一类元素需要使用的样式，名称可以自定义，元素使用class属性来引用此样式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.c{
				color: greenyellow;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p class="c">
			你好，我的国
		</p>
		<p class="c">
			Hello, world
		</p>
		<p>
			Hello, wangliang
		</p>
	</body>
</html>
ID选择器

当需要给某一个元素单独定义一个样式时，可以给该元素定义一个id属性，然后在样式中使用#ID形式来定义样式。

注意：页面上元素ID必须是唯一的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#p1{
				color: greenyellow;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<p id="p1">
			你好，我的国
		</p>
		<p>
			Hello, world
		</p>
		<p>
			Hello, wangliang
		</p>
	</body>
</html>

四. CSS基本属性:尺寸相关,文字相关,背景相关,列表相关

尺寸相关：
width	宽度
height	高度
单位：px像素、占父标签的百分比

文字相关：
color	文字颜色
颜色值：
单词，如：red、green等
代码，十六位的代码，红绿蓝三原色，#xxxxxx ，前两位是红，中间两位是绿，最后两位是蓝。
red-->#ff0000 green-->#00ff00 blue--> #0000ff yellow-->#ffff00
white-->#ffffff black-->#000000
十六位数字：0~9 A~F
font-weight	文字权重
值：bold	加粗
font-size	文字大小
值：px am
font-family	文字字体
font	缩写
font: 权重 大小 字体;
<style>
  #p1{
    color: red;
    /*font-size: 30px;*/
    /*font-weight:bold;*/
    /*font-family: "宋体";*/
    font: bold 40px "宋体";
    /*border: 1px solid red;*/
    border-width: 1px;
    border-style: dashed;
    border-color: blue;
  }
</style>
text-align	文字水平对齐
值：left、center、right
line-height	文字行高
小技巧：内容垂直居中对齐，把行高设置成和高度一致
vertical-align	垂直对齐
图片和文字的对齐方式
值：top、middle、bottom
text-decoration 文字修饰
值：none（无）、underline(下划线）、line-through（删除线）
## 标题 一. CSS基本概念

背景相关：
background-color	背景颜色
background-image	背景图片
值：url(图片路径)
background-repeat	背景重复
值：
repeat 水平和垂直都重复，默认
no-repeat 不重复
repeat-x 水平重复
repeat-y 垂直重复
background-position	背景位置
background-position: 水平偏移量 垂直偏移量;
background	缩写
background: url(地址) 重复方式 水平偏移量 垂直偏移量;
<style>
  #p1{
    color: red;
    /*font-size: 30px;*/
    /*font-weight:bold;*/
    /*font-family: "宋体";*/
    font: bold 20px "宋体";
    /*border: 1px solid red;*/
    border-width: 1px;
    border-style: dashed;
    border-color: blue;
    /*text-align: center;*/
    width: 600px;
    height: 200px;
    /*vertical-align: middle;*/
    /*background-color: aqua;*/
    /*background-image: url(img/11.jpg);
    background-repeat: no-repeat;
    background-position: 100px 50px;*/
    background: url(img/11.jpg) no-repeat 200px 80px;
  }
</style>

列表相关： ul-li
list-style	列表风格
值：none（无）
设置ul
float 浮动
值：left 从左往右排列，right 从右往左浮动
margin和padding的用法：
margin: 指当前元素与其他元素的距离（上右下左）
如果没有写下，等同上，如果没有写左，等同于右，如果只写了一个，表示4个都一样。
<style>
  #div1{
    margin:0px 0px 0px 0px;
    /*
    等同于:
    margin:0px 0px 0px;
    也等同于：
    margin:0px 0px;
    也等同于：
    margin:0px;
    也可以分开写：
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    */   
  }
</style>
padding：指当前元素内部的子元素的距离（上右下左）
建议在编写页面时去掉所有的默认距离：*表示所有的元素
<style>
	*{
          margin: 0px;
          padding: 0px;
      }
</style>

五. float作用和图片效果

float: 浮动，特点是不占据空间，会导致后面的元素来占据其空间。
display: flex，是指让当前容器内部的布局为flex方式，简单说，就是让其内部元素以列的形式呈现。
图片的特效：
padding: 可以让图片边缘留白
box-shadow: 边缘阴影，rgba(红色值,绿色值,蓝色值,透明度) x（横向偏移）, y (纵向偏移), 虚化宽度
border-radius: 边缘的圆边的宽度，若宽度等同于整个正方形图片的宽度的一半，则图片会变成圆形。
<img style="padding: 5px; background-color: white; box-shadow: rgba(0,0,0, 0.5) 10px 10px 10px;" src="img/3.jpg" width="400px"/>

六. position具体作用和z-index

位置
position（定位方式）
设置网页元素的定位方式
取值：
static（静态，默认）
文档流：默认情况下网页元素流水式，块级元素从上到下，行级元素从左到右。
一旦设置position的非static属性值或设置浮动，就会破坏原有的文档流，该元素会脱离文档流。
fixed（固定）	固定在浏览器的某个位置，参照物是浏览器
relative（相对）	相对定位，参考物是自身，如left:10px是在自身原有的left坐标基础上+10px;
absolute（绝对）	绝对定位，固定在父元素的某个位置，参考物是父元素，left:10px在父元素的left坐标上加10px；
注意：绝对定位的元素，如果父元素没有设置相对定位，就会以浏览器为参照物，如果父元素设置相对定位，就以父元素为参照物。

坐标类型：
left	左
right	右
top	上
bottom	下
如果容器中的内容超出了容器的大小，需要隐藏超出的部分，可以添加overflow:hidden
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				border: 1px solid red;
			}
			#content{
				width: 520px;
				height: 280px;
				margin:60px auto;
				position: relative;
				overflow: hidden;
			}
			#leftImg{
				left: 0px;
				top: 0px;
				position: absolute;
			}
			#centerImg{
				left: 520px;
				top: 0px;
				position: absolute;
			}
			#rightImg{
				left: 1040px;
				top: 0px;
				position: absolute;
			}
		</style>
		
	</head>
	<body>
		<div id="content">
			<img id="leftImg" src="img/1.jpg" />
			<img id="centerImg" src="img/2.jpg" />
			<img id="rightImg" src="img/3.jpg" />
		</div>
	</body>
</html>

<script>
	setInterval(move, 50);
	var i = 0;
	function move(){
		var leftImg = document.getElementById("leftImg");
		var centerImg = document.getElementById("centerImg");
		var rightImg = document.getElementById("rightImg");
		i+=10;
		leftImg.style.left = -i + "px";
		centerImg.style.left = (-i + 520) + "px";
		rightImg.style.left = (-i + 1040) + "px";
	}
</script>

display: 显示或呈现方式。

值：

none: 表示不显示，即隐藏元素

inline: 以行级元素方式显示

block: 以块级元素显示

flex: 里面的子元素按列的形式显示，自身还是按原来的方式显示，例如div还是按块级显示

inline-flex：里面的子元素按列的形式显示，自身按行级元素显示

z-index: 当元素为绝对定位时，可以相互叠层，当z-index值较大时，呈现在较上方。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				background-color: blue;
				width: 100px;
				height: 50px;
				position: absolute;
				left: 50px;
				top: 20px;
				z-index: 99;
			}
			
			#div2{
				background-color: red;
				width: 120px;
				height: 60px;
				position: absolute;
				left: 120px;
				top: 30px;
				z-index: 999;
			}
			
			#div3{
				background-color: greenyellow;
				width: 120px;
				height: 60px;
				position: absolute;
				left: 100px;
				top: 60px;
				z-index: 9999;
			}
		</style>
	</head>
	<body>
		<div id="div1"></div>
		<div id="div2"></div>
		<div id="div3"></div>
	</body>
</html>

七. 变形

变形
transform
语法：
transform:变形函数
变形函数：
translate(x,y)	移动
示例：translate(100px,100px)
rotate(角度)	旋转
示例：rotate(180deg)
3D旋转：rotateX(45deg) rotateY(45deg) rotateZ(45deg)
scale(倍数)	缩放
示例：scale(1.5) 注意：分辨率不会变化
skew(翻转)	翻转
示例：skew(40deg);

八. 动画

动画效果：
transition 过渡
原理：
定义元素的某一个属性，如：颜色，两个状态：默认状态、鼠标悬停的状态
从一个状态到另一个状态的属性值，慢慢进行修改
如：
#div1{
width:100px;
transition:width 2s;
}
#div1:hover{
width:300px;
}
缩写形式：
transition:	属性名 时长 时间曲线 延迟时间
同时过渡多个属性或所有属性：
transition	属性1 时长,属性2 时长...
transition all 时长
案例：相片墙
自定义动画：
animation 动画
原理：
分为多个帧，多个帧连续切换实现动画。
@keyframes用于定义动画：
@keyframes	动画名称
{
from{样式}
to{样式}
}
或者
@keyframes	名称
{
百分比{样式}
百分比{样式}
...
}
启动动画：
animation：动画名称 时间;
案例：同心圆

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：linux 误删容器怎么恢复

下一篇：springboot geoserver

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

javafx combobox css padding样式

javafx combobox css padding样式

学习java的第十八天

一. CSS基本概念

二. 基本语法:行内（内嵌）样式 > 内部样式 > 外部样式。

三. CSS选择器:ID选择器>类选择器>标签选择器

四. CSS基本属性:尺寸相关,文字相关,背景相关,列表相关

五. float作用和图片效果

六. position具体作用和z-index

七. 变形

八. 动画

51CTO博客