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

让HTML穿上衣服出门

2018-01-05 23:52 134 查看

HTML是什么？

HTML即HyperText Markup Language——超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。开发者利用HTML标签（Tag）来标记（Markup）网页中的文字。
<!DOCTYPE html>
<html>
<head>
<title>blog</title>
</head>
<body>

<h3>HTML是什么？</h3>
<p>HTML即HyperText Markup Language——超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。开发者利用HTML标签（Tag）来标记（Markup）网页中的文字。
</p>

</body>
</html>

CSS是什么？CSS即Cascading Style Sheets——层叠样式表，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。打个比较随心所欲的比方，html是个没穿衣服的人，CSS就是他打扮而穿的衣服。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
background: #0fc
}
h3{
font-style:italic;
color: #fc0
}
p{
color:blue
}
</style>
<title>blog</title>
</head>
<body>

<h3>HTML是什么？</h3><!-- 标题 -->
<p>HTML即HyperText Markup Language——超文本标记语言，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。开发者利用HTML标签（Tag）来标记（Markup）网页中的文字。
</p><!-- 段落内容 -->

</body>
</html>

加上css后，emmm...似乎更丑了，咳咳
当然了，这不是css的问题，给一个人挑一身衣服，让他如明星般璀璨或是如乞丐般蓬头垢面就看设计师的技术了，不是吗？

如何添加CSS：

1.在head元素中用style元素定义内嵌样式：一个好的网页自然有很多元素都有自己的样式，若采用这种方法，加载时会先加载css，虽然避免了裸体出现，但在用户网速受限时，一时半会儿出不了内容那是一件本末倒置的事情。
2.在HTML元素标签内使用style属性指定样式：标签里面写一长串css，啊，想想就好粗暴，代码繁杂。

3.将样式表定义在.css文件，以link元素链接外部.css文件：本着结构，表现，行为相分离的标准，应该是个不错的方法。

4.将样式表定义在.css文件，以CSS的@import指令引用外部.css文件：与方法3类似。

CSS样式优先级：

我们可以在HTML文档中同时利用以上四种方法使同一个用CSS。若对于某一个元素，我们对其style属性设定文字颜色为红色，又正在@import样式中设定为黄色，那到底采用什么颜色呢？
基本优先级为：以style属性定义的样式优先级最高；剩余三种，则以出现的顺序决定，后居而上，覆盖之前的设定。

CSS选择器：

元素选择器：如p，h1...前面的例子所用的 p{color;blue}，其选择器就是p。
类别选择器；在HTML元中可用class="类别名",将其设定为一个特定的类别。在CSS中可用“.类别名”为其设定样式。
类别选择器可与元素选择器组合使用，写法“元素名称.类别名”
识别码选择器：在HTML元素中可用id为其设定一个识别码。在CSS中用“#id名”设置样式。
组合选择器：
A B(中间空一格)：表示在A元素之内的所有后代B（子代，孙代等等）；
A>B:表示A元素的子元素B；
A+B:表示与A元素同层且相临的B元素；
A~B:表示所有与A元素同层的B元素。
虚拟类别：例如hover代表目前鼠标所指元素。参考网站：虚拟类别

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html

相关文章推荐

新的分享

章节导航