CSS

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Ludwig_/article/details/73744384

【第一阶段】

【学习目标】

  1. 掌握css的作用与基本使用
  2. 了解常用属性
  3. 掌握css选择器。

css介绍

1. css是什么

CSS 指层叠样式表 (Cascading Style Sheets)

  •   样式定义如何显示 HTML 元素
  •   样式通常存储在样式表中
  •   把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  •   外部样式表可以极大提高工作效率
  •   外部样式表通常存储在 CSS 文件中
  •   多个样式定义可层叠为一

 

2. css作用

  •  样式表解决了html的内容与表现分离
  •  使用样式表极大的提高了工作效率。

3. css书写规则

 基本语法

Css规则主要由两部分组成 1.选择器2.一条或多条声明

选择器主要作用是为了确定需要改变样式的HTML元素

每一条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使用冒号(:)分开

如图:


 值的单位

 


书写注意事项

  1.  如果值为若干单词,则要给值加引号
  2. 多个声明之间使用分号(;)分开
  3. css对大小写不敏感,如果涉及到与html文档一起使用时,class与id名称对大小写敏感

导入css

我们介绍以下几种导入css方式:

内联样式表

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性

例如:

<div style=”border:1px solid black”>这是一个DIV</div> 

     注意:慎用这种方式,它将内容与显示混合在一起,损失了样式表的优势。一般情况下,这种方式只有在一个标签上只应用一次样式时才会使用

内部样式表

我们可以使用<style>标签在html文档的<head>中来定义样式表。

例如:


这种方式,样式只适合应用于一个页面

外部样式表

如果想要在多个页面使用同一个样式表,可以使用外部样式表来导入。

我们可以在html页面上使用<link>标签来导入外部样式表。

例如:


浏览器会从mystyle.css文件中读取样式,并对页面上的html进行修饰。

外部样式表,应该以css为后缀来保存,可以使用任意文本编辑器对css文件进行编辑。

下面是mystyle.css文件的内容:


@import导入

这种方式也是外部导入。

使用方式如下:


关于@import与引用外部样式表的区别:

  1.  @import这种方式只有firefox支持,而ie不支持。
  2. @import这种方式导入的css,会在整个页面加载后,才会加载样式。如果网络不好情况下,会先看到无样式修饰的页面,闪烁一下后,才会看到有样式修饰的页面。  而使用外部样式表,会先装载样式表,这样看到的就是有样式修饰的页面。
  3. @import不支持通过javascript修改样式,而link支持。

    优先级问题

           内联样式表>内部样式表>外部样式表

 

css选择器

       css选择器主要是用于选择需要添加样式的html元素。

       对于css来说,它的选择器有很多,我们主要介绍以下几种:

id选择器

Id选择器使用#引入,它引用的是id属性中的值。

 

类选择器

类选择器使用时,需要在类名前加一个点号(.)


元素选择器

这是最常见的选择器,简单说,文档中的元素就是选择器


属性选择器

如果需要选择有某个属性的元素,而不论属性是什么,可以使用属性选择器


伪类

css伪类用于向某些选择器添加特殊效果。

下面我们介绍一下锚伪类。

在支持css的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬念状态。

 

css属性

字体

Css字体属性定义文本的字体系列,大小,加粗,风格(如斜体)和变形(如小型大写字母)

常用属性:

font:简写属性,作用是把所有针对字体的属性设置在一个声明中。

font-family:定义字体系列

font-size:定义字体的尺寸

font-style:定义字体风格

文本

CSS文本属性可定义文本的外观。通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

常用属性

color:定义文本颜色

text-align:定义文本对齐方式

letter-spacing:定义字符间隔

word-spacing:定义字间隔

背景

CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。CSS在这方面的能力远远在 HTML之上。

常用属性:

background:简写属性,作用是将背景属性设置在一个声明中

background-color:定义背景颜色

background-image:定义背景图片

background-position:定义背景图片的起始位置

background-repeat:定义背景图片是否及如何重复。

尺寸

CSS 尺寸 (Dimension)属性允许你控制元素的高度和宽度。

常用属性:

width:设置元素的宽度

height:设置元素的高度

列表

CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。

常用属性:

list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。

list-style-image:定义列表项标志为图象

list-style-position:定义列表项标志的位置

list-style-type:定义列表项标志的类型。

表格

CSS 表格属性可以帮助您极大地改善表格的外观

         常用属性:

border-collapse:定义是否把表格边框合并为单一的边框。

border-spacing:定义分隔单元格边框的距离

caption-side:定义表格标题的位置


轮廓

轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

常用属性:

outline:在一个声明中设置所有的轮廓属性

outline-color:定义轮廓的颜色

outline-style:定义轮廓的样式

outline-width:定义轮廓的宽度

定位

CSS定位 (Positioning)属性允许你对元素进行定位。

定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

CSS有三种基本的定位机制:普通流、浮动和绝对定位。

常用属性:

position:把元素放置到一个静态的,相对的,绝对的,或固定的位置中。

top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量

right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移

left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移

bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

分类

CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。

 常用属性

clear:设置一个元素的侧面是否允许其它的浮动元素

float:定义元素在哪个方向浮动

cursor:当指向某元素之上时显示的指针类型

display:定义是否及如何显示元素

visibility:定义元素是否可见或不可见。

CSS框模型

盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距边框 和 外边距 的方式。


元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素

边框

元素的边框(border)是围绕元素内容和内边距的一条或多条线。

CSS border属性允许你规定元素边框的样式、宽度和颜色。

              常用属性:


border:简写属性,用于把针对于四个边的属性设置在一个声明。

border-color:简写属性,定义元素边框中可见部分的颜色,或为四个边分别设置颜色。

border-style:用于定义所有边框的样式,或者单独为各边设置边框样式。

border-width:简写属性,用于为元素的所有边框设置宽度,或则单独地为各边边框设置宽度

border-top:简写属性,用于把上边框的所有属性设置到一个声明中

border-right:简写属性,用于把右边框所有属性设置到一个声明中

border-bottom:简写属性,用于把下边框的所有属性设置到一个声明中

border-left:简写属性,用于把左边框的所有属性设置到一个声明中。

外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

设置外边距的最简单的方法就是使用 margin属性,这个属性接受任何长度单位、百分数值甚至负值。

常用属性:

margin:简写属性,在一个声明中设置所有外边距属性

margin-top:定义元素的上外边距

margin-right:定义元素的右外边距

margin-bottom:定义元素的下外边距

margin-left定义元素的左外边距


注意:在使用margin来定义所有外边距时,可以使用值复制。

  •   如果缺少左外边距的值,则使用右外边距的值。
  •   如果缺少下外边距的值,则使用上外边距的值。
  •   如果缺少右外边距的值,则使用上外边距的值。

内边距

元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding属性。

CSSpadding 属性定义元素边框与元素内容之间的空白区域。

常用属性:

 padding:简写属性,作用是在一个声明中设置元素的所有内边距属性

 padding-top:定义元素的上内边距

 padding-right:定义元素的右内边距

 padding-bottom:定义元素的下内边距

 padding-left:定义元素的左内边距。

 

【笔试面试题】

1.          css基本语法是什么

2.          css导入方式有几种

3.          外部导入与@import有什么区别

4.          Css选择器的作用是什么,并说出常见三种选择器。

5.          display=none与visibility=hidden有什么区别

【重点总结】

1.          css是什么及其作用

2.          css导入方式

3.          css选择器及基本语法

4.          可以查询帮助文档,看懂css代码就可以

【第二阶段】

【学习目标】    

       掌握css样式,可以完成简单的css样。

【内容:HTML+CSS综合案例】

  显示商品信息

   案例分析 :

   在设置各部分样式前,我们需要对页面上的元素进行一些整体设计,如整个页面的字体,文本对齐方式,背景等。

.main{

                     /*设置外边距,下面有30px距离*/

                     margin:0px0px 30px 0px;

                     /*背景色*/

                     background-color:#ffffff;

                     /*字体大小*/

                     font-size:12px;

                     /*文字颜色*/

                     color:#000000;

                     /*文本对齐方式*/

                     text-align:center;

                     /*垂直对齐方式*/

                     vertical-align:top;

                     /*设置行高*/

                     line-height:150%;  

                     /*设置字体*/

                     font-family:Arial, Helvetica, sans-serif;                           

              }

              /*设置a标签字体12px 颜色 #0066FF*/

              a {

                     font-size:12px;

                     color:#0066FF; /*#1E33F7*/

              }

              /*设置未访问的超连接无下划线*/

              a:link {

                     text-decoration:none;

              }

              /*设置访问后的连接颜色为#0066ff 也无下划线*/

              a:visited {

                     text-decoration:none;

                     color:#0066FF;

              }

              /*设置鼠标移到超连接上无下划线颜色为#990099*/

              a:hover {

                     text-decoration:none;

                     color:#990099; /*颜色变换*/

              }

              /*设置选定的超连接无下划线,颜色为#0066ff*/

              a:active {

                     text-decoration:none;

                     color:#0066FF;

              }

              /*设置所有td标签*/

              td{

                     text-align:left;

                     vertical-align:top;

                     font-size:12px;

              }

              /*设置所有的hr标签*/

              hr{

                     /*颜色*/

                     color:#cccccc;

                     /*高度*/

                     height:1px;

                     /*上外边距5px*/

                     margin-top:5px;

                     /*下外边距5px*/

                     margin-bottom:5px;

                     /*分隔线如果超出框架部分隐藏*/

                     overflow:hidden;

              }

              /*设置h1*/

              h1{

                     font-size:14px;

                     color:#000000;                           

                     margin-bottom:5px;

                     font-weight:bold;

                     display:inline;       

                     text-align:left;                     

              }

设置head部分样式

#head{

       /*设置head这个div宽度为100%*/

       width:100%;

}

.headtab{

       width:100%;

}

.headta td{

/*设置td内边距上10px 右50px 下25px 左135px*/

       padding:10px 50px 25px 135px;

}             

 Html代码

<div id="head">
       <table class="headtab">
         <tr>
            <td align="left">
                 <img src="images/logo.png">
           </td>
            <td style="text-align:right">                             
                <imgsrc="images/cart.gif">                      
                 <a>购物车</a>
                 <a>帮助中心</a>
                 <a>我的帐户</a>
                 <a>新用户注册</a>                                       
            </td>

        </tr>
       </table>
</div>

设置menu部分样式

#menu{

                     width:100%;

                     background-color:#1c3f09;/*设置背景色*/

                     border-top-width:4px;/*设置上边框宽度4px*/

                     border-top-style:solid;/*设置上边框样式 实线*/

                     border-top-color:#82b211;/*设置上边框的颜色#82b211*/

                     text-align:center;

                     font-size:14px;

                     padding:10px 0px 10px 0px;

              }

       /*#menu下的a标签样式设置*/

       #menu a{

                     font-size:14px;

                     color:#ffffff; /*超连接文字颜色*/

                     font-weight:bold; /*超连接字体加粗*/

                     padding:10px 10px 10px10px; /*超连接内边距*/

              }

                    

       #menu a:link {

                     text-decoration: none;

                     font-weight: bold;

              }

 

       #menu a:visited {

                     text-decoration: none;

                     color:#FFFFFF;

                     font-weight: bold;

              }

 

       #menu a:hover {

                     text-decoration: none;

                     color: #999999; /*颜色变换*/

                     font-weight: bold;

              }

 

       #menu a:active {

                     text-decoration: none;

                     color: #FFFFFF;

                     font-weight: bold;

              }

Html代码

<div id="menu">  

              <table width="100%">

                     <tr>

                            <td>

                                   <a href="#">文学</a>                

                                   <a href="#">生活</a>

                                   <a href="#">计算机</a>

                                   <a href="#">外语</a>

                                   <a href="#">经管</a>

                                   <a href="#">励志</a>

                                   <a href="#">社科</a>                

                                   <a href="#">学术</a>

                                   <a href="#">少儿</a>

                                   <a href="#">艺术</a>                

                                   <a href="#">原版</a>

                                   <a href="#">科技</a>

                                   <a href="#">考试</a>                

                                   <a href="#">生活百科</a>

                                   <a href="#" style="color:yellow">全部商品目录</a>

                            </td>

                     </tr>             

              </table> 

       </div>


设置search部分样式


  /*设置search样式*/    

#search{

                            width:100%;

                            text-align:center;

                            color:#ffffff;

                            font-weight:bold;

                            padding:5px 0px 5px0px;

                            background-color:#b6b684;

                     }

      /*设置search中的文本框样式*/

              .inputtxt{

                            width:130px;

                            height:18px;

                            border:1px solid#999999;

                     }

 Html代码

<div id="search">

       <table width="100%">

              <tr>

                     <td style="text-align:right;padding-right:220px">

                            Search

                            <input type="text" class="inputtxt">

       <input type="image"src="images/serchbutton.gif" style="margin-bottom:-4px;">                                      

                     </td>

              </tr>

       </table>

</div>    


设置content部分样式

 

 /*content整体设置*/

#content{

              width:900px; /*宽度900px*/

              margin-top:10px; /*上外边距*/

              /*左右外边浏览器默认*/

              margin-right:auto;

              margin-left:auto;

       }

       .contentlist{

              background-color:#fcfdef;

              border:1px solid #cccccc;

              width:99%;

              margin-left:5px;

       }

       .contentlist td{

              padding:20px;

       }

       .booklist{

              width:100%;

       }

       .booklist td{

              text-align:center;

              width:25%;

              padding:10px;

       }   

 Html代码

<div id="content">
	<table width="100%">
		<tr>
		<td>
			<div align="right" style="text-align:right;margin:5px 10px 5px 10px;">
	<a href="#">首页</a>
              > 
旅游 > 
图书列表   
		</div>
		<table width="100%" class="contentlist">
			<tr>
				<td>
					<h1>商品目录</h1>
					<hr>
					<h1>计算机类</h1>共xxx种商品
					<hr>
					<div>
						<img src="images/productlist.gif" width="100%">
					<div>
					<table class="booklist">
						<tr>
							<td>
							<div>
<img src="bookcover/101.jpg" width="130" 
height="197">
</div>
							<div>
								书名:xxx<br>
								售价:xxx
							</div>
							</td>
							<td>																<div>
<img src="bookcover/102.jpg" width="130" 
height="197">
</div>
							<div>
								书名:xxx<br>
								售价:xxx
							</div>
							</td>
							<td>																<div>
<img src="bookcover/103.jpg" width="130"
height="197">		
</div>
							<div>
								书名:xxx<br>
								售价:xxx
							</div>
							</td>
							<td>																<div>
<img src="bookcover/104.jpg" width="130" height="197"></div>
							<div>
							书名:xxx<br>
							售价:xxx
							</div>
							</td>											
							</tr>
							</table>
						
									<table width="100%" align="center">
										<tr>
											<td>
												<div><img src="bookcover/105.jpg" width="130" height="197"></div>
												<div>
													书名:xxx<br>
													售价:xxx
												</div>
											</td>
											<td>											
												<div><img src="bookcover/106.jpg" width="130" height="197"></div>
												<div>
													书名:xxx<br>
													售价:xxx
												</div>
											</td>
											<td>												
												<div><img src="bookcover/107.jpg" width="130" height="197"></div>
												<div>
													书名:xxx<br>
													售价:xxx
												</div>
											</td>
											<td>											
												<div><img src="bookcover/code.jpg" width="130" height="197"></div>
												<div>
													书名:xxx<br>
													售价:xxx
												</div>
											</td>											
										</tr>
									</table>			
								</td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</div>




设置foot部分样式

    

  #foot{

              width:100%;

              background-color:#efeedc;

              margin-top:15px;

       }

 //Html代码

<div id="foot">

<table bgcolor="#efeedc" width="100%" align="center">

       <tr>

              <td rowspan="2"style="width:10%">

       <img src="images/logo.png"width="195" height="50"style="margin-left:175px;">

              </td>

              <td style="padding-left:50px;padding-top:5px;">

                     <a><font color="#747556">CONTACT US</font></a>

              </td>

       </tr>

       <tr>

              <td style="padding-left:50px;">

              <font color="#747556">

copyright 2008&copy;BookStoreAll Rights RESERVED

</font>

              </td>

       </tr>

</table>

</div>                  

添加分页条码并设置样式

            //  Css代码

              #pagediv{

                            width:600px;

                            text-align:center;

                            margin:5px;

                            padding:5px;

                     }

              #pagediv ul{

                            margin:5px;

                            padding:5px;

                            font-size:14px;

                     }

              #pagediv li{

                            margin:1px;

                            padding:1px;

                            display:inline;

                            list-style-type:none;

                     }

                    

              #pagediv a,#pagediv a:visited {

                            padding: 5px;

                            border: 1px solid#9aafe5;

                            text-decoration:none;

                            color: #2e6ab1;

                     }

 

              #pagediv a:hover,#pagediv a:active{

                            padding: 5px;

                            border: 1px solid#2b66a5;

                            color:#000000;

                            background-color:lightyellow;

                     }

                    

              #pagediv li.currentpage{

                            font-weight:bold;

                            padding:5px;

                            border:1px solidnavy;

                            background-color:#2e6ab1;

                            color:#ffffff;

                           

                     }

              #pagediv li.nextpage{

                            font-weight:bold;

                            padding:5px;

                     }

              #pagediv li.disablepage{

                            padding: 5px;

                            border: 1px solid#929292;

                            color: #929292;

                     }


 Html代码

 

 <div id="pagediv">

                     <ul>

                            <li class="disablepage">上一页</li>  
                            
                             <li class="currentpage">1</li>

                            <li><a href="#">2</a></li>

                            <li><a href="#">3</a></li>

                            <li><a href="#">4</a></li>

                            <li><a href="#">5</a></li>

                            <li>...</li>

                            <li><a href="#">6</a></li>

                            <li><a href="#">7</a></li>

                            <li><a href="#">8</a></li>

                            <li><a href="#">9</a></li>

                            <li class="nextpage"><ahref="#">下一页</a></li>

                     </ul>

       </div>


注册页面

案例分析 :

对于注册页面,我们的headmenu search foot部分内容只需要与显示商品信息页面中一样设置就可以,主要是对content内容进行设置

设置content部分

//Css代码          

/*注册页面content部分整体设计*/

#content{

              width:900px;

              background-color:#fcfdef;

              border:1px solid #eeeddb;

              margin-right:auto;

              margin-left:auto;

       }    

/*设置边框*/                     

       .upline{

              border-bottom-width:1px;

              border-bottom-style:dashed;

              border-bottom-color:#b0bec7;

              padding-top:5px;

              padding-bottom:5px;

              margin:20px;

       }

       /*设置文本框样式*/

       .txtinput{

              margin-left:10px;

              font-size:12px;

              width:150px;

              height:18px;

              border:1px solid #a4b4bd;

       }

/*设置文本域样式*/

       .txtarea{

              margin-left:10px;

              font-size:12px;

              width:350px;

              height:75px;

              border:1px solid #a4b4bd;

       }

             

 

Html代码

<div id="content">              

       <form action="#"method="post">

              <table width="850px"border="0" cellspacing="0">

                     <tr>

                            <td style="padding:30px;">

                                   <h1>新会员注册</h1>

                                   <table width="70%" border="0" cellspacing="2"class="upline">

                                          <tr>

                                                 <td style="text-align:right;width:20%">会员邮箱:</td>                                                            

                                                 <td><input type="text" name="email"class="txtinput"></td>                 

                                                 <td>

                                                        <font color="#999999">请输入有效的邮箱地址</font>

                                                 </td>

                                          </tr>

                                         

                                          <tr>

                                                 <td style="text-align:right;">会员名</td>                                                           

                                                 <td><input type="text" name="username"class="txtinput"></td>

                                                 <td><font color="#999999">用户名至少六位</font></td>

                                          </tr>

                                         

                                          <tr>

                                                 <td  style="text-align:right;">密码</td>                                                           

                                                 <td><input type="password" name="password"class="txtinput"></td>                                                            

                                                 <td><font color="#999999">密码至少六位</font></td>

                                          </tr>

                                         

                                          <tr>

                                                 <td  style="text-align:right;">重复密码</td>                                                           

                                                 <td><input type="password" name="repassword"class="txtinput"></td>                                                         

                                                 <td> </td>

                                          </tr>

                                         

                                          <tr>

                                                 <td style="text-align:right;width:20%">性别</td>                                                          

                                                 <td colspan="2"><input type="radio" name="sex"value="男"checked>男  <inputtype="radio" name="sex" value="女">女</td>

                                                

                                          </tr>

                                         

                                          <tr>

                                                 <td style="text-align:right;width:20%">联系电话</td>                                                          

                                                 <td colspan="2"><input type="text"name="telephone" class="txtinput"style="width:350px;"></td>                                                         

                                                

                                          </tr>

                                         

                                          <tr>

                                                 <td style="text-align:right;width:20%">个人介绍</td>                                                          

                                                 <td colspan="2"><textarea name="introduce"class="txtarea"></textarea></td>                                                         

                                          </tr>

                                   </table>

                                   <h1>注册校验</h1>

                                   <table width="70%" border="0" cellspacing="2" class="upline">

                                          <tr>

                                                 <td style="text-align:right;width:20%">输入校验码</td>

                                                 <td><input type="text" name="checkcode"class="txtinput"></td>

                                                 <td> </td>

                                          </tr>

                                         

                                          <tr>

                                                 <td> </td>

                                                 <td colspan="2">

                                                        <imgsrc="" class="txtinput" style="height:30px;">

                                                        <ahref="#">看不清换一张</a>

                                                 </td>

                                          </tr>

                                   </table>

                                  

                                   <table width="70%" border="0" cellspacing="2">

                                          <tr>

                                                 <td style="text-align:center">

                                                        <input type="image" src="images/signup.gif">

                                                 </td>                                                             

                                          </tr>

                                   </table>

                                  

                            </td>

                     </tr>

              </table>

       </form>

</div>


 

展开阅读全文

没有更多推荐了,返回首页