CSS

最新推荐文章于 2024-08-31 21:18:22 发布

原创最新推荐文章于 2024-08-31 21:18:22 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

Java Web 专栏收录该内容

28 篇文章

订阅专栏

本文深入讲解CSS（层叠样式表）的基础知识，包括语法、选择器、优先级、引入方式及常见属性，如字体、背景、边框等，帮助读者掌握网页样式设计的核心技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        onsubmit事件提交表单是否成功
        表单的提交：input type="submit"
		 type="reset"
		 type="button"

一、框架标签

	frame-->包含一个HTML
		src:链接HTML页面地址
		name:定义一个当前的frame名称
	frameset 框架集-->包含两个或两个以上的HTML页面
		rows
		cols

二、CSS简介

CSS（Cascading Style Sheet)层叠样式表，css样式是为了标签追加修饰,一定是样式库中所定义的样式。在head标签中写style标签/每一个标签中都有style属性。

样式定义如何显示HTML元素，通常储存在样式表中。把样式添加到中，是为了解决内容与表现分离的问题。外部样式表通常极大提高工作效率。外部样式表通常存储在CSS文件中。多个样式定义可层叠为一。

1.样式层叠次序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4具有最高的优先权。

1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于<head>标签内部）
4.内联样式（在HTML元素内部）

因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优于以下的样式声明：<head>标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

2.CSS基础语法

2.1 CSS语法

css规则由两个主要的部分构成：选择器，以及一条或者多条声明。规则如下：

selector{declaration 1;declaration 2;...declaration N}

选择器通常是需要改变样式的HTML元素。每条声明由一个属性和一个值组成。属性(property)是希望设置的样式属性(style attribute)。每个属性都有一个值。属性和值被冒号分开。不同的属性之间由分号分开。

selector{property:value}

范例：使用css基础语法

h1{color:red;font-size:14px;}
/修饰标题1文本字体颜色为红色，字号为14px。/
/h1就是选择器，color和font-size为属性，red和14px为属性值/

说明：

1）值的不同写法和单位：

除了英文单词red，我们还可以使用十六进制的颜色值#ff0000：

p{color:#ff0000;}
/设置p元素内的内容为红色./

为了节约字节，我们还可以使用css的缩写形式：

p{color:#f00;}
/设置p元素内的内容为红色./

此外，还可以通过两种方法使用RGB值：

p{color:rgb(255,0,0);}
p{color:rgb(100%,0%,0%);}

请注意，当使用RGB百分比，即使当值为0时也要写百分比符号。但是在其它的情况下就不需要这么做了。比如说，当尺寸为0像素，0之后就不需要使用px单位，因为0就是0，无论单位是什么。

2）多重声明：

如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号。这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。如：

p{text-align:center;color:red;}

为了增强样式定义的可读性，应该在每行只描述一个属性，如：

p{
    text-align:center;
    color:black;
    font-family:arial;
}

3.CSS引入样式的方式

1.行内样式（不推荐）
标签中指定style属性=“css属性：css属性值"
2.内部方式
	在head标签中指定style属性。
	选择器{
		css属性：css属性值；
	}
3.外部方式(实际开发，推荐使用)
	需要编写一个外部的css文件，然后导入这个css文件。
    3.1 外部链接导入：在head标签<link href="01.css" rel="stylesheet">rel:固定写法：关联层叠样表。导入01.css文件修饰HTML中的元素。
	选择器{
		css属性：css属性值；
	}
    3.2 导入外部样式单
    在<style.../>元素中使用@import来执行导入。使用@import的完整语法如下：
    @import url(样式单地址)
    如：
    <html>
        <head>
            <style type="text/css">
                @import "Outter.css";
            </style>
        </head>
        <body>......</body>
    </html>

4.CSS选择器

4.1 标签选择器（常用）

	样式中写一个元素名称
	<style>
	标签名称{
		css属性值;
	}
	</style>

4.2 类(class）选择器（常用）（优先级大于标签选择器）

在标签中指定一个class属性
	<style>
	[E].classValue{
		css样式；
	}
	</style>

其中，E是有效的HTML元素。指定该CSS定义对CSS属性值为classValue的E元素起作用。此处的E可以忽略，如果省略E，则指定CSS对该所有的class属性为classValue的元素都有作用。
为了让HTML页面支持选择器，W3C规定几乎所有的HTML元素都可指定class属性，该属性唯一的作用正是让class选择器起作用。如：

<html>
    <head>
    <style type="text/css">
        .myclass{
			width:240px;
			height:40px;
			background-color:#dddddd;
			}
		div.myclass{
			border:2px dotted black;
			background-color:#888888;
			}
    </style>
    </head>
    <body>
        <p class="myclass">class属性为myclass的p元素</p><br/>
	    <div class="myclass">class属性为myclass的div元素</div>
    </body>
</html>

效果：

上面页面中定义的两个css都可以作用于<div.../>元素，因此该元素显示的结果是两个css样式“迭加”的效果。既指定标签又指定class值的选择器的优先级更高。

4.3 id选择器（常用）优先级最高

<div id="dl1"></div>
在标签中指定一个id属性  id在标签中是唯一的
	<style>
	#id属性值{
		css属性值;
	}
	</style>
注意：在一个HTML页面中，id属性值必须是唯一的，不能重复。js后面的方法：通过id属性获取标签对象，如果id
同名，标签对象获取不到。
js部分 :document.getElementId("")属性值可能获取不到。

4.4 并集选择器

选择器1,选择器2{
	CSS样式;
}

并集选择器就是选择所有的满足选择器1，或者满足选择器2的标签，然后对其进行修饰。

如将4.5中的示例代码中"div .a"改为"div,.a"，那么结果为：

4.5 交集选择器（后代选择器，包含选择器）

选择器1 选择器2{//选择器2是选择器1的子标签
	CSS样式;
}

包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。先找到所有的选择器1，再从所有的选择器1代码中找到所有的选择器2中的代码。如：

<html>
    <head>
        <style type="text/css">
            div{
			    width:350px;
			    height:60px;
			    background-color:#ddd;
			    margin:5px;
		    }
		    div .a{
			    width:200px;
			    height:35px;
			    border:2px dotted black;
			    background-color:#888;
		    }
        </style>
    </head>
    <body>
        <div>没有任何属性的div元素</div>
	    <div>
		    <p class="a">处于div内部且class属性为a的元素</p>
	    </div>
	    <p class="a">没有处于div之内，但class属性为a的元素</p>
	    <hr/>
	</body>
</html>

效果：

4.6 通用选择器(通配符选择器 *)

4.7 伪类选择器

选择器优先级：id选择器>class选择器>标签选择器

5.CSS伪类选择器

CSS伪类：指定的是当前标签的状态。用于向某些选择器添加特殊的效果。
状态：    link状态：鼠标未访问过的状态。
          hover状态：鼠标经过标签的时候一种状态
          active状态：激活状态：鼠标点击了，但是没有松开的状态。
          visited状态：已经访问过的状态，鼠标点击没有松开。
CSS伪类选择器：如果想要循环的效果，必须遵循以下规则。
在css定义中，a:hover必须置于a:link和a:visited之后；a:active必须置于a:hover之后才是有效的。

	a:link{
	  //文本修饰
	text-decoration:none;//删除下划线
	color: #F00;
	}
	a:hover{//当前鼠标悬浮有一种效果展示
	color:#00F;
	text-decoration:underline;//加上下划线
	font-size:20px;
	}
	a:active{
	 color:#0F0;
	 text-decoration:none;//删除下划线
	font-size:24px;
	}
	a:visited{
	color:#CCC;
	font-size:26px;
	}

注意：

1)在CSS定义中，a:hover必须置于a:link和a:visited之后，才是有效的。

2)在CSS定义中，a:active必须置于a:hover之后才是有效的。

3）伪类名称对大小写不敏感。

6.CSS字体属性

格式:css属性（properties):css属性值（value)
<style>
  body{
	//字体颜色
	color:red;
	//字符间距
	letter-spacing:5px;
	//文本对齐方式（常用）
	text-align:center;
	//文本修饰（常用） none:去掉下划线  underline:加上下划线 overline :上划线 line-through:中划线
	text-decoration:line-through;
	//单词间距  解析CSS属性时，两个字组成一个单词
	word-spacing:10px;
}
</style>

font-family:字体类型 CSS样式库中的字体库
font-size:设置字体大小尺寸
font-style:字体样式  值：normal(默认）   italic:斜体  oblique斜体  二者的区别：italic的字体较oblique大
font-weight:设置字体的粗细  值：bold适当加粗
font简写属性
	body{
		font-family:"宋体";/"黑体"/"楷体"
		font-size:20px;
		font-style:oblique;
		font-weight:bold;
	}
CSS字体的简写属性
font:font-style font-weight font-size font-family
如：font:italic bold 26px "楷体

7.CSS背景属性

background-color:背景属性
background-img:设置背景图片，默认x轴和y轴重复
background-repeat：设置图像是否重复以及如何重复。 值：repeat（默认） no-repeat:不重复 repeat-x:只在x轴重复 repeat-y:只在y轴重复
background-position:设置图像的起始位置。值：top图片的位置 left 图片在浏览器中的位置
	body{
	background-color:yellowngreen;
	background-image:url(img/图片名）；
	background-repeat:no-repeat;
	background-position:top left;(默认）
背景的简写属性：background:background-color background-image background-repeat background-position
如：background:#00F url() no-repeat top center

8.CSS浮动属性

	CSS浮动:float属性
	               left/right
	        当前某个设置了浮动,那么这个标签就脱离当前文档流,只遇到边框停止
	        后面依次排队的元素就会默认的填充当前文档流(符合一种流式布局)

    有时候考虑页面布局:带浮动属性标签会影响后面标签的布局,需要设置当前该标签
    左右两边不浮动(不会随着浮动的元素进行变化)
        CSS clear属性:both;

9.CSS边框属性

	div{
		
		/*边框线的颜色
		  border-color :是边框颜色简写属性
		  分别设置四个边框的颜色
		 * */
		/*border-top-color: #00F;
		border-left-color: #0F0;
		border-right-color: #F00;
		border-bottom-color: #C90;*/
		
		/*边框颜色的简写属性:border-color
		 四个边设置颜色/宽度/样式都遵循这个规则:
		   上  右  下 左
		  
		 边框的颜色/宽度/样式:某一边没有给定颜色/宽度/样式,会
		 取对边颜色/宽度/样式
		   
		 * */
		/*border-color: #00F;*/
		
		/*边框线宽度:
		   分别设置四个边框线的宽度
		 * */
		/*border-top-width: 10px;
		border-left-width: 20px;
		border-right-width: 30px;
		border-bottom-width: 40px;*/
		/*border-width:边框的简写属性*/
		/*border-width: 10px;*/
		
		/*
		 如果块标签想指定边框的显示效果,那么必须要指定边框的样式
		  border-style
		       solid:单实线
		       double:双实线
		       dotted:点
		       dashed:虚线
		 * */
	   /*设置四个边的样式*/
	  /*border-top-style: solid;
	  border-left-style: double ;
	  border-right-style: dotted ;
	  border-bottom-style: dashed ;*/
	 
	 /*边框样式的简写属性*/
	/*border-style: solid;*/
	
	/*边框的简写属性
	   border:边框宽度  边框样式  边框颜色
	 * */
	border: 3px solid #000;
	width: 200px;
	height: 200px;
		
	}

10.CSS定位

position定位属性（3种方式）
相对定位：relative  相对于原来元素的位置进行移动。
绝对定位：absolute 相对于父标签(一般指body，或其它父标签)的位置进行移动。
固定定位：fixed
//设置id为adv定位方式
#adv{
	background-color:
	//应用场景：网页中的广告，关闭不了。
	position：fixed;
	top:200px;
	left:420px;
}

练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>这是我的CSS练习文件</title>
		<style>/*添加style进行注释*/
		#id1{
			/*字体属性的简写方式 font:font-style font-weight(设置字体的粗细) font-size font-family*/
			font:italic bold 26px "楷体";
		}
		/*元素选择器*/
		div{
			background-color:greenyellow;
			font:italic normal 30px "微软雅黑";
		}
		/*背景的简写属性  background:background-color background-image background-repeat background-position*/
		p{
			background-position: center;
			background-color:mediumvioletred;
			font:oblique "eras bold itc" 20px "宋体";
		}
		/*如果没有文字，即使选中也不会显示图片*/
		.class1{
			background-image:url(../img/捕获.PNG);
			background-repeat:np-repeat;
			background-position:center;
		}
		#id2{
			float:right;/*id2设置了浮动，该标签将会脱离当前文档流，只遇到边框停止。*/
			font:oblique bold 30px "楷体";
			background:cadetblue;
		}
		/*边框的简写属性：边框宽度 边框样式 边框颜色*/
		.class2{
			border:20px dotted lightgreen;
			font:normal normal 30px "微软雅黑"; 
		}
		</style>
	</head>
	<body>
		<span id="id1">我的第一个CSS文件</span>
		<div>div的文字</div>
		<p>p的文字</p>
		<div class="class1">我将会是一张图片</div>
		<p id="id2">使用css的浮动属性</p>
		<p>学好Java、网络非常重要</p>
		<div class="class2">边框属性</div>
	</body>
</html>

效果展示：