CSS特性

最新推荐文章于 2024-07-22 20:28:40 发布

linsa_pursuer

最新推荐文章于 2024-07-22 20:28:40 发布

阅读量423

点赞数

分类专栏： JSP基础文章标签： css background padding overflow hover

本文链接：https://blog.csdn.net/linsa_pursuer/article/details/78418990

版权

JSP基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.使用CSS（CSS是层叠样式表，用来美化网页。）的三种方式

1.内联方式：
在<body>里面；如：<h1 style="color:red;">CSS</h1>

2.内部样式表：
在<head>里面；如：
<style>
/*CSS注释这样写*/
h2{
color:blue;
}
</style>

3.外部样式表：
在<head>里面；如：

<link rel="stylesheet" href="my.css">

my.css里面：
p{
color:purple;
}

二.CSS规则特性

1.继承性：父元素的样式可以被子元素继承（只有字体，字号，颜色可以继承）
body{
font-family:"微软雅黑","文泉驿正黑","黑体";
}

2.层叠性：给元素增加不同的声明，效果会叠加
h1{
color:red;
font-size:50px;
}

3.优先级：若重复定义最后一次为准，样式表就近优先
h2{
color:yellow;
}
h2{
color:green;
}

三.CSS选择器
1.元素选择器：p{color:purple;}
2.类选择器<h1 class="h1">rose</h1>
.h1{color:purple;}

3.id选择器：<div id="d1">lily</div>
#d1{color:red;}

4.选择器组（字体加粗）
.love,#p4{font-weight:bold;}

5.派生选择器
（1）后代选择器（子孙都可以选）：p strong{color:red;}

（2）子元素选择器（只有儿子可以选）：p>strong{color:red;}

6.伪类选择器
link（未访问过的超链接）：a:link{color:green;}

visited（已访问过的超链接）：a:visited{color:red;}

action（选择激活态的按钮,点下去变）：<input type="button" value="测试" id="b1">
#b1:active{background-color:yellow;}

hover（选择悬停态的图片）
<img src="../images/01.jpg">
<img src="../images/02.jpg">
img:hover{width:350px;height:350px;}

focus（选择有焦点的框——有光标闪烁）
<input type="text" id="t1">
#t1:focus{background-color:green;}

四.CSS声明
1.border（边框）
（1）border（四边设置）width，style，color
单边设置：border-left，border-right，border-top，border-boottom

（2）样式单位：%（百分比），in（英寸），cm（厘米），mm（毫米），pt（磅1pt等于1/72英寸）
px（像素），em——1em等于当前字体尺寸——2em等于当前字体尺寸的两倍

（3）表示颜色：单词，十进制rgb（10，20，30），百分比rgb（10%，20%，30%），
十六进制#6688CC——>#68C

（4）overflow（内容溢出）：visible，hidden，scroll，auto
<p>雨打湿了眼眶，年年倚井盼归堂，最怕不觉泪已拆两行。
我在人间彷徨，寻不到你的天堂。东瓶西镜放恨不能遗忘。
又是清明雨上，折菊寄到你身旁，把你最爱的歌来轻轻唱！</p>
/*当固定元素的高度时，可能会造成其内容的溢出*/
p{
width:300px;
height:60px;
overflow:auto;
}

2.box（框模型）
（1）四边设置：margin（外边距），padding（内边距）——元素到边框的距离，border（边框）
总宽=width+2border+2padding+2margin
总高=height+2border+2padding+2margin
#d1{
padding: 10px;
margin: 20px;
}

（2）四个方向设置不同的边距：
#d2{
/*顺序：上右下左（按表盘顺序）*/
padding: 10px 20px 30px 40px;
margin: 10px 20px 30px 40px;
}

（3）单个方向设置边距：
#d3{
padding-left: 20px;
margin-bottom: 10px;
}

（4）对称设置边距：
#d4{
/*顺序：上下左右*/
padding: 10px 30px;
margin: 20px 40px;
}

（5）对称设置外边距的特例：
当左右值为auto时，元素将水平居中
#d5{
margin: 10px auto;
}

3.背景
（1）背景色：
body{
background-color:#ccc;
}

（2）背景图片：
属性：background-image:url();
background-repeat:repeat（在水平跟垂直方向重复），
repeat-x，repeat-y，no-repeat（仅显示一次）
background-position:x%y%,xy,left,center,right,top,bottom
background-attachment: fixed（背景图像固定），scroll（默认滚动）

body{
background-image:url(../images/background.png);
background-repeat:repeat-y;
background-position:center;
background-attachment: fixed;
}

（3）背景渐变模糊：
background-color:rgba(0,0,0,0.1);——背景色透明度
/*box-shadow: 水平偏移量垂直偏移量模糊范围阴影颜色*/
box-shadow: 0 3px 6px #ccc;
/*背景渐变*/
background: linear-gradient(#f5f5f5,#e6e6e6);

CSS选择器Demo4如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
	/*2.类选择器*/
	.love{
		color:orange;
	}
	/*3.id选择器*/
	#p4{
		color:green;
	}
	/*4.选择器组*/
	.love,#p4{
	/*加粗*/
		font-weight:bold;
	}
	/*5.派生选择器*/
	/*1)选择某元素的子孙*/
	#p5 b{
		color:red;
	}
	/*2)选择某元素的二字*/
	#p5>b{
		font-size:30px;
	}
	/*6.伪类选择器*/
	/*1)选择未访问过的超链接*/
	a:link{
		color:green;
	}
	/*2)选择已访问过的超链接*/
	a:visited{
		color:red;
	}
	/*3)选择激活态的按钮*/
	#b1:active{
		background-color:yellow;
	}
	/*4)选择有焦点的框*/
	#t1:focus{
		background-color:green;
	}
	/*5)选择悬停态的图片*/
	img:hover{
		width:350px;
		height:350px;
	}
</style>
</head>
<body>
	<p class="love">apple</p>
	<p>banana</p>
	<p class="love">pear</p>
	<p id="p4">mango</p>
	<p id="p5"><b>Apple</b> apple <u>I <b>love</b> to</u> eat.</p>
	<p>
		<a href="http://www.google.com">谷歌</a>
		<a href="http://www.apple.com">苹果</a>
		<a href="http://www.baidu.com">百度</a>
		<a href="http://maven.aliyun.com/nexus/">Maven</a>
	</p>
	<p>
		<input type="button" value="测试" id="b1">
	</p>
	<p>
		<input type="text" id="t1">
	</p>
	<p>
		<img src="../images/01.jpg">
		<img src="../images/02.jpg">
		<img src="../images/03.jpg">
	</p>
</body>
</html>

border（边框）Demo5如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style>
	/*给单个边设置边框*/
	h1{
		border-left: 10px solid blue;
	}
	/*给四个边设置相同的边框*/
	p{
		border: 1px dashed red;
	}
	/*当固定元素的高度时，可能会造成其内容的溢出*/
	p{
		width:300px;
		height:60px;
		overflow:auto;
	}
</style>
</head>
<body>
	<h1>清明雨上</h1>
	<p>雨打湿了眼眶，年年倚井盼归堂，最怕不觉泪已拆两行。
	我在人间彷徨，寻不到你的天堂。东瓶西镜放恨不能遗忘。
	又是清明雨上，折菊寄到你身旁，把你最爱的歌来轻轻唱！</p>
</body>
</html>

box（框模型）Demo6如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOX</title>
<style>
	div{
		border: 1px solid red;
		width:100px;
		height:100px;
	}
	/*1.四个方向设置相同的边距*/
	#d1{
		padding: 10px;
		margin: 20px;
	}
	/*2.四个方向设置不同的边距*/
	#d2{
		/*顺序： 上 右 下 左*/
		padding: 10px 20px 30px 40px;
		margin: 10px 20px 30px 40px;
	}
	/*3.单个方向设置边距*/
	#d3{
		padding-left: 20px;
		margin-bottom: 10px;
	}
	/*4.对称设置边距*/
	#d4{
		/*顺序：上下 左右*/
		padding: 10px 30px;
		margin: 20px 40px;
	}
	/*5.对称设置外边距的特例：
	当左右值为auto时，元素将水平居中。*/
	#d5{
		margin: 10px auto;
	}
</style>
</head>
<body>
	<div id="d0">d0</div>
	<div id="d1">d1</div>
	<div id="d2">d2</div>
	<div id="d3">d3</div>
	<div id="d4">d4</div>
	<div id="d5">d5</div>
</body>
</html>

背景Demo7如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景</title>
<style>
	body{
		background-image:url(../images/f1.jpg);
		background-repeat:repeat-y;
		background-position:center;
	}
	div{
		border: 1px solid red;
		width: 60px;
		height: 60px;
		margin: 10px auto;
	}
	/*设置背景的简化方式
		background：颜色 图片 平铺 位置；*/
	.bullet{
		background:url(../images/bullet.png)
		no-repeat center;
	}
	.bee{
		background:url(../images/bee0.png)
		no-repeat center;
	}
	/*固定背景图*/
	body{
		background-attachment: fixed;
	}
</style>
</head>
<body>
	<div class="bee"></div>
	<div class="bee"></div>
	<div class="bee"></div>
	<div class="bee"></div>
	<div class="bee"></div>
	<div class="bee"></div>
	<div class="bee"></div>
	<div class="bullet"></div>
	<div class="bullet"></div>
</body>
</html>