我的ASP.NET学习笔记04CSS基础知识(2)

Css基本概念什么是CSS中文是指层叠样式表,其根本的作用是对HTML页面中的内容进行美化。能够对HTML元素的显示方式进行非常精确的调整。 如何在Html页中加入CSSHtml标签的style属性直接在Html标签的style属性中添加css代码。示例:
<p style="">

今天是星期天

</p>
内部样式表内部样式表,就是交将CSS的内容写在html文件之中。示例:
<style type="text/css">

p{ color:#F90;}

</style>
外部样式表是指将css的内容写在另外一个扩展名为.css的文件之中。
<link href=”外部样式表文件所在的路径” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>

@import url(外部样式表文件所在的路径)

</style>
样式表文件扩展名.css 专门用来存放css样式内容的文件。 选择器所谓选择器,就是确定一条样式语句所针对的对象,说白就是这个样式用在谁身上。 CSS样式与选择器的书写的格式选择器{样式名:样式值 ; 样式名2:样式值2;……} html标签选择器就是说,当前样式的应用范围是某一类html标签。其写法是直接用标签名作为选择器。比如:
p{ color:#F90;} /*指定页面上所有的p段落标记的样式*/
table{ }
id选择器最好只用于某一个html元素,因为在后期学习javascriptjquery的时候,重复的id名会导致程序错误。class类选择器查找匹配class类名称一致的html元素,并将样式效果应用在这个元素之上。 如果需要将一个样式重复应用在多个html元素之上的时候,就需要使用class类选择器了。 .类名{ 样式属性名:样式属性值 }示例:
.blueP{ color:#03F;}
CSS中的字体选择字体示例:
.blueP{ color:red; font-family:"幼圆"; }
font-family属性用于设置字体,双/单引号中的字体名称必须是当前计算机上已经安装的字体。 字体大小
P{font-size:36px;}
font-size属性用于设置文字的大小,通常使用px像素作为单位。 文字颜色
P{color:#FF0000;}
颜色可以通过3位或6位的16进制数来表示,也可以通过具体的颜色名称,比如:redbluegreen….. 文字加粗
.P1{font-weight:bold;}
文字样式斜体 font-style:italic正常 font-style:normal 需要记忆的内容style 样式stylesheet 表格font-familyitalic 斜体normal 正常背景背景色 background:red;都可以指定背景颜色。背景图
background-image:url(images/bb.jpg)

background:url(images/bb.jpg)
背景图的重复方式如果背景图的显示区域比背景图大的话,那么背景图自动的重复显示,直到填满整个区域。我们也可以手动指定它的重复方式。 background-repeat:repeat-x; 横向重复background-repeat:repeat-y; 纵向重复background-repeat:no-repeat; 不重复背景位置background- position用于确定背景图在容器范围内的显示位置:background-positionleftrightcenter(水平方向)topbottom(垂直方向上的对齐,如果不写的话是垂直居中) 示例:
background:url(images/bb.jpg);

background-repeat:repeat-y; background-position:right bottom;
背景的缩写background:{背景色 图片路径 重复方式 位置x 位置y}示例:
background:url(images/bb.jpg) no-repeat right bottom;
需要记忆的内容positionrepeatoverflowscrollvisiblefloatMarginbordersolid  DIV标签html中的一种块级元素。默认宽度是100%(父容器宽度的100%),而且一个div占一行。 div中常用的css属性width height:就是定义元素的宽度和高度overflow:当容器中的内容超出容器的最大范围后,会如何外理。hidden 隐藏超出的内容。scroll 当内容超出时,div边缘出现滚动条,允许我们通过拖动滚动条来查看超出的内容。visible 就是可见,允许内容在容器范围之外显示。这也是div的默认值。float是指浮动,其实际作用是水平对齐。我们可以用这个属性让多个块级元素对齐在同一行。允许在一行之中同时有左对齐和右对齐。clear:清除浮动,清除上一个div的对齐效果,让当前div另起一行。就是不再跟随前一个div对齐,而是自己另起一行来再对齐。Margin:外边距,元素外侧与其他元素之间的距离。Margin-leftMargin-rightMargin-topMargin-bottom分别代表左右上下方向上的外边距。缩写形式:Margin:上右下左  示例:margin:20px 50px 30px 5px;Margin:上下 左右  示例:margin:20px 50px;当上下边距一致,左右边距一致,只需写两个参数。Margin:边距  示例:margin:20px;当四个边距一致,只需写一个参数。 如何让div等块级元素居中margin:auto;或 marign:0 auto;我们可以理解为,是两侧的边距将其“顶”了中间。 Border边框,html元素的边框线宽度。border-width :边框线宽度示例:border-width:5px 20px 2px 15px;border-width:5px 20px;border-width:5px;border-color : 边框的颜色border-style : 边框线的样式 , solid实线、double双线、dotted虚线。Border-[left/right/top/bottom]-[width/color/style]:分别表示设置线条的左右上下的宽度或颜色或线条样式。缩写:border:宽度 线条样式 颜色示例:border:1px solid #333; padding内边距 , 元素边框与内容之间的距离。padding-leftpadding-rightpadding-toppadding-bottom分别代表左右上下内边距。另外它还有一种缩写形式:padding:上 右 下 左;padding:上下 左右;padding:内边距值;  盒子模型html中,无论divtable等其他元素的实际宽度和高度,并不是其widthheight所设置的值,其 实际的所占用的大小是: (外边距+边框+内边距)*2+width =实际宽度(外边距+边框+内边距)*2+ height=实际高度         如何让多个div处于同一行1、 处在同一行的多个divcss属性中必须定义float属性。2、 这多个div必须都定义了csswidth宽度属性。3、 这多个divwidth值总合,不能超过父容器的宽度。 随堂练习:1、 定义三个宽200px,高100pxdiv,让它在水平方向左对齐处于同一行。背景色分别是红黄兰。2、 定义两个宽200像素、高100pxdiv,让它们处于同一行,但分别左对齐和右对齐。背景红黄3、 将第一题复制到一个新页面,三个div中的第一个边框为黑色4像素、内填充(内边距)5像素。第二个div边框线为上1px4px10px3px。第三个div外边距上3px 40px 3px 10px 4、 div构建如下图型。         5、用div构建如下图型          6         CSS的复合选择器并列选择器同时选择多个元素。用逗号间隔多个选择器,为多个选择器同时添加同样的样式。示例:
.a1,#a2,p{ width:100px ; height:100px ; float:left;}

.a1{ }

#a2{ background-color:green;}

p{ background-color:blue;}
层级选择器通过空格来表示多个选择器之间的相包含的关系。 
.a1 .s1{ color:red;}

div ul li{ color:red;}
 块级元素与线性元素块级元素div就是典型的块级元素:特征如下:1、 默认情况下,宽度是100%,高度是02、 默认情况下,一横行中只能有一个块级元素。线性元素span就是典型的元素:它的宽度由内容决定,其中的一行文字甚至会自动换行。 css中的display属性Display决定了一个元素的显示方式,它可以更改一个html元素原本的特性。display的常见值block 代表块级元素inline 代表线性元素inline-blok 同时兼具块级元素和线性元素的特点。其宽度是由其内容决定的,但是多个线性元素可以同时处于同一行。None 代表可以隐藏一个html元素 示例1
<form class="f1">1</form>

<a href="#" class="aa1">1</a>

 

.f1,.aa1{width:150px; height:150px; background:#09F; display:block; float:left;}

 
示例2
<div class="a2">魂牵梦萦需要</div>

<span class="s1">白日依山尽黄河啊</span>

 

.a2{width:200px ; height:200px;   display:inline}

.s1{ width:300px; height:100px ; display: block; background-color:#C60; float:right;}

 
示例3
<div class="a1"></div>

<div class="a2"></div>

 

.a1,.a2{width:200px ;  height:200px; background-color:#F30; display:inline-block;  margin:0;  text-indent:0;  padding:0; }

.a2{background-color:#6C9; display:none;}

伪类 示例:
a,

a:link{ font-family:"华文行楷"; font-size:30px; color:red;}

a:hover{ color:#0C0;font-family:"幼圆"; }

a:active{ color:blue;}

a:visited{ color:black;}

.hh,

.hh:link{ color:#C60}

.hh:hover{ color:#FF0}

.hh:active{ color:#666}

.hh:visited{ color:#63C;}
css中的注释所谓注释,就是在代码中文字描述的一种方式。格式:/*   注释的内容    */ 注释在很多时候用于让代码失效。 练习:未访问时,没有下划线,灰色,宋体 , 12像素。鼠标移动上去后,文字变为红色,显示下划线。点击下去,文字变为紫色,访问过后,文字变为黑色未访问时,没有下划线,黑色,微软雅黑 , 14像素。鼠标移动上去后,文字变为红色,显示下划线。访问过后,样式与未访问时一样。 作业:1、 div+css制作,网页12、 div+css制作,网页23、 用伪类制作一个二级的动态下拉菜单。   实际制作网页中的技巧:网页文件与相关文件夹的命名1、网页中的所有文件,包括htmlcss、图片文件,都应该存放在同一个文件夹中。其中,css文件放stylecss文件夹中,图片放在imagesimg文件夹。 2css的代表如果超过50行就需要放在一个独立的css文件中。 3、首页index.html 调整网页的默认边距,并建立一个整体的框架1、 dreamweaver中,切换到设计视图 à 在页面的空白处点击右键弹出菜单 à 页面属性 à 设置字体大小、页面背景色、页面边距等参数。2、 也可以手动写入css
body {

  margin:0px;

  font-family:"宋体";

  font-size:12px;

  

  /*

  1、网页在默认情况下会自动添加10像素左右外边距,因此我们需要手动的去将它清除掉,也就是设置为0  。

  2、针对body进行的字体和字号的设置,会应用到这个网页上除了表格之外的所有元素中。

  */

}
 3、 通常网页的内容都是水平居中显示,要想实现网页内容整体的水平居中,我们就需要首先规划出网页最外侧的一个大的框架div。并在这个div上添加marginauto属性。 4、 在很多情况下,如果我们没有明确的设置块级元素的高度,那这个元素的默认高度,就是0。这种情况下,这个块级元素它里面的内容实际上是超出了这个div的范围的,那么下面还有div的话,就会发生两个div内容的重叠。 因此,我们需要在div内容的最后,加一句:<div style=”clear:both”>
 浮动层浮动层就是指我们对块级元素添加浮动效果,让它能够浮动在其他的html元素的上方。 相对浮动让一个div内部的子div“漂浮”于其他html元素的上方。它浮动的位置是相对于父级div的左上角的。1、必须让两个div相互配合才能够实现,并且两个div是父子的相互嵌套关系。2、在父div中我们需要定义css属性positionrelative3、在子div中我们需要定义其css属性positionabsolute4、在子div中定义其css属性topleftrightbottom来确定子div的左上角相对于父div左上角的坐标的偏移量(父与子div的 左上角的那一个点之间的距离,分横向和纵向,正数为向下或右移动,负数为向上或左移动。) 绝对浮动不需要两个div相配合,只需要一个div,让这个div相对于它自身原本的位置来移动。 1、在div中我们需要定义其css属性positionabsolute2、在div中定义其css属性topleftrightbottom来确定子div的左上角相对它原本位置的偏移量(原位置与div之间的距离,分横向和纵向,正数为向下或右移动,负数为向上或左移动。) 练习:1、 定义两个div,其中分别放入了两张图片。然后,让一这个子div,显示在父div的外面。2、 在页面上加个一个div和一个table,表格中有一些文字,让这个div出现在表格的上方。  需要记忆的单词:positionrelativeabsolute