Java Web_CSS

本文介绍了CSS与HTML的结合方式,包括在标签中写style、在头文件写style标签、使用@import引入、用link引入外部文件等。还阐述了三种基本选择器及其优先级,扩展选择器,CSS盒子模型的边框、内边距、外边距设置,以及CSS布局定位的属性值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CSS与HTML结合方式:
(1)在每个HTML标签中都有个style
(2)在头文件中写一个style标签

<style type="text/css">
(选择器名称)div{
	background-color:blue;
	color:red;
}
</style>

(3)在style标签中,使用:@import url(css路径)(缺点:在某些浏览器中不起作用)

<style type="text/css">
@import url(css路径)
</style>

(4)使用头标签link,引入外部css文件

<link rel="stylesheek" type="text/css" href="css文件路径"/>

(5)三种基本选择器
标签选择器:

div{
	background-color:red;
}

class选择器:

div.classname{
	background-color:blue;
}

id选择器:

div#idname{
	background-color:orange;
	}

(6)选择器的优先级:

style>id>class>标签

(7)扩展选择器
关联选择器:

div p{
	background-color:green;
	}

组合选择器:

div,p{
	background-color:#156544;
	}

伪元素选择器:
*css定义好的一些样式,可以直接使用。

css盒子模型
(1)边框
border:统一设置

border:2px solid blue

分别设置:
上 border-top
下 border-bottom
左 border-left
右 border-right

(2)内边距
padding:统一设置

padding:20px

上 padding-top
下 padding-bottom
左 padding-left
右 padding-right

(3)外边距
margin:统一设置

margin:20px

上 margin-top
下 margin-bottom
左 margin-left
右 margin-right

CSS布局的定位
position:
**属性值:
-absolute:将对象从文档流中拖出,使用left,top,right,bottom等属性进行定位
-relative:对象不可层叠,使用left,top,right,bottom等属性在正常界面进行偏移

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值