注明只是为着现在维护用,注释只是为着今后维护用

开辟网址流程

  • 规定风格、成效(论坛、留言板、支付、用户登录等)。
  • 油画制作网页效果图(首页、列表页、内容页)。
  • 制作人士切图排版,排成网页方式。
  • 后台程序初步写程序。
  • 前台与后台结合。

付出网址流程

  • 规定风格、成效(论坛、留言板、支付、用户登录等)。
  • 画画制作网页效果图(首页、列表页、内容页)。
  • 制作人士切图排版,排成网页格局。
  • 后台程序发轫写程序。
  • 前台与后台结合。

HTML注释

<!——注释内容——>

专注:注释只是为着今后维护用。

HTML注释

<!——注释内容——>

在意:注释只是为了未来维护用。

体系标识

<ul>
    <li>内容</li>

  <li>内容</li>

  <li>内容</li>
</ul>

<ul>或<li>的常用属性


Type:项目的记的类型,取值:disc(小黑点)、circle(圆圈)、square(实心方块)

项目标识

<ul>
    <li>内容</li>

  <li>内容</li>

  <li>内容</li>
</ul>

<ul>或<li>的常用属性


Type:项指标记的品类,取值:disc(小黑点)、circle(圆圈)、square(实心方块)

HTML编号列表(有序)

<ol>

         <li>内容</li>

         <li>内容</li>

         <li>内容</li>

</ol>

 <ol>或<li>的常用属性

  •  Type:编号类型,取值:一、a、A、i、I
  •  Start:从第多少个起来编号

HTML编号列表(有序)

<ol>

         <li>内容</li>

         <li>内容</li>

         <li>内容</li>

</ol>

 <ol>或<li>的常用属性

  •  Type:编号类型,取值:1、a、A、i、I
  •  Start:从第多少个起来编号

滚动字幕标志(已被淘汰)

<marquee>

         内容…..  

</marquee>

  常用属性

  •  
    Direction:滚动方向,取值:up、down、left、right
  •   Width:滚动宽度
  •   Height:滚动中度
  •   BgColor:滚动背景象
  •   ScrollAmount:滚动步长值
  •   ScrollDelay:两步之间的停留值
  •   Loop:循环滚动次数

滚动字幕标志(已被淘汰)

<marquee>

         内容…..  

</marquee>

  常用属性

  •  
    Direction:滚动方向,取值:up、down、left、right
  •   Width:滚动宽度
  •   Height:滚动中度
  •   BgColor:滚动背景观
  •   ScrollAmount:滚动步长值
  •   ScrollDelay:两步之间的停留值
  •   Loop:循环滚动次数

图形标识

 语法格式:<img 属性=“值”>

 常用属性:

  •   Width:图片宽度。
  •   Height:图片中度。
  •   Border:图片的边框。
  •   Src:图片的门路。
  •  
    Align:left、center、right。(能够兑现图文混排效果)
  •   Hspace:图片与文字左右区间。
  •   Vspace:图片与文字上下间距。

图形标识

 语法格式:<img 属性=“值”>

 常用属性:

  •   Width:图片宽度。
  •   Height:图片中度。
  •   Border:图片的边框。
  •   Src:图片的不2法门。
  •  
    Align:left、center、right。(能够兑现图像和文字混排效果)
  •   Hspace:图片与文字左右区间。
  •   Vspace:图片与文字上下间距。

一流链接

  语法格式:<a 属性=“值”>内容</a>

  常用属性:

  •   Href:目的文件地点UEnclaveL。
  •   Target:张开药方式。
    _blank:新窗口、_self:本窗口、_parent:上个窗口张开、top:最顶尖窗口展开。
  •   Name:定义描点名称。
  •   mailto
  •   #空链接。
  •   Js连接:<a
    href=”javascript:window.close()”>

一流链接

  语法格式:<a 属性=“值”>内容</a>

  常用属性:

  •   Href:指标文件地方U凯雷德L。
  •   Target:展开格局。
    _blank:新窗口、_self:本窗口、_parent:上个窗口展开、top:最一级窗口打开。
  •   Name:定义描点名称。
  •   mailto
  •   #空链接。
  •   Js连接:<a
    href=”javascript:window.close()”>

Html颜色表示

意味着方法三种

  颜色单词:blue、green、red、yellow。

  十进制表示:rgb(25五,0,0)

 
16进制表示#FF0000(红)、#00FF00(绿)、#0000FF(蓝)

Html颜色表示

表示方法三种

  颜色单词:blue、green、red、yellow。

  10进制表示:rgb(25⑤,0,0)

 
16进制表示#FF0000(红)、#00FF00(绿)、#0000FF(蓝)

锚点链接

  •   含义:锚点链接,是在2个网页的两样区域张开跳转
  •   定义锚点(做标志):<a name=”锚点名称”></a>
      •   例如:<a name=”top2”></a>

 

  •   跳转到锚点(暗号):
      •   语法:<a href=”#锚点名称”>内容…..</a>

锚点链接

  •   含义:锚点链接,是在1个网页的例外区域拓展跳转
  •   定义锚点(做标识):<a name=”锚点名称”></a>
      •   例如:<a name=”top2”></a>

 

  •   跳转到锚点(暗记):
      •   语法:<a href=”#锚点名称”>内容…..</a>

<meta>标记

意义:提供网页的元音信。钦点网页的追寻关键词。

<meta>标识有七个属性:http-equiv和name

1、  http-equiv属性

  •   功用:模拟http协议文件头新闻,告诉浏览器怎么张开网页。
  •  
    http-equiv属性1般与content属性合作使用。Content属性内定新闻的详细属性

      •  设置网页的字符集: <meta http-equiv=”contengt-type”
        content=”text/html;charset=utf-八”/>

      •   网页自动刷新:<meta
        http-equiv=”refresh”content=”2”>;<meta
        http-equiv=”refresh”content=”二;url=http://www.baidu.com”&gt;

2、  name属性

设置网页的探索关键词、版权音信、我等。

(一)       设置网页搜索关键词

<meta name=”keywords”
content=”网址建设,集团网址建设,网站制作,网上商城”/>

(2)       设置网页描述音讯

<meta name=”description”
content=”飞虎是不是正规空间给您至极你的无绳电话机成效就可以给你个开朗女郎攻坚克难暖色开拓成效”>

<meta>标记

意义:提供网页的元消息。钦赐网页的检索关键词。

<meta>标识有多个属性:http-equiv和name

1、  http-equiv属性

  •   功用:模拟http协议文本头音信,告诉浏览器怎么张开网页。
  •  
    http-equiv属性一般与content属性协作使用。Content属性钦赐新闻的事无巨细属性

      •  设置网页的字符集: <meta http-equiv=”contengt-type”
        content=”text/html;charset=utf-捌”/>

      •   网页自动刷新:<meta
        http-equiv=”refresh”content=”贰”>;<meta
        http-equiv=”refresh”content=”二;url=http://www.baidu.com”&gt;

2、  name属性

设置网页的搜求关键词、版权新闻、作者等。

(1)       设置网页寻觅关键词

<meta name=”keywords”
content=”网址建设,公司网址建设,网址制作,网上商城”/>

(2)       设置网页描述音讯

<meta name=”description”
content=”飞虎是不是正规空间给您丰裕你的无绳电话机功用就可以给你个开朗青娥攻坚克难暖色开荒作用”>

Xhtml规范

  • l  全数标识和属性全体大写
  • l  单边标识必须关闭。如:<br>—–<br/>
  • l  全部的属性值都不能够不加引号。
  • l  全数属性都必须有值。如:<hr noshade>—<hr
    noshade=”noshade”/>
  • l  标机之间要逐项嵌套,外层套内层。
  • l  Xhtml网页必须有DTD文书档案类型定义代码

 

 

DTD文书档案类型定义

3大项目:

 图片 1

Xhtml规范

  • l  全数标识和属性全体大写
  • l  单边标识必须关闭。如:<br>—–<br/>
  • l  全数的属性值都必须加引号。
  • l  全数属性都不可能不有值。如:<hr noshade>—<hr
    noshade=”noshade”/>
  • l  标机之间要挨个嵌套,外层套内层。
  • l  Xhtml网页必须有DTD文书档案类型定义代码

 

 

DTD文书档案类型定义

叁大类型:

 图片 2

报表标签

(壹)结构:(1行肆列)

<table border=“1”>

           <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                    <td><&nbsp;/td>

           </tr>

</table>

 

(2)border属性:

  •   Width:宽度
  •   Height:高度
  •   Border:边框
  •   Bordercolor:边框颜色
  •   Bgcolor:表格背景象
  •   Background:背景图片
  •   Cellpadding:单元格与内容距离
  •   Cellspacing:单元格与单元格距离
  •   Rules:合并边框线,取值:all

 

(3)       tr属性

bgcolor

align

height:水平:left、center、right

valign:垂直:top、middle、bpttom

(4)      td属性:

  •   colspan:合并单元格(左右)
  •   rowspan:合并单元格(上下)
  •   background
  •   width
  •   height
  •   bgcolor
  •   align
  •   valign

报表标签

(1)结构:(一行④列)

<table border=“1”>

           <tr>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                    <td>&nbsp;</td>

                    <td><&nbsp;/td>

           </tr>

</table>

 

(2)border属性:

  •   Width:宽度
  •   Height:高度
  •   Border:边框
  •   Bordercolor:边框颜色
  •   Bgcolor:表格背景观
  •   Background:背景图片
  •   Cellpadding:单元格与内容距离
  •   Cellspacing:单元格与单元格距离
  •   Rules:合并边框线,取值:all

 

(3)       tr属性

bgcolor

align

height:水平:left、center、right

valign:垂直:top、middle、bpttom

(4)      td属性:

  •   colspan:合并单元格(左右)
  •   rowspan:合并单元格(上下)
  •   background
  •   width
  •   height
  •   bgcolor
  •   align
  •   valign

表单

(1)结构:

         

  <form name=”form1” method=“get” action=“login.php”>

                   用户名:<input type=”text” name=”username”/>

                   密码:<input type=”password” name=”userpwd”/>

                   <input type=”submit” value=”提交表单”/>

    </form>

 

(二)<form>标志属性—-块元素

  •   name
  •   method:提交格局 get、post
  •   action:钦定表单的处理程序,壹般是PHP文件
  •   enctype:内定表单数据的编码方式。只万幸method=post意况下。
  •   application/x-www-form-urldecoded   //默许加密方法
  •   multipart/form-data   //上传文件,值是他本人

(3)get和post方法

            
Get提交情势:将表单数据追加到action钦定的处理程序的末尾,然后向服务器发出请求。不安全

               假如有个别表单元素,不想往服务器传递数据,那么,name能够不用写。

             
POST提交情势:POST提交的数码绝对安全,能够交到海量数据,可以上传附属类小部件。

表单

(1)结构:

         

  <form name=”form1” method=“get” action=“login.php”>

                   用户名:<input type=”text” name=”username”/>

                   密码:<input type=”password” name=”userpwd”/>

                   <input type=”submit” value=”提交表单”/>

    </form>

 

(二)<form>标识属性—-块成分

  •   name
  •   method:提交格局 get、post
  •   action:内定表单的处理程序,1般是PHP文件
  •   enctype:钦点表单数据的编码情势。只幸亏method=post情况下。
  •   application/x-www-form-urldecoded   //暗中同意加密方法
  •   multipart/form-data   //上传文件,值是她协调

(3)get和post方法

            
Get提交方式:将表单数据追加到action钦赐的处理程序的后边,然后向服务器发出请求。不安全

               壹经有些表单成分,不想往服务器传递数据,那么,name能够不用写。

             
POST提交格局:POST提交的数目相对安全,能够交给海量数据,能够上传附属类小部件。

单行文本域

         语法格式:<input type=”text” 属性=“值”>

  属性:            

  •   name:文本框的名字
  •   Type:表单成分类型
  •   Value:文本框的值
  •   Size:文本框的长度
  •   马克斯length:最多能够输入多少个字符。
  •   Readonly:只读属性。能够选中,但不能够修改。Readonly=“readonly”
  •   Disabled:禁止使用属性 同上。

单行文本域

         语法格式:<input type=”text” 属性=“值”>

  属性:            

  •   name:文本框的名字
  •   Type:表单成分类型
  •   Value:文本框的值
  •   Size:文本框的长度
  •   Maxlength:最多能够输入几个字符。
  •   Readonly:只读属性。能够选中,但不可能修改。Readonly=“readonly”
  •   Disabled:禁止使用属性 同上。

单行密码域

语法格式:<input type=”password” name=”userpwd”>

  属性:    

  •   name:文本框的名字
  •   Type:表单成分类型
  •   Value:文本框的值
  •   Size:文本框的长短
  •   Maxlength:最多能够输入几个字符。
  •   Readonly:只读属性。能够选中,但无法改改。Readonly=“readonly”
  •   Disabled:禁止使用属性 同上。

 

单行密码域

语法格式:<input type=”password” name=”userpwd”>

  属性:    

  •   name:文本框的名字
  •   Type:表单成分类型
  •   Value:文本框的值
  •   Size:文本框的尺寸
  •   马克斯length:最多能够输入多少个字符。
  •   Readonly:只读属性。能够选中,但不能够修改。Readonly=“readonly”
  •   Disabled:禁止使用属性 同上。

 

单选按键

语法格式:<input type=”radio” name=”sex” value=“男”/>男

                   <input type=”radio” name=”sex” value=“女”/>女

  属性:

  •   name:成分名称
  •   Checked:暗许选项checked=“checked”
  •   Value:值

单选按钮

语法格式:<input type=”radio” name=”sex” value=“男”/>男

                   <input type=”radio” name=”sex” value=“女”/>女

  属性:

  •   name:成分名称
  •   Checked:暗许选项checked=“checked”
  •   Value:值

复选框

语法格式:<input type=”checkbox” name=”like” value=”游戏”/>
游戏

                     <input type=”checkbox” name=”like”
value=”杀人”/> 杀人

                     <input type=”checkbox” name=”like”
value=”放火”/> 放火

 属性:

  •   name:成分名称
  •   Checked:暗许选项checked=“checked”
  •   Value:值

复选框

语法格式:<input type=”checkbox” name=”like” value=”游戏”/>
游戏

                     <input type=”checkbox” name=”like”
value=”杀人”/> 杀人

                     <input type=”checkbox” name=”like”
value=”放火”/> 放火

 属性:

  •   name:元素名称
  •   Checked:暗许选项checked=“checked”
  •   Value:值

下拉列表

 

语法格式

<select name=””>

         <option value=”北京”>北京</option>

         <option value=”天津”>天津</option>

         <option value=”重庆”>重庆</option>

</select>

 

  •   <selectd>:只有一个name属性。
  •   <ption>:三个属性value、selected
  •   Selected:暗中同意选中
  •   层叠样式表方式改下拉列表宽度:type=”width:拾0px”

 

下拉列表

 

语法格式

<select name=””>

         <option value=”北京”>北京</option>

         <option value=”天津”>天津</option>

         <option value=”重庆”>重庆</option>

</select>

 

  •   <selectd>:唯有三个name属性。
  •   <ption>:多少个属性value、selected
  •   Selected:默许选中
  •   层叠样式表格局改下拉列表宽度:type=”width:100px”

 

文本区域

语法格式:<textarea name=”名称” cols=“宽度”
rows=“高度”></textarea>

  属性

  •   name:成分名称
  •   Cols:宽度
  •   Rows:高度

 

 

文本区域

语法格式:<textarea name=”名称” cols=“宽度”
rows=“高度”></textarea>

  属性

  •   name:成分名称
  •   Cols:宽度
  •   Rows:高度

 

 

各个开关

  •   交付按键 <input type=”submit” value=”提交”/>
  •   复位按键 <input type=”reset” value=“重置”/>
  •   图片按键 <input type=”image” src=”images/123.jpg”/>
  •   常常按键 <input “button”
    onclick=”javascript:window.close()” value=”关闭窗口”>
  •   普通开关本人不持有任何意义,需与js合作使用。

各个按键

  •   付出开关 <input type=”submit” value=”提交”/>
  •   重新设置开关 <input type=”reset” value=“重置”/>
  •   图形按键 <input type=”image” src=”images/123.jpg”/>
  •   一般按键 <input “button”
    onclick=”javascript:window.close()” value=”关闭窗口”>
  •   普通按键本身不富有任何功用,需与js合作使用。

上传文件域

语法格式:<input type=”file” 属性=“属性”/>

  属性

  •   Name:名称
  •   Value:上传文件名。Value属性是只读属性,
  • <input type=”file” name=”uploadfile”/>必须与<form
    name=”form1” method=”post” action=”login.php”
    enctype=”multipart/form-data”>合营达成手艺上传

上传文件域

语法格式:<input type=”file” 属性=“属性”/>

  属性

  •   Name:名称
  •   Value:上传文件名。Value属性是只读属性,
  • <input type=”file” name=”uploadfile”/>必须与<form
    name=”form1” method=”post” action=”login.php”
    enctype=”multipart/form-data”>合营完成工夫上传

隐藏域

功能:看不见的框。传递1些值,而又不想让外人看到。重要用以php后台。如id号。

语法格式:<input type=”hidden” name=”id” value=”1263”>

 

隐藏域

功能:看不见的框。传递1些值,而又不想令人家看到。主要用以php后台。如id号。

语法格式:<input type=”hidden” name=”id” value=”1263”>

 

<caption>表格标题

语法格式:<caption></caption>

 

<caption>是<table>的子标志。<caption>放在<table>的后边。

 

<caption>表格标题

语法格式:<caption></caption>

 

<caption>是<table>的子标识。<caption>放在<table>的背后。

 

网页多媒体

网页录制一般是flash格式,flash比较小、包容性好,适合网址播放。

 

 

图形走俏

图表走俏:给一张图片加七个火爆。

语法结构:

<ing src=”inmages/01.jpg” usemap=”#Map”/>

<map id=”Map”>

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

</map>

 

<area>标识常用属性:

  •  Shape:热区的形状,取值:rect(矩形)、circle(圆)、polygon(多边形)
  •  Coords:热区的坐标
  •  
     如果shap=rect时,那么,coords=“x1,y1,x2,y2”列如:coords=”50,20,200,150”
  •  (x壹,y一)为左上角坐标,(x二,y2)为右下角坐标。
  •  
     假设shap=circle时,那么,coords=“x,y,r”,在那之中(x,y)圆心坐标,r为半径。

 

网页多媒体

网页摄像1般是flash格式,flash相比较小、包容性好,适合网址播放。

 

 

图片走俏

图形走俏:给一张图纸加多少个火热。

语法结构:

<ing src=”inmages/01.jpg” usemap=”#Map”/>

<map id=”Map”>

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

<area shap=”热区形状” cords=”热区坐标”  href=”链接地址” />

</map>

 

<area>标识常用属性:

  •  Shape:热区的造型,取值:rect(矩形)、circle(圆)、polygon(多边形)
  •  Coords:热区的坐标
  •  
     如果shap=rect时,那么,coords=“x1,y1,x2,y2”列如:coords=”50,20,200,150”
  •  (x一,y一)为左上角坐标,(x二,y二)为右下角坐标。
  •  
     假若shap=circle时,那么,coords=“x,y,r”,当中(x,y)圆心坐标,r为半径。

 

 

 

常见框架

框架集和框架页:

框架集:<frameset></frameset>:主要用于划分窗口。

框架页:<frame>:首要用于钦定暗中认可呈现的网页地址。

<frameset>属性:

  •   Cols:划分左右型框架。
  •   Cols=”200,*”   左侧为宽度200px,剩下的为右侧。
  •   Cols=”180,*,180”   左右框架为180px,剩下的为中等框架
  •   Rows:划分上下型框架
  •   Rows=”200,*”  上框架中度为200px,剩下的为下框架。
  •   Frameborder:是不是出示边框线,取值0或一.
  •   Border:边框粗细。
  •   Bordercolor:边框颜色。

<frame>框架页的性质

  •   Src:该小窗口中,暗许展现的网页地址。
  •   Noresize:无法调动大小。Noresize=”noresize”
  •   Scrolling:是不是出示滚动条,取值:auto、yes、no
  •   Name:给当下小窗口起个名字。这么些name正是给<a>标志target属性来用的。

<noframes>含义:当浏览器不匡助框架时,会提醒音讯。低版本不扶助。高版本都帮忙。

语法格式:<noframes>内容</noframes>

平日框架

框架集和框架页:

框架集:<frameset></frameset>:主要用来划分窗口。

框架页:<frame>:主要用来内定暗中认可突显的网页地址。

<frameset>属性:

  •   Cols:划分左右型框架。
  •   Cols=”200,*”   左侧为宽度200px,剩下的为左边。
  •   Cols=”180,*,180”   左右框架为180px,剩下的为中等框架
  •   Rows:划分上下型框架
  •   Rows=”200,*”  上框架中度为200px,剩下的为下框架。
  •   Frameborder:是不是出示边框线,取值0或1.
  •   Border:边框粗细。
  •   Bordercolor:边框颜色。

<frame>框架页的性质

  •   Src:该小窗口中,默许突显的网页地址。
  •   Noresize:无法调整大小。Noresize=”noresize”
  •   Scrolling:是还是不是出示滚动条,取值:auto、yes、no
  •   Name:给当下小窗口起个名字。这么些name正是给<a>标识target属性来用的。

<noframes>含义:当浏览器不扶助框架时,会提醒新闻。低版本不匡助。高版本都帮助。

语法格式:<noframes>内容</noframes>

内嵌框架(行内框架)

与1般框架差异:<iframe>是<body>的子标识,因而,放在<body>中。

语法格式:<iframe
属性=“值”>对不起,您的浏览器版本过低</iframe>

常用属性:

  •   Src:引进文件地方。
  •   Width:宽度
  •   Height:高度
  •   Frameborder:是或不是出示框架的边框线,取值:yes或no。
  •   Scrolling:是不是出示滚动条。取值:yes、no、auto。
  •  
    Name:制定小窗口的称号,改名称也是给<a>标志的target属性来用。
  •   Align:框架在网页中对齐格局,取值:left、center、right。

内嵌框架(行内框架)

与平时框架区别:<iframe>是<body>的子标志,因而,放在<body>中。

语法格式:<iframe
属性=“值”>对不起,您的浏览器版本过低</iframe>

常用属性:

  •   Src:引入文件地方。
  •   Width:宽度
  •   Height:高度
  •   Frameborder:是不是出示框架的边框线,取值:yes或no。
  •   Scrolling:是不是出示滚动条。取值:yes、no、auto。
  •  
    Name:制定小窗口的名称,改名称也是给<a>标志的target属性来用。
  •   Align:框架在网页中对齐情势,取值:left、center、right。

CSS简介

CSS 层叠样式表。

CSS的首要指标:是给html标志增添各类各个的表现(表格、样式)。比如:文字样式、背景、文本样式、连接样式。

 

语法格式:

<style type=”text/css”> 

h1{

Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色

}

</style>

 

CSS简介

CSS 层叠样式表。

CSS的根本目标:是给html标志加多种种种种的显示(表格、样式)。比如:文字样式、背景、文本样式、连接样式。

 

语法格式:

<style type=”text/css”> 

h1{

Color:red;    //文本颜色

Text-align:center;    //对齐方式

Border:1px solid #444;     //半框样式

Background-color:#ffff00;    //背景色

}

</style>

 

CSS选择器

核心选用器

(1) “*”选择器:通配符

  •   描述:将合营全数的html标识,全数标志都会转移。
  •   语法:*{color:red;}

 

(二)标签选拔器

  •   描述:将相称钦命的html标识
  •   语法:h1{color:red;}

(三)class选取器(类采取器)—–利用最多的选用器

  •  
    描述:给一类html标识加样式。那里所指的“1类”是:每一种html标志都有的三个class属性,且class的同样。Class属性是国有性质,每一种html标志都有。
  •   格式:<style type=”text/css”>

    .myClass{

    Color:red;

    Background-color:yellow;

    }

 

 (4)id选择器

  •   描述:给钦定id的要素增添样式
  •   注意:网页中html标识的id属性的值,必须是唯壹的。

    style type=”text/css”>

    #myId{

    Color=red;

    Background-color:yellow;

    }

 

CSS选择器

中央选用器

(1) “*”选择器:通配符

  •   描述:将极度全数的html标识,全部标志都会改动。
  •   语法:*{color:red;}

 

(二)标签选择器

  •   描述:将同盟钦命的html标志
  •   语法:h1{color:red;}

(叁)class选用器(类选取器)—–采用最多的选取器

  •  
    描述:给壹类html标记加样式。那里所指的“一类”是:每种html标志都有的3个class属性,且class的一律。Class属性是国有属性,每一个html标识都有。
  •   格式:<style type=”text/css”>

    .myClass{

    Color:red;

    Background-color:yellow;

    }

 

 (4)id选择器

  •   描述:给钦赐id的成分增加样式
  •   注意:网页中html标志的id属性的值,必须是绝无仅有的。

    style type=”text/css”>

    #myId{

    Color=red;

    Background-color:yellow;

    }

 

结缘选拔器

(一)多成分采取器

  •   描述:给四个成分加同2个体制,三个选拔器之间用逗号分开。
  •   格式:h1,p,div,.p1{ background:red;  }

(二)后代成分选取器(最常用)

  •   描述:给某些标签的某一个子孙成分加样式。接纳器之间用“空格”隔开分离。
  •   格式:<style type=”text/css”>

                       div  h1.title{ color:red; }

          Div  p.title{ color:yellow; }

        </style>

        <div>

       <h1 class=”title”>   </h1>

       <p class=”title”>   </p>

       </div>

(叁)子成分选用器

  描述:给有些元素的子成分增添样式

结合选择器

(一)多成分选拔器

  •   描述:给五个要素加同多少个体制,多少个选拔器之间用逗号分开。
  •   格式:h1,p,div,.p1{ background:red;  }

(二)后代成分选取器(最常用)

  •   描述:给有个别标签的某二个后生成分加样式。采用器之间用“空格”隔绝。
  •   格式:<style type=”text/css”>

                       div  h1.title{ color:red; }

          Div  p.title{ color:yellow; }

        </style>

        <div>

       <h1 class=”title”>   </h1>

       <p class=”title”>   </p>

       </div>

(三)子成分选拔器

  描述:给有个别成分的子成分增加样式

CSS尺寸属性

  Width:成分宽度,一定要加px单位。

  Height:元素中度。

CSS尺寸属性

  Width:成分宽度,一定要加px单位。

  Height:成分中度。

CSS字体属性

  •   Font-size:文字大小。如:font-size:1四px;
  •   Font-family:字体。如:font-family:微软雅黑;
  •   Font-style:斜体,取值:italic。如:font-style:italic;
  •   Font-weight:粗体,取值:bold。如:font-weight:bold;

CSS字体属性

  •   Font-size:文字大小。如:font-size:1四px;
  •   Font-family:字体。如:font-family:微软雅黑;
  •   Font-style:斜体,取值:italic。如:font-style:italic;
  •   Font-weight:粗体,取值:bold。如:font-weight:bold;

CSS文本属性

  •   Color:文本颜色
  •  
    Text-decoration:文本修饰线,取值:none(无)、underline(下划线)、overline(上涂抹)、line-through(删除线)
  •   Text-align:文本水平对齐情势,取值:left、center、right
  •  
    Line-height:行高,能够固定值,也得以百分比、如:line-height:二肆px;line-height:1百分之五十;
  •   Text-indent:首行缩进。Text-indent:2八px;
  •   Letter-spacing:字间距。

CSS文本属性

  •   Color:文本颜色
  •  
    Text-decoration:文本修饰线,取值:none(无)、underline(下划线)、overline(上涂抹)、line-through(删除线)
  •   Text-align:文本水平对齐形式,取值:left、center、right
  •  
    Line-height:行高,能够固定值,也足以百分比、如:line-height:贰肆px;line-height:壹百分之五十;
  •   Text-indent:首行缩进。Text-indent:28px;
  •   Letter-spacing:字间距。

伪类采取器

多少个超链接,有四个情景

  •   寻常景况(:link):鼠标没放上在此以前链接的体制。
  •   放上状态(:hover):鼠标放到链接上时的体制。
  •   激活状态(:action):按住鼠标左键不松手的体制。
  •   访问过的情况(:visited):按下鼠标左键,并弹起,那时的体裁。

在平日的干活中,会选拔以下写法,来给链接加样式:

A:link,a:visited{ color:#444;text-decoration:none; } 
//将“平常景况”和“访问过的动静”合2为一。

A:hover{ color:#980000;text-decoration:underline; }  //”鼠标放上”
单做一种功效

伪类选拔器

三个超链接,有八个情景

  •   正常处境(:link):鼠标没放上在此之前链接的体制。
  •   放上状态(:hover):鼠标放到链接上时的体制。
  •   激活状态(:action):按住鼠标左键不放手的体制。
  •   访问过的情况(:visited):按下鼠标左键,并弹起,那时的体裁。

在平常的办事中,会选取以下写法,来给链接加样式:

A:link,a:visited{ color:#44四;text-decoration:none; } 
//将“符合规律状态”和“访问过的动静”合贰为一。

A:hover{ color:#980000;text-decoration:underline; }  //”鼠标放上”
单做一种功能

CSS列表属性

List-style:列表样式,取值:none。去掉项目的识或编号前面的各类符号。

         <style type:”text/css”>

                   ul,ui{  list-style:none; 
/*去掉项目的识前边的符号*/  }

         </style>  

<ul>

                   <li>北京市</li>

<li>东营市</li>

<li>上海市</li>

<li>深圳市</li>

</ul>

CSS列表属性

List-style:列表样式,取值:none。去掉项指标记或编号前面包车型地铁各个符号。

         <style type:”text/css”>

                   ul,ui{  list-style:none; 
/*去掉项目的记前边的标志*/  }

         </style>  

<ul>

                   <li>北京市</li>

<li>东营市</li>

<li>上海市</li>

<li>深圳市</li>

</ul>

CSS边框属性:每种成分都足以加边框线

  •   Border-left:左边框线。
  •   格式:border-left:粗细 线型 线的颜料
  •   线型:none、solid、dashed(虚线)、dotted(点状线)
  •   举例:border-left:5px dashed red;
  •   Border-right:左侧框线。
  •   Border-top:上面框线。
  •   Border-bottom:上面框线。
  •   Border:同时给多少个边加边框线。

CSS边框属性:每一个成分都得以加边框线

  •   Border-left:右侧框线。
  •   格式:border-left:粗细 线型 线的水彩
  •   线型:none、solid、dashed(虚线)、dotted(点状线)
  •   举例:border-left:5px dashed red;
  •   Border-right:右侧框线。
  •   Border-top:上面框线。
  •   Border-bottom:下面框线。
  •   Border:同时给四个边加边框线。

CSS内边距属性:边框线到内容的填写

只顾:平日大家所说的width和height属性,他们指内容的上涨幅度和中度,不含内、外边距、边框线。

  •   Padding-left:左内填充距离,右侧线到内容间的相距。
  •   Padding-right:右内填充距离。同上
  •   Padding-top:上。
  •   Paddingbottom:下。
  •   缩写情势
  •   Padding:10px;    //八个边的内填丰硕别为十px;
  •   Padding:10px 20px;   //上下为10px;左右为20px;
  •   Padding:5px 10px 20px;   //上为5px,左右为10px,下为20px;
  •   Padding:20px 拾px 5px 20px;    //顺序为上右下左;

CSS内边距属性:边框线到内容的填写

小心:平时大家所说的width和height属性,他们指内容的上涨幅度和中度,不含内、外边距、边框线。

  •   Padding-left:左内填充距离,右侧线到内容间的相距。
  •   Padding-right:右内填充距离。同上
  •   Padding-top:上。
  •   Paddingbottom:下。
  •   缩写格局
  •   Padding:十px;    //八个边的内填丰盛别为10px;
  •   Padding:10px 20px;   //上下为10px;左右为20px;
  •   Padding:5px 10px 20px;   //上为5px,左右为10px,下为20px;
  •   Padding:20px 十px 5px 20px;    //顺序为上右下左;

CSS外边距属性:边线往外的相距

  •   Margin-left:左侧线往外的离开
  •   Margin-right:右……
  •   Margin-top:上…….
  •   Margin-bottom:下…….
  •   简写式:
  •   Margin:10px;   //八个外市距分别为10px。
  •   Margin:拾px 20px;   //上下外边距为10px,左右外省距为20px。
  •   Margin:十px 20px 50px;   
    //上海外国语大学地距为10px,左右为20px,下为50px。
  •   Margin:10px 20px 30px 40px;   //顺序为上右下左。

CSS外边距属性:边线往外的离开

  •   Margin-left:右侧线往外的相距
  •   Margin-right:右……
  •   Margin-top:上…….
  •   Margin-bottom:下…….
  •   简写式:
  •   Margin:十px;   //多少个外市距分别为十px。
  •   Margin:10px 20px;   //上下外边距为10px,左右外乡距为20px。
  •   Margin:拾px 20px 50px;   
    //上海医中国科学技术大学学地距为10px,左右为20px,下为50px。
  •   Margin:拾px 20px 30px 40px;   //顺序为上右下左。

CSS背景属性

  •  Background-color:背景颜色。
  •  Background-image:背景图片地址。
    Background-image:url(image/banner.jpg)

CSS背景属性

  •  Background-color:背景颜色。
  •  Background-image:背景图片地址。
    Background-image:url(image/banner.jpg)

相关文章