码迷,mamicode.com
首页 > Web开发 > 详细

HTML and CSS学习概述-续<Lovo>

时间:2014-08-31 18:34:31      阅读:476      评论:0      收藏:0      [点我收藏+]

标签:des   style   color   os   使用   io   ar   for   文件   

1,   CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持,成为网页设计者必须掌握的技术之一。

2,CSS将从基础开始建设直到全面替代传统Web设计方法。W3C组织创建的CSS技术将替代HTML中用于表现的HTML元素。
提高页面浏览速度。使用CSS,比传统的Web设计方法至少节约50%以上的文件尺寸。
缩短改版时间,降低维护费用。只要简单修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
强大的字体控制和排版能力。有了CSS,我们不再需要用font标记或者透明的1 px GIF图片来控制标题,改变字体颜色、字体样式等等。
CSS非常容易编写。我们可以象写HTML代码一样轻松地编写CSS。
可以一次设计,随处发布。你的设计不仅仅用于Web浏览器,也可以发布在其他设备上。
更好的控制页面布局。结合CSS和div元素,可以比传统的使用table元素更好地控制页面布局。
实现表现和结构、内容相分离。将网页的表现形式部分剥离出来放在一个独立样式文件中,可以减少未来网页无效的可能。
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到网页的内容,并可能给网页一个较高的评价。

3,将CSS引入HTML的方式有三种
1.外部样式表
不需要style标签
<link rel=“stylesheet” href=“” />(尽量将css与HTML分开,所以常用外联)
2.嵌入样式表
<style type=“text/css”>
p{}
</style>
3.内联样式表
属性名为style
举例:<p style=“”></p>

4,每个样式规则分为选择器和规则本身两个部分,选择器用于规则所应用的元素,规则本身则指定格式。
简单选择器
元素选择器
类选择器
ID选择器
伪类和伪元素选择器
复合选择器
交集选择器
并集选择器
后代选择器

4.1,HTML元素是最典型的选择器类型,任何一个HTML元素都可以做为选择器

4.2,如果想要把某一个样式应用到不同的HTML元素上,可以采用类选择器来定义,然后在不同标签中应用它们。(class="")

4.3,除了使用类选择器的方式定义一个样式以外,还可以使用ID定义样式。ID与类选择器的概念相似,只是ID选择器只能被引用一次,而类选择器可以被多次引用。
要将一个ID包括在样式定义中,应用一个井号(#)作为ID名称的前缀 

4.4,伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。
伪类区别开不同种类的元素。例如,visited links(已访问的链接)和active links(可激活链接)描述了两个锚点的类型。
伪元素指元素的一部分,例如段落的第一个字母。(选择器:伪类 { 属性: 值; }
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

选择器:伪元素 { 属性:值; }
p:first-letter {font-size:2em}  /* p元素中内容首字母放大 */)

4.5,4种选择器为基础,通过组合,还可以产生更多种类的选择器,实现更强、更方便的选择功能,复合选择器就是由基本选择器通过不同的连接方式构成的。
复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器。

4.6,交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格,必须连续书写。

4.7并集选择器是多个选择器通过逗号连接而成的。在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,就可以利用并集选择器同时声明风格相同的CSS选择器。

4.8如果需要为位于某个标记符内的元素设置特定的样式规则,则应将选择器指定为具有上下文关系的HTML标记(后代选择器)

4.9层叠样式表背后的概念是,多个样式定义可以层叠向下通过多个层次来影响文档。样式定义的多个层次可以应用于任何文档。层次的优先级别从小到大依次为:
外部样式表
嵌入式样式表
内联样式
如果是同一个样式表中不同选择器,优先级别从小到大依次为:
元素选择器
类别选择器
ID选择器

                                                                                               CSS的基本属性

1,在HTML中,无论是字体的大小,还是图片的长度设置,通常都使用像素或百分比来进行设置。而在CSS中,就有了更多的选择,可以用长度单位,主要分为两种类型,一种是相对类型、另一种是绝对类型。
相对类型
绝对类型

所谓相对,就是要有一个参考基础,相对于该参考基础而设置的尺度单位。这在网页制作中有两种。
1.px(piexl)
像素,根据显示设备的分辨率多少而代表不同长度。
2.em
以目前字符的高度为单位。

所谓绝对,就是无论显示设备分辨率是多少,都代表相同的长度。

bubuko.com,布布扣

2,

CSS定义颜色有多种不同的方法:

h3{color:blue;} 使用颜色的英文名称作为属性值
h3{color:#0000ff;}    使用是十六进制数值
h3{color:#00f;} 第二种方式的简写
h3{color:rgb(0,0,255);} 使用给定红绿蓝3种颜色分量的十进制数值
h3{color:rgb(0%,0%,100%);} 使用给定红绿蓝3种颜色分量的百分比

3,设置文字的字体

h1{
            font-family:黑体;
}
p{
    font-family: Arial,"Times New Roman";
}
如果Arial字体和Times New Roman字体,其含义是告诉浏览器首先在访问者的计算机中寻找Arial字体,如果不存在则使用Times New Roman字体。

4,设置字体倾斜效果
font-style:normal; /*正常字体模式*/
font-style:italic;/*斜体*/
设置文字加粗效果
font-weight:nomal; /*正常*/
font-weight:bold; /*粗体*/
font-weight:bolder; /*加粗*/
font-weight:100/*范围100-900,数字越大字体越粗*/

5,英文字母大小写转换

p.one{
            text-transform: capitalize; /*单词首字母大写*/
}
p.two{
            text-transform: uppercase; /*全部大写*/
}
p.three{
            text-transform: lowercase; /*全部小写*/
}

6,控制文字大小

font-size:12px; /*设置文字大小为12像素*/
font-size:2em; /*设置文字大小为当前文字大小的两倍*/
font-size:150%; /*设置文字大小为原来文字大小的1.5倍*/

6,文字的装饰效果
text-decoration: none; /*正常显示*/
text-decoration: underline; /*下划线*/
text-decoration: line-through; /*删除线*/
text-decoration: overline; /*顶线*/


7,设置段落首行缩进
text-indent:2em; /*首行缩进2个标准字符大小的距离*/
设置字词间距
在英文中,文本是由单词构成的,而单词是由字母构成的,因此对于英文文本来说,要控制文本的疏密成都,需要从两个方面考虑,即设置单词内部的字母间距(letter-spacing)和单词之间的距离(word-spacing)
word-spacing:10px;
letter-spacing:-1px;

8,设置段落内部的文字行高
如果不使用CSS,在HTML中是无法控制段落中行与行之间的距离的。而在CSS中,line-height正是用于控制行的高度,通过它可以调整行与行之间的距离。下面列出line-height属性的设置值:
长度:数值,可以用前面介绍的尺度单位。
倍数:font-size设置值的倍数
百分比:相对于font-size的百分比

9,控制文本的水平位置
text-align属性可以方便地设置文本的水平位置。
left:左对齐(浏览器默认)
right:右对齐
center:居中对齐
justify:两端对齐
设置文字与背景颜色
background-color:#000; /*背景色*/
color:#000; /*前景色*/

10,设置段落的垂直对齐方式
在CSS中有一个用于垂直方向对齐的属性vertical-align。在目前的浏览器中,只能对表格单元格中的元素进行垂直对齐设置,而对于一般的块级元素,例如div等,都是不起作用的。比如在表格单元格中使用vertical-align:middle,那么该单元格中的元素会实现垂直居中对齐,如果放在div中则没有效果。
使用line-height属性进行设置
如果文字内容只有一行,则可以使用line-height与height相同的办法使文字垂直居中。
弊端:如果文本内容超过一行,该方法则无效。

                                                                                   CSS的基本属性---图像样式

1,在HTML中可以直接通过<img>标记的border属性为图片添加边框,属性值为边框的粗细,以像素为单位,从而控制边框的粗细。如果值为0,则显示为没有边框。不过这种方式的限制是边框只能是黑色,而且风格单一,且都是实线。

2,在CSS中可以通过边框属性为图片添加各式各样的边框。一个边框由3个要素组成。
1.border-width(粗细):可以使用各种CSS中的长度单位。
2.border-color(颜色):可以使用各种合法的颜色来定义。
3.border-style(线性):可以在一些预先定义好的线性中选择。
为不同的边框分别设置样式
实际上一个边框分为四个方向,分别是left(左)、right(右)、top(上)、bottom(下)。可以为这四个方向的边框分别设置边框样式,比如:border-left-style、border-top-width。
在熟悉边框设置,可以将border的各个值写到一个语句中,用空格分离。比如:border:1px solid red,这个表示边框宽度为1像素,红色的实线。

3,CSS中控制图片的大小与HTML一样,也是通过width和height两个属性来实现。所不同的是CSS中可以使用更多的值,比如百分比。

img{
    width:50%; /* 相对宽度 */
    height:100px; /* 绝对高度 */
}

4,文字环绕
文字环绕图片的方式在实际页面中的应用非常广泛,如果再配合内容、背景等多种手段便可以实现各种绚丽的效果。在CSS中主要是通过给图片设置float属性来实现文字环绕的。

img{
       float:left;     /* 图片在文字左边 */
}

5,当图片与文字同时出现在页面上的时候,图片的对齐方式就显得很重要了。如果能够合理地将图片对齐到理想的位置,成为页面是否整体协调、统一的重要因素。下面从水平对齐和垂直对齐两方面来阐述。
水平对齐
水平对齐可以通过text-align属性来设置。比如在img标记的父标记中设置text-align后,该图片同样能根据设定的值进行对齐,比如:
<p style=“text-align:right”><img src=“1.jpg” /></p>
垂直对齐
图片垂直方向上的对齐方式主要体现在与文字搭配的情况下,尤其当图片的高度与文字本身不一致时。在CSS中同样是通过vertical-align属性来实现各种效果的。

<p><img src=“1.jpg” style=“vertical-align:text-bottom” /></p>

6,设置背景颜色
background-color:#00F
设置背景图片
background-image:url(bg.jpg)
设置背景图片平铺
在默认情况下,图像会自动向水平和垂直方向平铺。如果不希望平铺,或者只希望沿着一个方向平铺,可以使用background-repeat属性来控制。该属性有如下几种值:
repeat:水平和垂直方向平铺,默认值。
no-repeat:不平铺。
repeat-x:只沿水平方向平铺。
repeat-y:只沿垂直方向平铺。

7,如果设置背景图像不平铺,那么这背景图像默认是在元素的左上角显示。如果希望背景图像出现在右下角或其他位置的话,就需要使用CSS的一个属性background-position。

body{
    background-image:url(bg.jpg);
    background-repeat:no-repeat;/*不平铺*/
    background-position:right bottom;
}
/*
在background-position属性中,设置两个值:
    1.第一个值用于设定水平方向位置,可以选择left(左)、center(中)、right(右)。
    2.第二个值用于设定垂直方向的位置,可以选择top(上)、center(中)、bottom(下)。
除了可以使用固定值外,也可以使用像素和百分比来设定显示位置。
 */

8,在网页上设置背景图片时,随着滚动条的移动,背景图片也会跟着一起移动。如果使用CSS的background-attachment属性可以把背景图像设置成固定不变的效果,使背景图像固定。

body{
            background-image:url(bg.jpg);
            background-repeat: no-repeat;
            background-position: 50% 0px;
            background-attachment: fixed;
}

 

HTML and CSS学习概述-续<Lovo>

标签:des   style   color   os   使用   io   ar   for   文件   

原文地址:http://www.cnblogs.com/Spirit612/p/3947958.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!