欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css定义及简单理解1

程序员文章站 2024-03-22 10:50:16
...

一.CSS(级联样式)

1.级联 关联,将两个分离的内容关联起来
2.样式表 css修饰网页样式的语法集
3.优点:(1)内容和表现形式分离 ;(2)网页表现统一,易修改;(3)样式丰富,使页面布局更灵活;
​(4)减少代码量 ;(5)独立页面,利于搜索引擎搜录.
4.css能做什么?
html写页面内容,css定义页面布局

二.基本语法

三种样式表

1.行内样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 行内样式表
		     <p style="属性名1:属性值1;属性名2:属性值2"></p>-->
		<p style="color: red;font-size:20px;">世间安得双全法,不负如来不负卿</p>
	</body>
</html>

2.内嵌样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 在head标签中加入css代码 -->
		<style type="text/css">
		/* 使用选择器 p(选择标签p){color: red;font-family:"行楷";font-size: 20px;} */
			p{color: red;font-family:"行楷";font-size: 20px;}
		</style>
	</head>
	<body>
		<p>世间安得双全法,不负如来不负卿</p>
	</body>
</html>

p{color: red;font-size: 20px;}

二.选择器(一)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器 p{color: #FF0000;font-size: 20px;} */
			/* 类选择器 <p class="p1"> .p1{}*/
			.p1{color: #FF0000;}
			.p2{color: aqua;}
			/* 选择器组合 提取共有属性 */
			.p1,.p2{font-size: 30px;}
			/* id选择器 <p id="t1"> #ti{} */
			#t1{color: cornflowerblue;font-size: 35px;}
			/* 通配选择器 *{} */
			*{color: cadetblue;font-size: 25px;}
		</style>	
	</head>
	<body>
		<p id="t1">仓央嘉措</p>
		<p class="p1">世间安得双全法,</p>
		<p class="p2">不负如来不负卿.</p>
		<p>pretty girl</p>
	</body>
</html>

选择器(二)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* .p1>b 子标签选择器:选中指定父标签的指定子标签
		    语法:父标签>子标签{}	*/
		/* .p1+p  选中指定标签的
		    语法:选择相邻选择器:器+相邻{}*/
		/* .p1~p  兄弟选择器:选中指定标签的兄弟标签
		    语法:选择器~兄弟{}*/
		{
			color:#FF0000;
		}	
		</style>
	</head>
	<body>
		<p class="p1">
			<b class="b1">p的大儿子</b>
			<b>p的大儿子</b>
			<i>
				<b class="b2">p的孙子</b>
				<b>p的孙子</b>
			</i>
		</p>
		<p>
			<b>p的2儿子</b>
			<b>p的2儿子</b>
		</p>
		<p id="p3">
			<b>p的3儿子</b>
			<b>p的3儿子</b>
		</p>
	</body>
</html>

背景

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				width:800px;
				height:600px;
				background-color: #00FFFF;
				background-image:url(img/21d8a6347215dc75.jpg);
				background-repeat: no-repeat;
				background-size: 600px 400px;
				background-position:center;
			}
		</style>
	</head>
	<body>
		<p>
		</p>
	</body>
</html>

文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{ 
			   color:#6495ED;
			   font-size: 20px;
			   font-family: 新宋体;
			   font-style: italic;
			   font-weight: bold;
			   /* text-decoration: line-through;删除线 */
			   text-indent: 2em;
			   letter-spacing: 5px;
			  }
			a{
				text-decoration: none;
				font-family:楷体;
			 }
			b{
				word-spacing:initial;
				font-family: Ink Free;
			}
		</style>
	</head>
	<body>
		<p>IP协议是用于将多个包交换网络连接起来的，它在源
		地址和目的地址之间传送一种称之为数据包的东西 ,它还
		提供对数据大小的重新组装功能，以适应不同网络对包大
		小的要求。IP的责任就是把数据从源传送到目的地。它不
		负责保证传送可靠性，流控制，包顺序和其它对于主机到
		主机协议来说很普通的服务。IP实现两个基本功能:寻址和
		分段。IP可以根据数据包包头中包括的目的地址将数据报传
		送到目的地址，在此过程中IP负责选择传送的道路，这种
		选择道路称为路由功能。如果有些网络内只能传送小数据报，
		IP可以将数据报重新组装并在报头域内注明。IP模块中包
		括这些基本功能，这些模块存在于网络中的每台主机网关上，
		而且这些模块(特别在网关上)有路由选择和其它服务功能。
        </p>
		<a href="">百度</a><br />
		<b>hello world hello world hello world</b>

	</body>
</html>

伪类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{
				text-decoration: none;
				color: #6495ED;
			}
			a:visited{
				color:#FF0000;
			}
			a:hover{
				color: aquamarine;
				text-decoration: underline;
			}
			a:active{
				color: chartreuse;
				text-decoration: underline;	
			}
			.bb:hover{
				color: #FF0000;
				text-decoration: underline;
				background-color:cyan;
			}
			.bb:active{
				color: #6495ED;
				font-family:楷体;
				font-size: 20px;
			}
			
			.tq:focus{
				color:hotpink;
				background-color: #7FFF00;
				font-size: 20px;
			}
			p:hover{
				color: #5F9EA0;
			}
		</style>
	</head>
	<body>
		<a href="http//www.baidu.com">百度</a>
		<a href="http//www.qq.com">腾讯</a><br/>
		<input type="button" value="进入" class="bb"/><br/>
		<input type="text" class="tq"/>
		<p>我依然爱你</p>
	</body>
</html>

透明

透明:opacity 从0.0到1.0

块级;行级;行级块标签

块级:无论内容多少,都独立占一行
	默认宽:与父级标签一致
	默认高:0或者内容的高度
	通过width和height设置宽高
<p><h1><ul><ol><hr><li>表格表单
    
行级:只占自身大小,不会占一行,不能设置宽高
    <a><b><i>
       
行级块:可以设置宽高,不占一行
        <img/><input/>
      注意p标签不可以包含任何的块标签
        
display:inline;变成行级标签        
display:block;变成块级标签
display:inline-block;变成行级块标签
        
        
div标签:纯净的块级标签(没有任何附加的标签)
span标签:纯净的行级标签(没有任何附加的标签)
相关标签： css

上一篇： 动手开发自己的mvc-1----实现初步的控制层，实现各种配置和资源获取 博客分类： 实现自己的MVCjava综合 多线程java框架mvc 

下一篇： Yii redis list列表的使用

推荐阅读