HTML(网页设计)必用的设计模式---------CSS网页编程

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

CSS的基本介绍

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

  	

这是我做css网页技术

  2,style标签方式 :

	
3,导入方式 
4,链接方式
	 

CSS的相关语法:

CSS代码格式 
选择器名称 { 属性名:属性值;属性名:属性值;…….}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话,那么多个值用 空格 隔开。

选择器

就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器(标签本身就是封装数据的容器)。

1,选择器 一般三种:

1) html标签名选择器。使用的就是html的标签名。
2) class选择器。其实使用的是标签中的class属性。
3) id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。
1,html标签选择器
		
  
  
  你好,这是演示
  
这是div>分
效果图:
1.点击前:a:link
HTML(网页设计)必用的设计模式---------CSS网页编程_第1张图片
2,移到该位置:a:hover
HTML(网页设计)必用的设计模式---------CSS网页编程_第2张图片
3,点击时候:a:active 点击超链接时的状态
HTML(网页设计)必用的设计模式---------CSS网页编程_第3张图片
特殊的伪元素:
段落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
HTML(网页设计)必用的设计模式---------CSS网页编程_第4张图片
内补丁(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 :  不允许有浮动对象


  
    1.html
	
    
    
    
    
    
	
  
  
  
   
这是第一个div
这是第二个,多加点多检点
这是第三个
简单地border使用:padding和Margins


  
    cssdemo.html
	
  
  
  
  	
这是一个div中的文字1
这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................
这是一个div中的文字3
HTML(网页设计)必用的设计模式---------CSS网页编程_第5张图片

  
    cssdemo.html
	
  
  
  
  	
这是一个div中的文字1
这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................
这是一个div中的文字3
HTML(网页设计)必用的设计模式---------CSS网页编程_第6张图片

  
    cssdemo.html
	
  
  
  
  	
这是一个div中的文字1
这是一个div中的文字2多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................
这是一个div中的文字3

这是一个div中的文字4
这是一个div中的文字5多加几个文字多加几个文字多加几个文字多加几个文字多加几个文字........................
这是一个div中的文字6
HTML(网页设计)必用的设计模式---------CSS网页编程_第7张图片

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 等属性在正常文档流中偏移位置。












你可能感兴趣的:(网页设计,Java学习之路)