CSS样式

最新推荐文章于 2024-07-20 18:05:02 发布

Jessica巨人

最新推荐文章于 2024-07-20 18:05:02 发布

阅读量119

点赞数

分类专栏： JavaEE 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_34113388/article/details/121105620

版权

JavaEE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景（background）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		body{
			background-color: transparent;
		}
		.one{
			width: 500px;
			height: 500px;
			background-color: aqua;
		}
		</style>
	</head>
	<body>
		<!-- <img src="img/luoyi.jpg" align="top" width="100%" /> -->
		<div class="one">
			1
		</div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		body{
			background-color: transparent;
		}
		.one{
			width: 1500px;
			height: 2000px;
			background-color: aqua;
			background-image: url(img/luoyi.jpg);
			background-repeat: no-repeat;
			/* background-position: inherit; */
			background-position: 30px 10px;
			background-attachment: scroll;
			/* background-attachment: fixed; */
		}
		.two{
			
		}
		</style>
	</head>
	<body>
		<!-- <img src="img/luoyi.jpg" align="top" width="100%" /> -->
		<div class="one">
			12345678
		</div>
		<div class="two">
			12345678
		</div>
	</body>
</html>

Text(文本)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
		div{
			text-indent: 30px;
			text-align: center;
			text-decoration: overline;
			text-shadow: black;
			color: cornflowerblue;
			 text-decoration: blink; /*文本闪烁*/
			 text-decoration: line-through;/*删除*/
		}
		p{
			text-transform: capitalize;
			letter-spacing: 20px;
		}
		</style>
		<title></title>
	</head>
	<body>
		<div>R技术发展到现在，真实空间还原始终是比较麻烦的事情，之前的识别图只能通过特定图片寻找到虚拟和真实的交界。这对用户来说体验感是远远不够的。虚拟的模型想要在真实的世界中更加完美呈现，一是关照效果阴影的体现，还有更重要的就是遮挡关系，物理阻挡的体现。如果可以多人共享一个虚拟空间，那么真实感就会更加完美了。这就是Hololens的MR了。————————————————版权声明：本文为CSDN博主「笔端的年华」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/BDDNH/article/details/104673717</div>
		<p>R技术发展到现在，真实空间还原始终是比较麻烦的事情，之前的识别图只能通过特定图片寻找到虚拟和真实的交界。这对用户来说体验感是远远不够的。虚拟的模型想要在真实的世界中更加完美呈现，一是关照效果阴影的体现，还有更重要的就是遮挡关系，物理阻挡的体现。如果可以多人共享一个虚拟空间，那么真实感就会更加完美了。这就是Hololens的MR了。
————————————————版权声明：本文为CSDN博主「笔端的年华」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/BDDNH/article/details/104673717</p>
	</body>
</html>

在这里插入图片描述

仅html就可以做网页，放你想放的任何东西，但是不美观

让他美观的话，就需要层叠样式表css css3
css是做什么的？
1.控制整个网页的布局，在布局的基础上再好看，跟html里的table似的。比如房子的三室一厅，阳面阴面，再放家具装修。
2.控制网页的样式字体、图片的位置，大小，加粗，颜色等等，跟html里的“属性”一样。

布局方式：
1.Table(基本上不用这个)
2.div+css(项目中常用)

块标签：

可以作为容器包纳html的标签（标题，表格，图片等html元素）。

内联标签（行内标签）：

div和span标签单独用没效果和影响，和放在外面一样显示，得需要通过css来控制。

<body>
	<p>我是一个身体1</p>
	<p>我是一个身体2</p>
	<p>我是一个身体3</p>
	<div>我是个块标签1<h4>这是个标题</h4></div>
	<div>我是个块标签2</div>
	<div>我是个块标签3</div>
	<span>我是一个spans1</span><br />
	<span>我是一个spans2</span>
	<span>我是一个spans3</span><br />
</body>

复杂的动画效果，如图片轮播切换是用js做的。

块元素：单独占一行

行内元素：手动换行的/把页面充满自动换行

<input type=“text” / >

在哪写css代码：
写标签的属性

1.内部引入方式

2.行内引入
会导致代码臃肿，每个标签里还会有一堆样式代码不好不好。
我是一个spans1

3.会写很多样式文件的,外部引入（项目用）

new_file.html

new_file.css
div{

font-size: 21px;
font-family: “楷体”;
}

会出现一个标签会被多个css控制，出现冲突

css里的注释
/*
*/
html里的注释

标签选择器

div{ }

类选择器:class可以指给多个标签

.one{ }

id选择器：ID是唯一的不可以重名。

#heard{ }

选择器变形

我是个div

我是个p

div p{ }

后代选择器

我是个div

我是个p我是一个span

div p span{ }

id选择器>类选择器>标签选择器

群组选择器:几个都有共同属性部分的时候
div,span,p{
}

全局选择器：把标签里的都选进去
*{
}

属性选择器
input[type=‘text’]{
background-color:yellow;
}

伪类选择器：用伪类控制四个状态的样式

a:link{

}
a：hover{

}
a:active{

}
a：visited{

}
go百度

一个网页有四种状态
1.正常状态 2.鼠标移上去 3.鼠标按下不抬起 4.被点击过，被打开过
点开后链接就会换颜色，告诉已经被打开过了

结合类使用的伪类
one:link{

}
go百度

结合标签使用的伪类
img:link{
width:300px;//鼠标移上去图片放大
}

div:first-child{
color:blue;
}
span:first-child{

}

一孩二孩三孩

css背景图

body{
background-color:transparent;
}
.one{
width:800px;
height:500px;
background-image:url(img/api.jpg);
background-repeat:no-repeat;//垂直水平方向平铺
background-position:left;
background-position:30px 10px;//从哪个位置开始加载
background-attachment:fixed;//滚动时
}

---------------------------------------------------------------------------------

css设置文本
p{
text-indent:2em;//字体大小设置
text-align:left;//对齐方式
word-spacing:10px//字间距,只设置单词之间的间距，不设置中文的
text-decoration:underline;
line-height:30px;
}

啦啦啦啦

css设置字体

p.{
font-style:normal;//正常 - 正常显示文本
font-style:italic;//斜体 - 以斜体字显示的文字
font-style:oblique;//倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
}

啦啦啦啦

ul{
list-style-type:none;
}
ol{
list-style-type:lower-roman;//罗马数字
list-style-type:lower-alpha;//小写数字
list-style-image:url(img/html01.jpg);//有序代替成图片
list-style-position：outside;//靠里靠外
}

单位

百分比
像素
厘米
英寸

盒子模型

用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

div {
width: 300px;
height:300px;
border: 25px solid green;//Border(边框) - 围绕在内边距和内容外的边框。
padding: 25px;//Padding(内边距) - 清除内容周围的区域，内边距是透明的。
margin: 25px; //Margin(外边距) - 清除边框外的区域，外边距是透明的。
margin: 0 auto;//左右居中
}

lafdjahfuia f

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

padding:10px 10px 10px 10px;上下左右内边距

css定位
定位机制
1.普通文档流
默认就是这个，从上到下排列去堆叠，不去做设置。
默认就是静态定位，就是普通文档流的形式。
.one{
position:staic;
}

2.浮动
通过浮动来解决把格子放在一行这个问题。
清除浮动影响clear，只需要做一次浮动清除。

3.绝对定位
是相对于最近的已定位的父物体标签去计算的，父物体是body，body相当于浏览器
.three{
position:absolute;
top:20px;
left:10px;
width:100px;
}

4.相对定位
相对于自己原来的位置。原来的框还在文档流里面占有空间。

.two{
position:relative;
}

5.固定定位
是相对于整个浏览器来说的，其他的都不管
.three{
position:fixed;
}

---居家优品---

.title{
text-align: center;
font-family: “微软雅黑”;
color: #222;
}
.container{
width: 1190px;
height: 450px;
background-color: #00FFFF;
margin: 0 auto;
}
body{
background-color: #f0f3ef;
margin: 0rem;
padding: 0rem;
}
.left,.center,.right{
width: 370px;
height: 450px;
float: left;
margin: 10px;
background-color: white;
}
.left,.center{
margin-right: 10px;
}

Jessica巨人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ background-color: transparent; } .one{ width: 500px; background-color: aqua; } </sty
复制链接

扫一扫