前言
说到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>
页面效果图: