Heim > Web-Frontend > HTML-Tutorial > DIV+CSS学习小结_html/css_WEB-ITnose

DIV+CSS学习小结_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:44:21
Original
1162 Leute haben es durchsucht

DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统的通过表格布局定位的方式不同,它可以实现网页页面与表现想分离。

因为在牛腩还有JS都有大量的接触到CSS,到现在再学习DIV+CSS的时候,就不再感觉陌生了,都是共鸣~~

无论怎么设置CSS样式,都少不了选择器样式表

样式表

样式表最主要的有三种。分别为嵌入式样式表,外部样式表和内联样式表。

嵌入式样式表

         在html的

标签之间添加样式表。

示例:

	<title>示例</title>	<style type="”text/css”">		#color{			font-color:red;}</style>
Nach dem Login kopieren

内联样式表

         直接在html标签中插入样式

示例:

<h1 style="“color:red”">示例<h1></h1>
</h1>
Nach dem Login kopieren

外部样式表

         建立一个新的CSS文件,通过link语句插入到HTML代码中。

示例:

<link type="”text/css”" rel="”stylesheet”" href="%E2%80%9Dcss/%E7%A4%BA%E4%BE%8B.css%E2%80%9D/">
Nach dem Login kopieren

选择器

选择器最常用的也是三种,分别是ID选择器,类选择器和标签选择器。

ID选择器

         在HTML中,可以给元素添加ID,来确定这个元素的位置,同时,这个ID必须是唯一的,不可重复的。可以通过ID来给标签设置样式

示例:

         给p标签设置一个叫做color的id。

<p id="”color”">示例 </p>
Nach dem Login kopieren

通过css的id选择器来给

标签中的内容改变颜色。

#color{	font-color:red;}
Nach dem Login kopieren

类选择器

         在HTML中,可以给标签添加class属性,通过class来给标签设置属性。

示例:

         给p标签设置一个叫做color的class。

<p class="”color”">示例 </p>
Nach dem Login kopieren

通过css的类选择器来给

标签中的内容改变颜色。

.color{	font-color:red;}
Nach dem Login kopieren

标签选择器

         根据HTML标签来给标签中的内容改变样式。

示例:

         改变

标签的文字的颜色

	<p>示例</p>
Nach dem Login kopieren

通过标签选择器改变

标签中文字的颜色

P{	color:red;}
Nach dem Login kopieren

总结

选择器和样式表是CSS中最基本的内容。掌握了这些,在学习其他东西的时候回更加的得心应手。

在视频学习的时候,还学习到了CSS与JavaScript、CSS与XML和CSS与Ajax的综合运用,但掌握的不是很好,还需要多多练习,来进一步加深理解。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage