java之css的基本标签

最新推荐文章于 2022-04-15 22:13:20 发布

缘来源去

最新推荐文章于 2022-04-15 22:13:20 发布

阅读量450

点赞数

本文链接：https://blog.csdn.net/weixin_45137910/article/details/92986709

版权

学习java的第十八天

一. 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：动画名称 时间;
案例：同心圆

缘来源去

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
java之css的基本标签

学习java的第十八天一. CSS基本概念二. 基本语法:行内（内嵌）样式 > 内部样式 > 外部样式。三. CSS选择器:ID选择器>类选择器>标签选择器四. CSS基本属性:尺寸相关,文字相关,背景相关,列表相关一. CSS基本概念CSS Cascade Style Sheet 意思是层叠样式表，简称样式表。作用主要是让页面的内容呈现不同的颜色，大小，位置，动画等...
复制链接

扫一扫