CSS入门（一）第一个CSS程序

最新推荐文章于 2024-07-24 11:16:38 发布

程序猴jwang

最新推荐文章于 2024-07-24 11:16:38 发布

阅读量744

点赞数 2

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_21046965/article/details/83592645

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

说到CSS，其实作为Java开发人员来讲，我们无需了解太多，只需懂得大概即可！其内部参数定义十分复杂，专修前端的同学可考虑深入的学习，我这里也就是抛砖引玉罢了!

方法

1.CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

个人理解：简单的说就是人和衣服的关系，如就是HTML、衣服就是CSS。我们知道HTML用来描述网页的基本结构，但是没有CSS的帮助，一个网页是奇丑无比的！比如之前HTML入门中的一系列网页样例。如同人与衣服的关系，CSS用来修饰HTML，没有CSS，HTML照样可以运行！

2.CSS的定义和声明

定义：

声明：

CSS的声明有以下三种方式：

在标签上使用style属性进行声明（此声明会将css样式直接作用于当前标签）

<hr style="background-color: blue;height:50px;"/>

在head标签中使用style标签声明（此声明一般声明当前网页的公共样式或者给某个标签的单独样式）

<!--声明css代码域-->
<style type="text/css">
	hr{
		width: 50%;
		height: 20px;
		color: red;
		background-color: red;
	}
</style>

在head标签中使用link标签引入外部声明好的css文件（此声明相当于调用,解决了不同网页间样式重复使用的问题，一次声明，随处使用，常用）

<!--引入外部声明好的css文件-->
<link rel="stylesheet" type="text/css" href="css/my.css"/>

my.css定义了hr相关的修饰。

3.第一个CSS程序

我们这里使用一个CSS操作一下div元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<div id="" style="background-color: green;width: 100px;height: 100px;float: left;">
			我是绿色
		</div>
		<div id="" style="background-color: blue;width: 100px;height: 100px;float: left;">
			我是蓝色
		</div>
	</body>
</html>

页面效果图：

程序猴jwang

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS入门（一）第一个CSS程序

前言说到CSS，其实作为Java开发人员来讲，我们无需了解太多，只需懂得大概即可！其内部参数定义十分复杂，专修前端的同学可考虑深入的学习，我这里也就是抛砖引玉罢了!方法1.CSS简介层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不...
复制链接

扫一扫

专栏目录