标签:ebe color size 浏览器 页面 情况 idt select ref
第一章 css的四种引入方式
1.行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。
<p style="background-color: rebeccapurple">hello yuan</p><strong><br></strong>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
3.链接式
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
4.导入式
将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中。
<style type="text/css"> @import"mystyle.css"; 此处要注意.css文件的路径 </style>
注意:
导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。
1
2
3
4
5
6
7
|
<div style = "color:blueviolet" >ppppp< / div> <div style = "color:#ffee33" >ppppp< / div> <div style = "color:rgb(255,0,0)" >ppppp< / div> <div style = "color:rgba(255,0,0,0.5)" >ppppp< / div> |
1
2
3
4
5
6
7
|
font - size: 20px / 50 % / larger font - family: ‘Lucida Bright‘ font - weight: lighter / bold / border / <h1 style = "font-style: oblique" >老男孩< / h1> |
background-color: cornflowerblue background-image: url(‘1.jpg‘); background-repeat: no-repeat;(repeat:平铺满) background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom) 简写:<body style="background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)"> <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url(‘1.jpg‘)">
如下代码所示:
背景属性还会定义图片的长和宽,是否重复,以及图片的位置。
4.block和inline-block、inline
二者的区别:
5.position定位
position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
可能的值如下表所示:
值 | 描述 |
---|---|
static | 默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。 |
relative | 位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。 |
absolute | 位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。 |
fixed | 位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict 模式)。 |
标签:ebe color size 浏览器 页面 情况 idt select ref
原文地址:http://www.cnblogs.com/qianmeng/p/7661064.html