码迷,mamicode.com
首页 > Web开发 > 详细

关于HTML与CSS与class

时间:2014-08-24 22:03:53      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   数据   ar   2014   

在web前端开发中接触的一直是html、css、javascript。

在这个过程中,经常使用的是html中的span、div元素以及css的选择器。

为了方便查找在这里将这些内容的基础知识记录下来。

一、HTML <div> 和 <span>

HTML <div> 元素

HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素,可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

 

二、HTML class 属性

定义和用法

class 属性规定元素的类名(classname)。

class 属性大多数时候用于指向样式表中的类(class)。不过,也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。

 

三、HTML id 属性

定义和用法

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

 

html的元素可以通过class和id进行css选择。通过class代码如下

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:blue;}
</style>
</head>

<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">请注意这个重要的段落。:)</p>
</body>

</html>

结果如下bubuko.com,布布扣

通过id改变样式代码如下

<html>
<head>
<style>
#myHeader
{
color:red;
text-align:center;
}
</style>
</head>
<body>

<h1 id="myHeader">W3School is the best!</h1>

</body>
</html>

bubuko.com,布布扣

 

四、HTML 列表 标签

<html>

<body>

<h4>一个无序列表:</h4>
<ul>
  <li>咖啡</li>
  <li></li>
  <li>牛奶</li>
</ul>

</body>
</html>

运行结果bubuko.com,布布扣

关于HTML与CSS与class

标签:style   blog   http   color   java   使用   数据   ar   2014   

原文地址:http://www.cnblogs.com/yukino/p/3933421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!