内联元素:
内联元素,又叫"行内元素",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> |