【JavaWeb】CSS_css的语法和三种使用方式

最新推荐文章于 2023-03-08 02:02:47 发布

Enjoy96

最新推荐文章于 2023-03-08 02:02:47 发布

阅读量2k

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Enjoy96/article/details/79047972

版权

JavaWeb 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1.css全称：cacading style sheet（层叠样式表）

2.作用：对html标签进行操作（标签中文本内容进行设置），美化页面

CSS语法

1.语法格式：属性：属性值；

2.css属性(property)：给标签设置 “ 字体，颜色，背景······ ”

3.css属性值(value)：给属性指定 “ 字体大小，字体颜色，背景图片······ ”

CSS的三种使用方式

1.行内样式：

（1）在每个html标签里都会有 style 属性，例如：<a href="" style="font-size:24px;color:#F00">超链接</a><br/>

（2）格式：<a href="" style="在style里指定css属性">超链接</a><br/>

（3）使用这种方式的弊端：①标签和样式混合在一起，不利于维护

②书写过程麻烦，且不美观

2.内部样式：

（1）位置：在<head></head>标签体中有<style></style> 标签

（2）书写样式：

注：css中style标签体内的注释和Java相同，也为“/* */”

方式2例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css体验</title>
<style type="text/css">
	
	a{
		/*css中的注释*/
		/*
		font-size:24px;
		color:#F00;		
		*/
	}
	
</style>

</head>

3.外部样式：

（1）位置：在<head></head>标签体中 <link /> 标签

（2）作用：导入外部的css文件，使用该标签导入

（3）标签格式：<link href="链接外部的css文件" rel="stylesheet" />

（4）优点：开发中使用的大多为此方式，css样式和html标签分离开来，有利于维护

方式3例子：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css体验</title>

<!--使用link标签导入外部 css文件-->
<link href="07.css" rel="stylesheet" />

</head>

<body>
    <a href="">超链接</a><br/>
    <a href="">超链接</a><br/>
    <a href="">超链接</a><br/>
    <a href="">超链接</a>
</body>
</html>



导入的css文件：
@charset "utf-8";
/* CSS Document */
a{
	font-size:24px;
	color:#0F0 ;
}