返回目录

点评或提问麻油四接着往下看教程。

点评或提问css,又称样式表,是用来控制显示的模样,比如文字的大小,颜色;网页排版;鼠标的样式等等。

点评或提问css可以直接写到网页中的<style>内,通常放在head区;也可以通过元素的style属性,指定css样式。

点评或提问为了解决浏览器显示不一致的问题,通常会有一段固定写法css放在最前面来重置样式,称之为reset css。

点评或提问reset css也有很多种版本,这里选取来自Eric Meyer的版本( http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ )。

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
:focus { outline:0; }
body { line-height:1;}
ol, ul { list-style:none; }
table { border-collapse:separate; border-spacing:0; }
caption, th, td { text-align:left; font-weight:normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

点评或提问可将各个页面共用的css写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" />

点评或提问这种方式的引用可以利用浏览器缓存,节省带宽。

点评或提问以这一行为例

点评或提问body { line-height:1; }

点评或提问其中"body"称为"选择器";line-height是修改是css属性名称,1对其设定的值。

点评或提问css选择器分3大类

点评或提问1. 选择标签,直接用标签名

点评或提问2. 通过id选择单个元素,id不能重复,一个id对应一个元素

点评或提问比如

<p id="header">标题</p>

点评或提问在css中可以这样选中它

#header { }

点评或提问3.通过class选择一批元素,一个元素可以有多个class,一个class可以应用到多个元素身上。

点评或提问比如

<p class="red big">A</p>
<p class="black big">B</p>

点评或提问在css中

.red {} /*选中A*/
.black {} /*选中B*/
.big {} /*选中A和B*/

点评或提问选中元素之后,就能对其设定样式的了。

点评或提问为了对样式建立一个基本概念,先看这幅图

css盒模型
图:css盒模型

点评或提问一个html元素,从内到外依次是

点评或提问内容 -> padding(内边距) -> border(边框)-> margin(外边距)

点评或提问而背景(background)是在边框内部,也是内容+内边距的背后。

点评或提问对于内容也可以设置排版具体的样式,常用的有:

点评或提问文本居中

text-align:center;

点评或提问设置文字颜色

color:#ccc;

点评或提问颜色是十六进制的格式,可以使用一些屏幕取色软件来获取。

点评或提问ColorMania汉化版就是一款不错的工具(下载地址 http://www.hanzify.org/index.php?Go=Show::List&ID=12188

点评或提问设定背景色以及背景图片

background:#666666 url(bg.gif);

点评或提问设定宽度

width:600px;

点评或提问设定边框样式

border:1px solid #ccc;

点评或提问更多的css可以参看 CSS手册 链接

点评或提问下面来谈谈css的布局。

点评或提问布局无非是将网页元素左左右右的摆放,可以通过 float(浮动) 来实现这一效果。

点评或提问比如,下面的样式可以让元素向右浮动。

float:right;

点评或提问习惯上用div作为页面布局的元素,内容包含在div中。

点评或提问使用浮动时,有一个常见问题。

点评或提问下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围。

点评或提问通常的解决方案是在其父层(如果没有,就新加一个div作为父层)的class上加上clearfix。

点评或提问clearfix的样式定义如下

.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}

点评或提问float只能左右定位,如果你想要居中的效果,除了用上提到的text-align:center,还可以试试

margin:auto;

点评或提问对margin的这种用法,也算是一种奇技淫巧吧。

点评或提问css的世界总是充满这样或者那样的奇技淫巧。

点评或提问这其中,最最重要的大概要算作 css hack 了。

点评或提问css hack ,就是专门为特定的某种浏览器而写的样式。

点评或提问有人的地方就有江湖,有江湖的地方就有纷争。

点评或提问浏览器无疑是硝烟弥漫的战场。

点评或提问IE6,IE7,IE8,Firefox,Chorme,Safrai,Opera...

点评或提问这其中,日日被人们所诅咒的,是那过时却迟迟不肯退下舞台的IE6。

点评或提问很多在其他浏览器中看起来很美的样式,在IE6下惨不忍睹。

点评或提问这时,不堪忍受的人们往往就会祭起css hack的屠刀,

点评或提问通常来说,只需要对IE做hack就可以了。因为出现样式兼容性问题,80%的情况下,是因为IE的bug。

点评或提问以color为演示

点评或提问标准写法

color:#0f0;

点评或提问仅IE6识别

_color:#0f0;

点评或提问仅IE7识别

#color:#0f0;

点评或提问IE6+IE7识别

*color:#0f0;

点评或提问仅IE6不识别

color/**/:#0f0;

点评或提问奇技淫巧终究不是正途,还是越少用越好。

点评或提问麻油四呕心沥血,终于看完基础教程的css部分。

点评或提问他只觉得两眼发黑,但还是坚持一边看着教程,一边对自己的简历修修改改。

点评或提问终于,万事大吉,给简历加上了样式。 链接

<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="reset.css" type="text/css" />
<style>
.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}
body{background:#222;}
#main{
	padding:1px;
	width:700px;
	margin:15px auto;
	background:#fff;
}
#header{
	background:url(sprites.gif) 0 100%;
	padding:20px 0 30px 30px;
	color:#fff;
	font-size:26px;
    border-bottom:#CC0000 5px solid;
}
#content{
margin-top:1px;
border-top:#C00 1px dotted;
}
.bk1{
margin:10px;
}
.bk1 p{
padding:6px;
line-height:1.6;
}
#footer{
	text-align:right;
	margin:20px 10px;
	font-size:12px;
	color:#666;
}
</style>
</head>
<body>
<div id="main" >
    <p id="header">麻油四</p>
    <div class="clearfix" id="content">
        <p style="text-align:center;margin:20px;float:right;">
            <img src="m4.jpg" />
        </p>
        <div class="bk1">

<p><b>基本资料</b></p> <p>学历: 本科</p> <p>专业: XX工程</p> <p>英语水平: CET4 </p> <p>联系方式: 138xxxxxx </p> </div>
<div class="bk1"> <p><b>自我介绍</b></p> <p>本人勤劳肯干,任劳任怨,...(略去废话5000字)</p> </div> <div class="bk1"> <p><b>实习经历</b></p> <p>2006年暑期在物价局实习,负责计算机维护和文字处理</p>
<p>2007年暑期在毅诚商贸有限公司实习,负责网络维护</p> <p>2009年暑假在宽网吧屋网吧打工,负责网络建设、维护及网络安全</p> </div> <div class="bk1"> <p><b>个人特长</b></p> <p>吃饭,睡觉</p>
</div> </div> <div id="footer" > Copyright 2009 麻油四 </div> </body>

点评或提问当敲完最后一个字母,麻油四终于不堪重负,晕死过去。

点评或提问他做了一个梦,梦见了他开着凯迪拉克,拿着大束美丽的花儿,微笑着走向心爱的MM……

上一节 返回目录 下一节
::...
免责声明:
当前网页内容, 由 大妈 ZoomQuiet 使用工具: ScrapBook :: Firefox Extension 人工从互联网中收集并分享;
内容版权归原作者所有;
本人对内容的有效性/合法性不承担任何强制性责任.
若有不妥, 欢迎评注提醒:

或是邮件反馈可也:
askdama[AT]googlegroups.com


点击注册~> 获得 100$ 体验券: DigitalOcean Referral Badge

订阅 substack 体验古早写作:


关注公众号, 持续获得相关各种嗯哼:
zoomquiet


自怼圈/年度番新

DU22.4
关于 ~ DebugUself with DAMA ;-)
粤ICP备18025058号-1
公安备案号: 44049002000656 ...::