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

第一次测试HTML和CSS

2015-08-22 21:09 609 查看
1、HTML（HyperTextMarkupLanguange）超文本标记语言。HTML文件扩展名通常是：htm和html。
<html>

<head>
<title>这是一个标题</title>
</head>

<body>
这是网页显示的内容
<h1>这是网页显示的内容</h1>
<h1><fontcolor="red">这是网页显示的内容</font></h1>
<ahref="http://www.baidu.com">这是一个链接</a>

<tableborder=1align="center"width="80%">
<tr>
<td>aa</td>
<td>bb</td>
</tr>
<tr>
<th>cc</th>
<th>dd</th>
</tr>
</table>

</body>

</html>
2、关于表单的HTML标签的介绍
Text
Textarea
Radio
Checkbox
Select
File
Hidden
Submit
Reset
Button
image
1<html>2<head>3<title>网页标题</title>4</head>5<body>6<form>78username:<inputtype="text"value="helloworld"><br>9password:<inputtype="password"><br>10兴趣：学习<inputtype="checkbox">11旅游<inputtype="checkbox">12睡觉<inputtype="checkbox"><br>13性别：男<inputtype="radio"name="gender">14女<inputtype="radio"name="gender"><br>15学历：<select>16<option>小学</option>17<option>初中</option>18<option>高中</option>19<option>大学</option>20</select><br>2122评论：<textarea>23</textarea><br>2425图片：<imgsrc="http://www.baidu.com/img/bdlogo.gif"><br>26文件上传：<inputtype="file"><br>2728<inputtype="submit"value="submit">   29<inputtype="reset"value="reset">   30<inputtype="button"value="button"onclick="javascript:alert('helloworld');">3132</form>33</body>34</html>
注：上面的代码。<br>代表换行， 代表空格。h1到h6代表六级标题。
3、浏览器内核：Webkit（较快），trident（IE用）
4、CSS是什么
CSSstandsforCascadingStyleSheets
–CSS意思就是层叠样式表
•StylesdefinehowtodisplayHTMLelements
–样式定义了HTML元素如何去显示
•StylesarenormallystoredinStyleSheets
–样式一般存储在样式表中
•StyleswereaddedtoHTML4.0tosolveaproblem
–样式加入到HTML4.0中用来解决这个问题
•ExternalStyleSheetscansaveyoualotofwork
–利用外部样式表能够提高你的工作效率
•ExternalStyleSheetsarestoredinCSSfiles
–外部样式表存储在CSS文件里
•WithCSS,yourHTMLdocumentscanbedisplayedusingdifferentoutputstyles
–使用CSS。你的HTML文档能够用不同的样式输出来显示
5、样式的优先级
一般说来全部样式有以下的规则(第四个最有优先性)
1.Browserdefault
浏览器默认
2.Externalstylesheet
外部样式表
3.Internalstylesheet(insidethe<head>tag)
内嵌样式表(在<head>标签内)
4.Inlinestyle(insideanHTMLelement)
行内样式(在一HTML元素内)
6、CSS语法
TheCSSsyntaxismadeupofthreeparts:aselector,apropertyandavalue:
CSS的语法由三部分组成:一个选择器。一个属性和一个值，比如：
selector{property:value}
选择器是你希望去定义的HTML元素/标签，每一个属性能够有一个值，属性和值由冒号隔开。外面用大括号括起来。
如：body{color:black}
a）
假设值为多个单词则用双引號括起来
p{font-family:"sansserif"}
b）
假设你想指定多个属性，你就必须将每一个属性用分号隔开，以下的样例就演示了如何定义居中红色文字段落
p{text-align:center;color:red}
c）
为了让样式定义更有可读性。你能够像这样分行描写叙述属性
p{
text-align:center;
color:black;
font-family:arial
}
d）
你能够将选择器组合。用逗号分隔每一个选择器。下的样例将全部的标题元素组合起来，它们的颜色都变为绿色
h1,h2,h3,h4,h5,h6{color:green}
e）
用选择器类你能够将同一类型的HTML元素定义出不同的样式。比方你想在你的文档中有两种不相同式的段落：一种是右对齐，另外是居中的。这就告诉你该怎么用样式来做到这点
p.right{text-align:right}
p.center{text-align:center}
你必须在你的HTML文档中使用类属性（才能显示出效果）
<pclass="right">Thisparagraphwillberight-aligned.</p>
<pclass="center">Thisparagraphwillbecenter-aligned.</p>
注意：每一个HTML元素仅仅能有一个类属性，以下的样例是不符合规范的
<pclass="right"class="center">
Thisisaparagraph.
</p>
f）
你也能够省略标签名称直接去定义，这样就能够在全部的HTML元素中使用了。以下的样例就能让全部HTML中全部带class="center"的元素居中文字：
.center{text-align:center}
g）
以下的代码中H1和P元素都有class="center"。这就意味着这两个元素都将遵循选择器"center"的规则
<h1class="center">Thisheadingwillbecenter-aligned</h1>
<pclass="center">Thisparagraphwillalsobecenter-aligned.</p>
请不要用以数字开头为名称的类，在Mozilla/Firefox中不能正常运作。
h）
使用id选择器你能够为不同的HTML元素定义同样的样式以下的样式规则对不论什么一个带有id属性值为"green"的元素都是匹配的
#green{color:green}
上面的规则将匹配h1和p元素
<h1id="green">Sometext</h1>
<pid="green">Sometext</p>
以下的样式规则将匹配不论什么一个带有id属性值为"green"的p元素
p#green{color:green}
上面的规则与h1元素不匹配（也就是说不会产生样式效果）
<h1id="green">Sometext</h1>
和class一样,id的名称的开头也不要使用数字,不然就无法在Mozilla/Firefox中正常运作了。
j）
你能够在CSS中增加解释代码用的凝视，这样可以方便你以后又一次编辑代码。浏览器会忽略凝视。凝视一般以"/*"开头"*/"做结尾。像这样：
/*Thisisacomment*/
p{
text-align:center;
/*Thisisanothercomment*/
color:black;
font-family:arial
}
7、如何插入样式表
有三种方法能够插入样式表。
•外部样式表（ExternalStyleSheet）
•内嵌样式表（InternalStyleSheet）
•行内样式（InlineStyles）
a）外部样式表
使用外部样式表是使样式应用于多张网页的理想方法。通过这种方法你仅仅需修改一个文件就能改变整个站点的外观。使用<link>标签让每一个页面都连接到样式表。<link>标签在head区域使用
<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css"/>
</head>
浏览器将从mystyle.css文件里读取样式定义信息。并根据它来格式化文档外部样式表能够用不论什么一个文字编辑器来书写。文件不应该包括不论什么的html标签。
并保存为一个后缀为.css的文件。以下是一个样式表文件的内容
hr{color:sienna}
p{margin-left:20px}
body{background-image:
url("images/back40.gif")}
注意：请不要在属性值和其单位间加上空格！假设你用"margin-left:20px“来代替"margin-left:20px"的话，这或许在IE6中能正常工作,但在Mozilla/Firefox或Netscape中就无法正常显示了
b）内嵌样式表
一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式，像这样
<head>
<styletype="text/css">
hr{color:red}
p{margin-left:20px}
body{background-image:url("images/back40.gif")}
</style>
</head>
•浏览器将马上读取样式定义，并根据它来格式化文档。注意：浏览器通常会忽略未知的标签。这就意味着老的浏览器不能支持样式，会忽略<style>标签。但<style>里的内容会显示在页面上。在HTML凝视元素中隐藏它能够来避免这类情况在老的浏览器中发生
<head>
<styletype="text/css">
<!--hr{color:sienna}
p{margin-left:20px}
body{background-image:
url("images/back40.gif")}-->
</style>
</head>
c）行内样式
使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素须要改变样式的时候使用。
在相关的标签上用style属性来增加行内样式。样式属性能够包括不论什么CSS属性。例子中将展示如何给一个段落加上左间距并将颜色改为red
<pstyle="color:red;margin-left:20px">Thisisaparagraph</p>
8、超链接的样式
例：
a:link{color:green}/*没有动作时是绿色的*/
a:visited{color:yellow}/*訪问过之后是黄色的*/
a:hover{color:black}/*鼠标放上去是黑色的*/
a:active{color:orange}/*鼠标点下去了但没有松开是橘黄色的*/
----参考《圣思园Java视频》
                                            

                                        

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

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航