HTML,CSS里面关于 id,class,name 属性的区别和用法

html-css015

HTML,CSS里面关于 id,class,name 属性的区别和用法,第1张

1、id: id是设置标签的标识。用于定义一个元素的独特的样式。在CSS样式定义的时候 以“#”来开头命名id名称。

用法:若一个标签的id="myid",那么使用它的时候通过”$("#myid")“来获取当前标签或使用“#myid{}”来定义CSS样式。

2、class:根据用户定义的标准对一个或多个元素进行标记和定义,一个标签可以有多个class,例如class="myclass1 myclass2",当前标签就有两个class,分别为myclass1和myclass2。

用法:若一个标签有一个class="myclass",那么获取这个标签可以使用$(".myclass"),同时使用”.myclass{}“来定义CSS样式。

3、name:从名字可以知道这是用于定义一个标签的名字的属性,name可用于数据获取,常用于表单数据的获取。

用法:若一个输入框的name="myname" ,常用request.getparameter("myname")来获取当前输入框的值。

有3种方式可以将css定义的样式加到HTML里。

1.外联

在HTML里加一个超连结连到外在的CSS文档,这个方法最方便管理整个网站的网页风貌。它让网页的文字内容与版面设计分开,只需要在一个CSS文档内定义好网页的外观风格,所有参考连结到此 CSS 档的网页,便会依照指示,反应出定义好的风格。

它的写法是: <HTML>

<HEAD>

<TITLE></TITLE>

<LINK REL="stylesheet" HREF="http://www.xyz.com/xyz.css" TYPE="text/css">

</HEAD>

2. 嵌入

在 HTML的<HEAD></HEAD>标签间,加一段CSS定义

这个方法适用于指定某个网页,除了展现外在的 CSS 档定义好的网页风格外,同时还要展现本身HTML内定义的CSS样式。

如果内在定义的CSS定义与外在连结的CSS定义相冲突的话,网页的样式将以内在定义的CSS定义为主。

它的写法是: <HTML>

<HEAD>

<TITLE></TITLE>

<STYLE TYPE="text/css">

div{

font: 12pt

font: 16pt

font-weight: bold

color: green

}

</STYLE>

</HEAD>

<BODY>

<div>内容</div>

</BODY>

</HTML>

3.内联

在HTML的字里行间中加入CSS定义。

这个方法适用于指定网页内的某一小段的样式。

如果内联CSS定义与<HEAD>内在定义的CSS或外在连结的CSS定义相冲突的话最终的样式将以内联的CSS定义为主。

它的写法是: <HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY>

<P STYLE="color: red">内容 </P>

</BODY>

</HTML>

上面的3种CSS引入方式可以同时并用,也可以单一或成双地使用。如果各CSS间的定义相冲突,则嵌入定义的CSS会盖过外联连结的CSS,内联的CSS会盖过嵌入定义的CSS。