Java CSS

最新推荐文章于 2022-07-06 16:55:30 发布

simplezhao

最新推荐文章于 2022-07-06 16:55:30 发布

阅读量296

点赞数

文章标签： css java

本文链接：https://blog.csdn.net/simplezhao/article/details/118896195

版权

Css代码的规范

放置规范:
在< style>标签内容体中书写css,样式代码。
< style>标签放置在<head标签之中。

格式规范:
选择器名称 {属性名:属性值;属性名:属性值;…….}
选择器:即指定CSS样式作用在哪些HTML标签上

在这里插入图片描述

代码规范: 。
属性名和属性值之间是键值对关系。
属性名和属性值之间用“：”连接，最后“;”结尾;
例如:font-size;120px;

如果一个属性名有多个值，多个值之间用空格隔开。
例如:border:5px solid red;

css注释：/ * sss* /

css选择器

元素选择器

将相同样式作用在多个同名标签上
HTML标签又名HTML元素。
元素选择器:即以HTML标签名作为选择器名称。
作用:选择CSS样式代码作用于对应标签名的标签上。

格式。
标签名{
/ * CSS样式代码* /
}

类选择器

每个HTML标签都有一个class属性，class 属性值即为类名。
类选择器:即以HTML的类名(class 属性值)作为选择器名称。.
作用:选择CSS样式代码作用于对应类名的HTML标签上。
●格式:。
.类名{

/*CSS样式代码 */
}
适用范围:适用于将样式一次作用在相同类名的标签上。

id选择器

每个HTML标签都有一个id属性，id 的属性值必须在本页面是唯一的。
id选择器:即以HTML的id (id属性值)作为选择器名称。。
作用:选择CSS样式代码作用于基个规定_id值的html标签.上。
●格式:
#id值{
/*CSs样式代码 */
}
适用范围:适用于将样式作用某个标签上。

层级关系

格式：
选择器1 选择器2{
样式
}
表示选择器1下面的选择器2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>div font{
			color:red;
		}</style>
		<title></title>
	</head>
	<body>
		<div><font>我是红的</font></div>
		<font>我是黑的</font>
	</body>
</html>

在这里插入图片描述
只改变div下面的font里的样式

边框属性

所有的HTML标签都有边框，默认边框不可见。

border

设置边框的样式
格式：宽度样式颜色
例如：border: 1px solid red; 1像素实线颜色
线条样式：solid 实线 none 无边 double 双线

width

设置标签的宽度

height

设置标签的高度

background-color

用于设置标签的背景颜色。
背景颜色设置的两种主流方式:
①英文单词
例如: red,blue,yellow
②颜色代码
格式: #红绿蓝，每一个颜色用两个16进制位数表示。
例如: ff100 红色ff，绿色11，蓝色00，红色颜色最重，绿色其次，没有蓝色。

布局

float

通常默认的排版方式,将页面中的元素从.上到下一一罗列,而实际开发中,需要左右方
式进行排版，就需要使用浮动属性
格式：
选择器{float:属性值;}
常用属性值：
none：元素不浮动（默认）
left：元素向左浮动
right：元素向右浮动
注意:因为元素设置浮动属性后,会脱离原有文档流（脱离原有的样式），从而会影响其他元素的样式,所
以设置浮动以后，页面样式需要重新调整。

转换

display

HTML提供丰富的标签,这些标签被定义成了不同的类型，一般分为:块级元素和行内元素。
块元素:以区域块方式出现。每个块标签独自占据一整行或多整行。块结束会自动换行

常见的块元素: < h 1>、< p>、< div>、< u>等

行内元素:根据内容多少来占用行内空间，不会自动换行。

常见的行内元素: < span>< a>等。

’
display属性可以使得元素在行内元素和块元素之间相互转换。

- 格式:

选择器{display:属性值}

- 常用的属性值:

block:此元素将显为块元素(块元素默认的 display属性值）·
inline:此元素将显示为行内元素(行内元素默认的 display属性值）。
none:此元素将被隐藏，不显示，也不占用页面空间。

字体

font-size
用于设置字体的大小。
color
用于设置字体的颜色。·

css的盒子模型

在这里插入图片描述

边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>div{
			border: 1px solid red;
			padding-top: 10px;
		}</style>
		<title></title>
	</head>
	<body>
		<div>内容体</div>
	</body>
</html>

在这里插入图片描述

在这里插入图片描述
边框有四个属性可以设置:
border-top:上边框,
border-right:右边框
border-bottom:下边框,·
border-left:左边框,
通用性设置:,
一次性设置上下左右边框样式为1像素的实体红色线·border:1pxsolidred;

内边距

在这里插入图片描述

内边距有四个属性可以设置:
padding-top:上边距。
padding-right:右边距。
padding-bottom:下边距。
padding-left:左边距。

通用性设置:
一次性设置上下左右内边距距离为10PX
padding:10px;

外边距

在这里插入图片描述
外边距有四个属性可以设置:
margin-top:上边距,
margin -right:右边距
margin -bottom:下边距
margin -left:左边距
通用性设置:
一次性设置上下左右外边距距离为10PX
margin:10px;

css与html结合

内部样式

行内样式

行内样式，是通过标签的style属性来设置元素的样式。

格式:
<html标签 style="css 样式代码”/>

示例：

<a style="color: aqua;font-size: 50px;">示例</a>

在这里插入图片描述

< style>标签

适用于多个一次性设置

外部样式

< link/>标签方式

< link/>又称为链入式,是将所有的样式放在一个或多个以.css,为扩展名的外部样式表文件中，通过< link>标签将样式连接到HTML文档中。
格式:
< link rel=“stylesheet” type=“text/css” href=“css文件路径”/>
rel=“stylesheet” ,固定值，表示样式表。
type=“text/css”，固定值，表示css类型。
href，表示css.文件位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./css/demo1.css" />
		<title></title>
	</head>
	<body>
		<div>内容体</div>
	</body>
</html>