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

HTML & CSS 小总结

2013-10-16 10:54 369 查看
1.web主机代理商webhostingcompany,让他们的服务器为你的页面服务
2.选择网站名字例如:www.1234.com
3.寻找把文件从电脑传到主机的途径
4.把新网站告诉朋友

域名：用来定位你的网站的独一无二的名字1234.com

网站名：www.1234.com

http://www.1234.com/index.html(其中后面的/就是服务器根目录,index.html是页面文件)
http://，输入的地址是URL,统一资源定位符,http://是传输协议
目标锚:主要目的是链接到比较长的页面中的特定位置,以便浏览者不用滚动页面来找
<ahref="index.html#chai">SeeChaiTea</a>加目标锚的方法：网页后边加#号定位
这里的chai是html元素的id(这个目标锚可以实现本网页内的快速定位,而非查找其他网页)

w3c校验器,检查你的网页是否符合标准http://validator.w3.org

div用于逻辑划分块
span只一样内某些内容的组合,以便有统一的式样，比如一个表里的某一行
关于元素a
一个链接可以处于多种不同状态,未访问过,已访问过,鼠标停留等等使用伪类
a:link{
color:green;
}
一般认为合理的顺序是:link,visited,focus,hover,active
--css
css中的类可以定义多个元素一起,表示他们在一个类里,具体办法是
p.greentea{}这样,只定义段落中是greentea的类得式样
.greentea这样,就定义所有的类为greentea的元素的式样
一个元素可以在多个类中,<pclass="greentearaspberryblueberry">
http://jigsaw.w3.org/css-validator/css校验器

css属性
color:用来设置文本元素的字体颜色
16进制：最常用,每两位数字代表红色,绿色,蓝色,#cc6600#代表是16进制数,
可以使用在线颜色表查找对应颜色
红,绿,蓝:rgb(80%,40%,0%)或rgb(255,255,0);
颜色名字(名字很少,只有17种)yellow
font-weight:控制文本的粗细(bold,normal)
left:元素如何放置它的左侧
line-height:文本之间的行间距
top:控制元素顶部位置
background-color:背景颜色
border:元素周围边框
margin:想在元素边缘和内容之间有一些空间,边界
font-size:把文本变大变小
定义大小可以用像素:font-size:14px;
定义大小可以用百分数:font-size:150%;(相对于父元素)
定义大小可以用倍数:font-size:1.2em;(表明放大父元素1.2倍)
定义大小可以用关键字:font-size:small;(xx-small,x-small等等,基本上不同级别相差20%)
技巧:选择一个关键字(推荐用small或medium)定义body字体大小,也就是默认网页字体
用em或百分比把别的元素的字体大小指定为参照body字体大小的尺寸
这个技巧的好处是,当需要修改字体时,只需要修改默认字体就可以达到全部都变的作用.
font-style:italic;斜体notitalic

text-align:本文对齐样式
font-family:字体系,例如Verdana等(用于不一样的场合,如报纸印刷等等)
1.sans-seriffamily:可读性好
2.seriffamily:报纸印刷
3.monospacefamily:等宽字体
4.Cursivefamily:比较有趣
5.FantasyFamily:比较有趣
text-decoration:给文本添加更多样式,下划线等(underline,overline,line-through,none)

盒子:由里到外
内容区->补白->边框->边界(有点类似夹心,共3层)
除了大小之外,不能编辑补白和边界的其他方面.

可以指定多个式样表，顺序很重要,一个式样表会覆盖在它之前链接式样表中的式样,最下边的优先权最高

块元素是从头流到尾,每两个元素之间有换行(默认占满屏幕整个宽度)
内联元素在水平方向上一个接一个地流,从左上方到右下方(宽度不够时,就会向下)

当浏览器并排放置两个内联元素,这两个元素之间的空间是两个内联元素边界之和
当浏览器并列放置两个块元素，这两个元素之间(上下)是两个块元素中较大的边界值
float属性让一个元素尽可能靠左或靠右,然后让它后面的元素流到这个元素的周围.
飘移元素会放在正常元素之上,就感觉它飘起来一样,因为飘移元素不再是正常流的一部分

====================流动布局=========important==================================
flow:网页正常的布局流,块元素从上到下,会有换行,内联元素从左上到右下,当碰到
float时,理解float的元素为漂移,即飘到整个网页之上,但是float最好是放置在块级别上,
例如<p>,那么这段文件会飘在网页上,它下边的html元素会向上跟它高度对齐,并且会“围绕”
着它，将自己的内容显示出来.
无论飘移元素是左还是右,都不会影响它后边的元素正常的流布局,即后边元素的高度和“围绕”

做布局时,跟编程一样,先从大的逻辑环境着手,比如先分2块地方,2块地方再继续分别跟多
要有逻辑层次

左右分栏问题：
例如：当你需要左右分两边时,由于float是漂浮,比如右边设置的是漂浮,那么你可以把左边部分
的边界设置的比右边漂浮部分的宽度宽一些,这样其实漂浮内容是覆盖在左边内容上,但是由于左边
边界很宽,所以看起来像是分了左右部分,例如漂浮部分宽度是280,左边部分边界就可以设置为330
左边或右边,只能固定一遍宽度,一般固定漂浮宽度,然后让别人“围绕”，如果两边都设置宽度,当浏览器宽度
变更时,就会出现两边谁也不管谁,出现重叠或大缺口现象

clear属性,不准许漂浮元素出现在它的左,右.例如clear:right;在页脚中使用可以防止页脚上移
因为页脚元素不准许漂浮出现在它的左右.

=================凝胶布局==========important====================================
介于冻结布局和流动布局之间
内容区的宽度是固定的，单边界随着浏览器窗口扩大或缩小
凝胶物布局锁定了页面中内容区得宽度，单把它放到浏览器中央.
把元素的左右边界设置为aoto,margin-left:auto;margin-right:auto

=================绝对布局==========important====================================
绝对布局来分栏
position:absolute;(static,absolute,fixed,relative)
top:100px;
right:200px;
width:280px;
绝对布局也在流布局以外
流元素中的内容根本不知道绝对布局的存在

设置表格边框的间距
border-spacing:10px30px;
border-collapse:collapse;//压缩表格边框为一个边框
可以将表格中的单元格扩展为多行多列
<tdrowspan="2"colspan="2">//扩展为2行,2列
table可以嵌入<td>标签中嵌入<table>

tabletableth{//嵌套表格的式样
background-color:white;
}
<ul>
<li>
</ul>

li{
list-style-type:disc;
list-style-image:url(images/backpack.gif);
}

xhtml头文件
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD/XHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"
content="text/html;charset=ISO-8895-1"/>

表单内的提交元素只要掌握3个就够了
<input>//radio这个选项的name属性是一样的,比如你有一系列值为“red”"green""blue"而名字为"color"的单选按钮
这些按钮名都是color,不过某一时间只能选择一个按钮,所以这一组的安牛逼命名为一个名字才有意义.
<select>
<textarea>
表单通信方式
post:把表单变量打包后隐藏在后台发送给服务器
get:把表单变量打包后,不过在它想浏览器发送请求之前,附加在URL末端,例如baidu
什么时候需要使用GET方式呢？当你的WEB应用程序返回一个搜索结果列表时，你可能希望用户能够标记返回的结果，
这样用户不用再填满表单就能看到结果了.
get是用来从服务器上获得数据,而post是用来向服务器上传递数据
get传输数据量下,主要受URL长度限制
get以URL字串本身传递数据参数,在服务器端可以从"QUERY_STRING"这个变量中直接读取,效率高,但缺乏安全性,
也无法用来处理复杂数据
Post传输方式会打包在数据报中传输,从CONTENT_LENGTH这个环境变量中读取,便于传送较大一些数据,安全性高,不会暴露数据在浏览器地址中,
效率相对会受到影响

表单中,name属性十分重要,当单击提交按钮时,浏览器提取所有的名字连同它们的值一起
发送到服务器。

表单使用表格布局比较方便

另外filedset和legend也可用于表单中,组别内容时
label也可以用于表单中,这样只要点到这个字,radio就会跟着变

文件传输
<inputtype="file"name="doc"/>

为了提高网页排序并告知搜索引擎网页相关内容,需要<head>添加两个<meta>标签，一个列举关键字,另一个提供内容描述
<metaname=“description”content="Thiswouldbeyourdescriptionofwhatisonyourpage">
<metaname="keywords"content="keyword1,keyword2"/>

例子

-HTML

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"

[code]"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="en"xml:lang="en">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=ISO-8859-1"/>

<title>HeadFirstLounge</title>

<linktype="text/css"href="CoffeeRomm.css"rel="stylesheet"/>

</head>

<body>

<h2>WeeklyElixirSpecials</h2>

<pid="amazing">

<imgsrc="images/1.jpg"alt="Coffeepic"/>

</p>

<p>

<imgsrc="images/3.jpg"/alt="Coffeelogo"/>

</p>

<h3>LemonCoffee</h3>

<pclass="guarantee">

Theultimatehealthydrink,thiselixircombines

herbalbotanicals,minerals,andvitaminswith

atwistoflemonintoasmoothcitruswonder

thatwillkeepyourimmunesystemgoingall

dayandallnight.

</p>



<divid="cats">

<h3>ChaiChiller</h3>

<p>

Notyourtraditionalchai,thiselixirmixesmaté

Withchaispicesandaddsanextrachocolatekickfor

acaffeinatedtastesensationonice.

haha<br/>

</p>

</div>

<p>


<imgid="floatt"src="images/2.jpg"alt="Coffeepic"/>

fdafodalfdkasfdlasfjdklasfjkldasjlkfdajklsfjdklasjfkdajkflkjdajkfldjaklfdjffffffff

fdjlakfdjaklfdjasklfdasjklfffffffffffffffffffffffffffffffffffffffffffffffffffff

ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff


</p>

<h3>BlackBrainBrew</h3>

<pid="cle">

Wanttoboostyourmemory?TryourBlackBrainBrew

elixir,madewithblackoolongteaandjustatouch

ofespresso.Yourbrainwillthankyoufortheboost.

</p>

<p>

Joinusanyeveningfortheseandallour

otherwonderful

<ahref="aaa/aaa.html"title="HeadFirstLoungeElixirs">elixirs</a>

</p>

p>

Wanttoboostyourmemory?TryourBlackBrainBrew

elixir,madewithblackoolongteaandjustatouch

ofespresso.Yourbrainwillthankyoufortheboost.

</p>

<p>

Joinusanyeveningfortheseandallour

otherwonderful

<ahref="aaa/aaa.html"title="HeadFirstLoungeElixirs">elixirs</a>

</p>

<formaction="http://www.nihao.com"method="POST">

<p>Justtypeinyourname(andclickSubmit)to

enterthecontest:<br/>

Firstname:<inputtype="text"name="firstname"value=""/><br/>

Lastname:<inputtype="text"name="lastname"value=""/><br/>

Sex:<inputtype="radio"name="sex"value=""/><br/>

<inputtype="submit"value="OK"/>

<textareaname="comments"rows="10"cols="48"></textarea>

<selectname="characters"multiple="multiple">

<optionvalue="Buckaroo">BuckarooBanzai</option>

<optionvalue="Tommy">PerfectTommy</option>

</select>

</p>

<p>Extras:<br/>

<inputtype="checkbox"name="extras[]"value="gifwarp"/>Giftwarp<br/>

<inputtype="checkbox"name="extras[]"value="catalog"checked="checked"/>Include

<inputtype="file"name="doc"/>

</p>

</form>


</body>


</html>

[/code]

-CSS

body{
font-size:		small;
font-family:	Verdana,Helvetica,Arial,sans-serif;
line-height:	1.6em;		/*相当于字体大小的1.6倍*/

}

h1,h2{
color:#007e7e;
}

h1{
font-size:150%;
}

h2{
font-size:130%;
}

/*class*/
.guarantee{
border-color:	black;
border-width:	1px;				/*thin,medium,thick*/
border-style:	solid;				/*dotted,double,dashed,groove,inset,outset,solid,ridge*/
border-top-color:black;			/*定义边框的一侧*/
border-top-style:dashed;
border-top-width:thick;
background-color:	#a7cece;		/*red,rgb(255,255,0),#ff0000*/
padding:	25px;					/*增加补白,左下右上*/
padding-left:	80px;				/*左侧补白*/
margin:		30px;					/*增加边界*/
margin-right:	250px;				/*增加右侧边界*/
/*插入背景图片,用html的<img>也可以,background-image只能用于给元素设置背景图片*/
background-image:	url(images/background.gif);
background-repeat:	no-repeat;		/*repeat-x,repeat-y,inherit,repeat*/
background-position:	topleft;

}

/*id*/
#footer{
color:	red;
}

p#footer{
color:red;
}

#cats{
background-image:	url(images/bg1.jpg);
border-width:	thin;
border-style:	solid;
border-color:	#007e7e;
width:	200px;
padding-right:	20px;
padding-bottom:	20px;
padding-left:	20px;
margin-left:	20px;
text-align:		center;
background-repeat:	repeat-x;
line-height:	1.5em;
}

divh3{
font-size:180%;

}

#footerh3{

}

a:link{
color:	green;
}
a:visited{
color:	red;
}

a:hover{
color:	yellow;
}

#amazing{
width:	360px;
border:2px;
border-style:	solid;
border-color:	green;
float:	right;
}
#floatt{
width:	300px;
float:	right;
}

#cle{
clear:	right;
}


-PICTURE












                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航