Java学习笔记——css（层级样式表）

最新推荐文章于 2024-08-21 15:03:08 发布

black_wangyk

最新推荐文章于 2024-08-21 15:03:08 发布

阅读量744

点赞数 1

分类专栏： Java学习笔记 Web学习笔记文章标签： html css

本文链接：https://blog.csdn.net/ThisisK/article/details/107700738

版权

Java学习笔记同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

Web学习笔记

4 篇文章 0 订阅

订阅专栏

作用：
1）改变HTML的样式
2）提高CSS代码的复用
3）使HTML代码与CSS代码分离，便于维护

语法格式：
选择器{
CSS属性:值;
CSS属性:值;
CSS属性:值
}

HTML中使用CSS的三种方式
1）在html标签内使用style属性引入CSS代码
2）在HTML的head标签内使用style标签
3）在HTML页面引用自己外部的CSS文件
在head标签内使用{ }标签引入
css文件是自己编写的，已css为后缀

<link href="路径" rel="引入文件与当前HTML的关系" tyle="告知浏览器引入文件的类型">（css：rel="stylesheet" tyle="text/css"）

CSS选择器

标签名选择器：
通过指定标签名选择，会选择到当前页面所有的指定标签
id选择器：
通过标签的id属性，选择的某一个标签
#id名{
}
类（class）选择器：
给html标签设置class属性，让某些标签成为同一类，即可使用类选择器给同一类设置，同一个标签可以拥有多个标签
属性选择器：
通过hteml的标签名加属性名加值选择某几个标签（input[type=“radio”] 选择单选框）
层级选择器
当嵌套层级比较多时，层次递进找到标签
class名 id名 {}
组合选择器
选择器名1,选择器名2,…{}
子级选择器
父级标签名>子集标签名{}（选择指定父集内的子集）标签名1+与标签名1平级的标签名2{}（选择标签名1之后的最近的标签名

CSS属性

文本属性
color

边框属性
border ：在一个声明中设置所有的边框属性。
border-xxx ：在一个声明中设置所有的下边框属性。
border-xxx-color ：设置xxx框的颜色。
border-xxx-style ：设置xxx框的样式。
border-xxx-width ：设置xxx框的宽度。
xxx处是上top 下 bottom 左 left 右 right

尺寸属性
width ：横向
height ：纵向

背景属性
background ：在一个声明中设置所有的背景属性。
background-color ：设置元素的背景颜色。
background-image：设置元素的背景图像。
background-position ：设置背景图像的开始位置。
background-repeat ：设置是否及如何重复背景图像。
background-size ：规定背景图片的尺寸。 3

body {
		/* background-color: black; */
		/* 引入图片,默认平铺 */
		background-image: url("6.jpg");
		/* 
			no-repeat 不平铺
			repeat    平铺 (默认)
			repeat-x  x轴平铺
		 */
		background-repeat: no-repeat;
		/* 背景图片尺寸 :宽度 高度
			如果只给宽度,高度自动调整
		 */
		background-size: 500px;
		/* 设置位置固定,下面的位置调整才会生效 */
		background-attachment:fixed;
		/* 图片位置 */
		background-position: right bottom;
	}

定位属性

先通过position属性设置定位类型,
然后在通过left top bottom right 进行移动
bottom ：设置定位元素下外边距边界与其包含块下边界之间的偏移。
position
规定元素的定位类型。
right ：设置定位元素右外边距边界与其包含块右边界之间的偏移。
top ：设置定位元素的上外边距边界与其包含块上边界之间的偏移。
left ：设置定位元素左外边距边界与其包含块左边界之间的偏移。
display ：规定元素应该生成的框的类型。

posttion的属性值
absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed ：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative ：生成相对定位的元素，相对于其正常位置(在文档流中的位置)进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。


```xml

```xml
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#i1 {
		width: 250px;
		height: 100px;
		border: 2px solid red;
		/* 位置类型 : 相对relative  绝对absolute  */
		position:relative ;
		left: 10px;
		top: 10px;
	}
	#i2 {
		width: 250px;
		height: 100px;
		border: 2px solid red;
		/* 位置类型 : 相对relative  绝对absolute  */
		position:relative ;
		left: 100px;
	}
	#i3 {
		width: 250px;
		height: 100px;
		border: 2px solid red;
		/* 位置类型 : 相对relative  绝对absolute  */
		position:fixed ;
		left: 10px;
		top: 10px;
	}
	div {
		width: 500px;
		height: 500px;
		border: 2px solid red;
		position: relative;
		left: 100px;
		top: 100px;
	}
</style>
</head>
<body>
	<div>
		<input id="i1" value="默认值1">
		<input id="i2" value="默认值2">
		<input id="i3" value="默认值3">
	</div>
	
</body>

盒子模型

<div></div>
外边距属性
内边距属性

<!-- 行级块:默认占一行 -->
<div id="d1"> 默认值 </div>

<span>默认值默认值默认值</span>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#d1 {
		width: 300px;
		height: 300px;
		border: 3px solid red; 
		/* 设置4边: 上右下左 */
		/* 设置两边 : 上下   左右 */		
		/* padding: 300px 300px ; */
		/* 可以单独设置某一边 */
		 padding-left:  100px;
		 padding-top: 100px;
		 /* 左外边距 */
		 margin-left: 550px;
		 margin-top: 130px; 
	}
	
	#d2 {
		width: 200px;
		height: 200px;
		border: 1px solid green; 
	}
	
</style>
</head>
<body>
	<div id="d1">
		<div>
			用户名<input><br>
			密码<input><br>
		</div>
	</div>
</body>
</html>