HTML（网页设计）必用的设计模式---------CSS网页编程

最新推荐文章于 2024-07-24 14:14:30 发布

learning_code_blog

最新推荐文章于 2024-07-24 14:14:30 发布

阅读量5.8k

点赞数 2

分类专栏：网页设计 Java学习之路文章标签： html css 网页制造必用样式

本文链接：https://blog.csdn.net/yangxin_blog/article/details/48716779

版权

Java学习之路同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

网页设计

6 篇文章 0 订阅

订阅专栏

之前介绍了基本的网页设计，但是之前的那个只是一个框框，完全没有美观可言，现在介绍如何修饰以及玩出花样，之前的简单介绍点击打开链接

CSS的基本介绍

简介：CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。那么CSS和HTML是如何在网页代码中相结合的呢？通过四种方式：style属性、style标签、导入和链接。

1，直接采用style属性：

<!--   html与css相结合的第1种方式：给html标签添加style属性 -->
  	<p style="color: #1f3 ;border:#1ff solid; ">这是我做css网页技术</p>

2，style标签方式：

<!-- 	css与html的连接第二种方式     style标签方式  -->
	<style type="text/css">
		p{
		color: #0ff;
		border: 10px solid;
		}	
		
	</style>

3，导入方式

<style type="text/css">
	/*css和html的连接第三种方式  导入css文件
	*/
		@import url(mycss1.css);
</style>

4,链接方式

<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />

CSS的相关语法：

CSS代码格式：

选择器名称 { 属性名：属性值；属性名：属性值；…….}

属性与属性之间用分号隔开
属性与属性值直接按用冒号连接
如果一个属性有多个值的话，那么多个值用空格隔开。

选择器：

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器（标签本身就是封装数据的容器）。

1，选择器一般三种：

1) html标签名选择器。使用的就是html的标签名。
2) class选择器。其实使用的是标签中的class属性。
3) id选择器。其实使用的是标签的中的id属性。

每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

1， html标签选择器：

<style>
			div{
				background: #FF5151;
				font-size: 12px;
			}
</style>

2， class选择器：<在style中以“.”开头的为class选择器，使用时候只需要 class="mm"即可使用>

.mm{
  			color:#00AEAE;
  			font-size: 18px;
}

3， id选择器：<在style中以“#”，开头是的id选择器，使用的时候只需要 id="pid"就可以使用>

#pid{ 
 font-size: 50px;
 color: #2828FF;
 }

2选择器的优先级：

标签名选择器（远距离统一设置） < class选择器（单个设置） < id选择器 （单个设置） < style属性（最近距离设置）

前面介绍的都是简单的，基本的介绍，下面是扩展的：

扩展

关联选择器：

标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。例如：

p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>湖南城市学院</b>段落样式</p>
<p>P标签段落</p>

组合选择器：

对多个选择器进行相同样式的定义。例如，我们想对“div中的<b>标签”和“类名为cc”的区域设置相同的样式，则可以定义如下的组合选择器：

span b,.cc{
				color: #9F35FF;
				font-style: italic;
			}

多样的伪元素选择器

你想点击超链接的时候出现不一样的状况吗？？你想修饰一下黑白颜色吗?? 伪元素可以帮到你；

简介：

其实就在html中预先定义好的一些选择器，称为伪元素。

格式：标签名:伪元素。类名标签名。类名:伪元素

超链接a标签中的伪元素：

a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。

使用顺序： L – V – H – A

简单的使用：

<!DOCTYPE html>
<html>
  <head>
    <title>lvha.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style>
		div {
			color: #750000;
}
		div f{
			color:#00A600;
		}
		.cc{
			
		}
		
/* 		超链接未点击状态。 */
		<span style="color:#ff0000;">a:LINK </span>{
			color:#00A6ff;
			font-size:18px;
		}
		
		<span style="color:#ff0000;">a:VISITED</span> {
			color: #5B5B5B;
			font-size: 80px;
		}
		/*
		当鼠标移动这里适合，发生相应的反应,光标移到超链接上的状态（未点击）
		*/
		<span style="color:#ff0000;">a:HOVER</span> {
			color: #00DB00;
			font-size:50%;
	}
		/*点击超链接时的状态*/
		<span style="color:#ff0000;">a:ACTIVE</span> {
			color:#FFBD9D;
			background: #00EC00;
			font-size: 80px;
}
		
		
	</style>
  </head>
  <body>
  <a href="http://www.baidu.com" target="new">你好，这是演示</a>
  <div>这是div<f>部</f>>分</div>
  </body>
</html>

效果图：

1.点击前：a:link

2，移到该位置：a:hover

3，点击时候：a:active 点击超链接时的状态

特殊的伪元素：

段落p标签中的伪元素：

p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。

自定义伪元素：

:focus 具有焦点的元素

 div:hover{
    background-color:#f00;
    color:#fff;
 }

CSS的盒子模型1

边框(border)

上 border-top
下 border-bottom
左 border-left
右 border-right

内补丁(Paddings)：内边距

上 padding-top
下 padding-bottom
左 padding-left
右 padding-right

◇外补丁(Margins)：外边距

上 margin-top
下 margin-bottom
左 margin-left
右 margin-right

CSS的盒子模型2

☆CSS布局——漂浮

◇ float : none | left | right

none :　默认值。对象不飘浮
left :　文本流向对象的右边
right :　文本流向对象的左边

◇ clear : none | left | right | both

none :　默认值。允许两边都可以有浮动对象
left :　不允许左边有浮动对象
right :　不允许右边有浮动对象
both :　不允许有浮动对象

<!DOCTYPE html>
<html>
  <head>
    <title>1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style>
		div{
		width: 300px;
		height: 300px;
		color: #FF44FF;
		background-color: #d3a4ff;
		/*border-style:dotted ; /*整个框都是虚线*/
		border-bottom-style: solid ;
		}
		#div_1{
			margin-bottom: 20px;
			margin-top:30px;
			width: 80px;
		}
		.aa{
			padding-top: 30px;
			padding-bottom: 30px;
			padding-left: 30px;
			background-color: #00A600;
			border-bottom: ridge;
		}
	</style>
  </head>
  
  <body>
   <div>这是第一个div</div>
   <div id="div_1">这是第二个,多加点多检点</div>
   <div class="aa">这是第三个</div>
  </body>
</html>

简单地border使用：padding和Margins

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">
 <img src="https://img-blog.csdn.net/20150924211926055?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span>

<html>
  <head>
    <title>cssdemo.html</title>
	<style type="text/css">
		div{
		   border:#09f solid 1px;
		   height: 100px;
		   width: 200px;
		}
		#div_1{
		  border-bottom: #f60 2px dashed;
		}
		
		#div_2{
		  /* margin:20px;   四个方向*/
		  /* margin:20px 100px; 上下20 和 左右100 */
		 /* margin:20px 100px  200px;  上20  ， 左右100 ，下200 */
		  margin-left: 30px;
		  margin-top: 25px;
		  padding:20px 50px;
		}
		
		
	</style>
  </head>
  
  <body>
  	<div id="div_1">这是一个div中的文字1</div>
  	<div id="div_2">这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div>
  	<div id="div_3">这是一个div中的文字3</div>
  	
  </body>
</html>

<html>
  <head>
    <title>cssdemo.html</title>
	<style type="text/css">
		div{
		   border:#09f solid 1px;
		   height: 100px;
		   width: 200px;
		}
		#div_1{
		    background-color: #f90;
		    float:left;
		}
		
		#div_2{
		background-color: #0cf;
		   float:left;
		}
		
		#div_3{
		   background-color: #3f0;
		   float:left;
		   clear: left;
		}
		
	</style>
  </head>
  
  <body>
  	<div id="div_1">这是一个div中的文字1</div>
  	<div id="div_2">这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div>
  	<div id="div_3">这是一个div中的文字3</div>
  	
  </body>
</html>

<html>
  <head>
    <title>cssdemo.html</title>
	<style type="text/css">
		div{
		   border:#09f solid 1px;
		   height: 100px;
		   width: 200px;
		}
		#div_1{
		    background-color: #f90;
		    float:left;
		    position: absolute;
		    top:120px;
		    left:120px;
		}
		
		#div_2{
		background-color: #0cf;
		   float:left;
		   width:300px;
		}
		
		#div_3{
		   background-color: #3f0;
		   float:left;
		   clear: left;
		}
		
		
		#div_4{
		   background-color: #3f0;
		   clear:both;
		   background-color: #f90;
		   position: relative ;
		   top:20px;
		}
		#div_5{
		background-color: #0cf;
		   float:left;
		   width:300px;
		}
		#div_6{
		   background-color: #3f0;
		   float:left;
		   clear: left;
		}
		#div0{
			position: absolute;
		    top:200px;
		    left:200px;
		}
		
	</style>
  </head>
  
  <body>
  	<div id="div_1">这是一个div中的文字1</div>
  	<div id="div_2">这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div>
  	<div id="div_3">这是一个div中的文字3</div>
  	<hr>
  	<div id="div0">
	  	<div id="div_4">这是一个div中的文字4</div>
	  	<div id="div_5">这是一个div中的文字5多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................</div>
	  	<div id="div_6">这是一个div中的文字6</div>
  	</div>
  	
  	
  </body>
</html>

CSS的盒子模型3

CSS布局——定位

◇ position : static | absolute | fixed | relative

static :　默认值。无特殊定位，对象遵循HTML定位规则。
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义。
fixed :　未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范。
relative :　对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置。