您的位置：首页 > Web前端 > CSS

HTML&CSS 第四天 笔记

2013-03-09 11:13 309 查看
内联元素:

内联元素,又叫"行内元素",w3c组织则称之为"行内框",

网友的经典比喻----"行内元素"就是橡皮筋.

内联元素,只对每一行的文字起作用,或者说: 内联的作用范围,不能跳出行的区域.

块状元素与内联元素的区别

独占一行

能设宽高

竖直方向的margin,padding

块状元素

是

是

有,可以设置

内联元素

否

否

没有,也不可以设置

相比于块状的盒子模型,如何方便的理解内联元素?

答:可以把内联元素当成有弹性的橡皮筋来看.

内联元素又被称为"行内元素".

内联元素与块状并不是完全无关的东西,可以相互转换.

可以通过元素的 display 属性来设置.

display:block; 强制声明某元素为块状元素

display:inline; 强制声明为内联元素.

display:none; 压根不显示., 设置之后,该元素和该元素的子元素不再显示,

等同于这段代码被删除的效果,在页面内一点空间都不占.

内联元素下方的空白问题:

在一大段,N行(N>=2)文字中,

文字的行与行之间,有行距.每行行距也相等,

但是,在最后一行, 与后面的块状元素,则有一个明显的边距,

这个边距,是我们用css控制不了的.

图片是内联元素还是块状元素?

目前我们所学的:

div,p,h*,pre ,form是块状元素.

a, span, br ,是内联元素

开发中,常碰到图片与下方的块状元素有空白的问题

原因:因为图片是内联元素,所有内联元素结束后,与后面的块状元素有一段空白.

解决: 通过display来转换img为块状元素,然后再通过margin:0来解决.

背景：

color: 代表纯颜色背景。 例：　red,blue, #FFF,#3098E1

image ：url(图片路径)。　注意：图片路径不加引号

repeat: 铺排效果。　例：repeat-x ,repeat-y,repeat, no-repeat

attachment:滚动效果：例：scorll(默认)，随元素滚动,fixed相对屏幕不变位置，像被钉住

(兼容性不好,用的不多)

postion:背景图片位置　例：center top/ -20px -30px

多个元素共用一个背景图!

这种现象在大网站非常常见.

作用:可以节省很多次的请求,把众多的背景图的请求压缩为1次.

因为,大网站每天的访问量都可能上亿, 这时的性能提升就很明显.

如果用一个比元素还要大的图做背景时,

图片与元素是如何重合的,或者说,用图片的哪一部分做元素的背景呢?

答: 默认是把 背景图的原点 与 元素的原点重合,

元素有多大,自然截出多大的背景图.

就是计算: 背景的原点相对于元素的原点的坐标关系

做网站时背景图片的一个小技巧：

比如某个元素设置了以黑色为主的图片做背景图，那么，一般要为该元素设一个背景色，

目的是，当背景图失效时，使网站的视觉效果不会反差太大。

利用像素定位的关键：

1:在计算机屏幕上，左上角是原点。Ｘ轴往右为正，Ｙ轴往下为正。

２：默认是背景图的原点和元素的原点重合。

文本控制

段落缩进:text-indent

作用:控制一段首行的缩进距离.

例: css选择器{text-indent:20px;}

水平对齐:text-align

作用:控制文字在水平方向上的对齐方式

例: css选择器{text-aligh:left;} //可选值 left,right,center, 默认是left;

文本装饰:text-decoration

作用:给文字加一些修饰线的效果.

例:css选择器{text-decoration:underline;} // none,underline,overline,line-through,blink

字母间距:letter-spacing

作用:控制单个字符之间的距离

例:css选择器{letter-spacing:20px;}

词间距:word-spacing (对中文无效);

作用:控制单词与单词之间的距离

例: css选择器{word-spacing:20px;}

大小写转换:text-transform

作用:按一定规则转换字母的大小写

例: css选择器{text-transform:uppercase;} // uppercase, lowercase,capitalize;

capitalize: 是把首字母大写,其他字母不受影响.

字体控制:

font-style : 显示风格

作用:控制文字的是否斜体显示或正常显示.

例: css选择器{font-style:italic;} //normal,oblique

font-weight: 字体粗细

作用: 控制文字的粗细程度

例:css选择器{font-weight:bold;} //normal/bold

font-size: 字体大小

作用:控制字体的大小

例:css选择器{font-size:30px;} //则每个字符以30像素的大小显示.

line-height: 行高

作用:设置每行文字所占的高度,(特点:在一行内,文字总是相对于行居中显示,所以可以利用这个特性让文字相对于容器居中)

例: css选择器{line-height:30px;}// 则每一行占据30个像素高.

font-family: 设置字体

作用:设置显示文字所用的字体.

有衬线字体 ------ 笔画拐弯的时候,有尖角的字体

无衬线 ------笔画等宽,拐弯的时候也没有尖角

要点:

1、先英文字体,再中文中体

2、先特殊字体,再安全字体

3、 先具体字体,再字体大类

注意: 当声明多个字体,如果某个字体名称含多个单词,或者中文字体,

则字体名用双引号包起来.

把所有字体属性写在一行里:

font: style weight size/line-height family

字的颜色如何控制:

color: red / #EEE;

如何显示客户机上没有的字体

@font-face版本：CSS2　 兼容性：IE4+

语法：

@font-face { font-family : name ; src : url( url ) ; sRules }

说明：

name : 　字体名称
url : 　使用绝对或相对地址指定OpenType字体
sRules : 　样式表定义

设置嵌入HTML文档的字体。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。

示例：

@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example.com/font.eot); }

详细示例：

<HTML>
<HEAD>
<STYLE>
@font-face {
font-family:comic;
src:url(http://valid_url/some_font_file.eot);
}
</STYLE>
</HEAD>
<BODY>
<P STYLE="font-family:comic;font-size:18pt">
This paragraph uses the font-face rule defined
in the above style element. The rule embeds
an OpenType file for the Comic Sans font.
</P>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航