CSS样式：进行页面美化和布局控制

最新推荐文章于 2022-02-10 10:33:04 发布

czw10000

最新推荐文章于 2022-02-10 10:33:04 发布

阅读量1.4k

点赞数

分类专栏： javaEE HTML 文章标签： java

本文链接：https://blog.csdn.net/weixin_48722971/article/details/111703471

版权

javaEE 同时被 2 个专栏收录

88 篇文章 2 订阅

订阅专栏

HTML

21 篇文章 0 订阅

订阅专栏

CSS样式：进行页面美化和布局控制

概念：Cascading Style Sheet 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，可以同时生效。
好处：
1. 功能比较强大
2. 将内容展示和样式控制进行分离
  - 降低耦合度，解耦
  - 分工协作更方便
  - 提高样式的可复用性
使用：
```
<style type="text/css">
    选择器 {
        属性1:属性值;
        属性2:属性值;
        属性3:属性值1 属性值2 属性值3...;
        ...
        ...
    }
</style>
```
1.选择器严格区分大小写,属性和属性值不区分大小写，属性与属性之间使用分号隔开，最后一个属性可以省略不写，如果一个属性有多个属性值，多个属性值之间用空格隔开，type属性可以省略不写。
1. 如果一个标签有多个css样式控制，按照就近原则进行覆盖。
2. css样式的种类，有三种：行内样式、内联式、外连式行内样式>内联式>外联式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS样式控制</title>
 <!-- 一般情况下，有三种方式表达css样式
	第一种：内部样式(内联式)，存放的位置在head标签内，需要借助标签style
	第二种：行内样式，直接在标签的内部，通过style属性进行样式控制
	第三种：外连式，单独创建一个css文件，文件的命名格式为:xxx.css,在head标签内通过link标签进行关联，
	              常用的是第三种
 -->
 <!-- 使用第一种方式实现以下需求： -->
 <!-- 设置div的高度为500px，宽度为800px，字体大小为30px，字体使用微软雅黑，字体颜色为红色
      div设置一个背景图像为2.jpg，满铺，不溢出
  -->
 <style type="text/css">
 	div{  
 		height: 500px;
 		width: 800px;
 		font-size: 30px;
 		font-family: "微软雅黑";
 		color: red;
 		/* 样式注释   ctrl+shift+/
 		   颜色表示
 		      1. 英语单词，red black、yellow、blue、green、cyan、...
 		      2. rgb(①,②,③)  每个值都是0~255     红绿蓝这三种基色
 		      3. 十六进制表示法:#值1值2值3 rgb 00~FF
 		
 		*/
 		background-image: url(./image/2.jpg);
 		background-size: 100% 100%;
    }
 </style> 
 <!-- 使用link标签关联css文件 -->
 <link rel = "stylesheet" href="./span.css">
</head>
<body>
	<div>JFinal 是基于Java 语言的极速 web 开发框架，
	          其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。
	          在拥有Java语言所有优势的同时再拥有ruby、python等动态语言的开发效率。
	</div>
	<!-- 第二种方式 行内样式
		  高度为300px,宽度为500px,居中展示(div在页面的中间)，字体大小为20px，字体颜色为蓝色
		  字体使用"仿宋"，字体斜体，字体加粗
		  背景使用3.jpg，满铺，不溢出
	-->
	
	<div style="height: 300px;width: 500px;margin: -300px 500px;font-size: 20px;
	           color: blue;font-family: '仿宋';font-style: italic;font-weight:bolder;background-image: url('./image/3.jpg');
	           background-size: 100% 100%">
		JFinal将一直坚持以下设计目标：开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。
		在坚持以上设计目标的同时，基于微内核+全方位扩展型架构，打造功能极度全面WEB+ORM开发框架。
		彻底解放开发者的生产力，彻底改善开发者的开发体验，让软件开发成为一件轻松愉快的事情。
	</div>
	
	<span>Final 采用微内核全方位扩展架构，全方位是指其扩展方式在空间上的表现形式。
		  JFinal由Handler、Interceptor、Controller、Render、Plugin五大部分组成。
	</span>
</body>
</html>

@CHARSET "UTF-8";
/* 
   宽度为300px，
   高度为500px
   背景为4.jpg
   背景可以溢出 
   字体为绿色 
   
 */
span{
	/* inline----> block */
	display:block;
	width: 300px;
	height: 500px;
	background-image: url(./image/4.jpg);
	color:green;
}

czw10000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS样式：进行页面美化和布局控制

CSS样式：进行页面美化和布局控制概念：Cascading Style Sheet 层叠样式表层叠：多个样式可以作用在同一个html的元素上，可以同时生效。好处：功能比较强大将内容展示和样式控制进行分离降低耦合度，解耦分工协作更方便提高样式的可复用性使用：<style type="text/css"> 选择器 { 属性1:属性值; 属性2:属性值; 属性3:属性值1 属性值2 属
复制链接

扫一扫