首頁 web前端 html教學 css之html选择器-shinepans_html/css_WEB-ITnose

css之html选择器-shinepans_html/css_WEB-ITnose

Jun 24, 2016 am 11:52 AM



css1.css:

.s1{   /*类选择器*/	color:pink;	font-size:30px; /*font-weight 粗体等 font-style  normal italic:斜体 oblique倾斜的字体*/	text-decoration:line-through;}.s2{	color:red;	font-size:25px;	font-style:italic;	text-decoration:underline;}.s3{	color:blue;	font-size:20px;	font-weight:bold;	text-decoration:blink;}.s4{	color:yellow;	font-size:15px;	font-style:oblique;	text-decoration:overline;}.s5{	color:orange;	font-size:10px;}/*text-decoration:none,underline 下划线 blink闪烁 overline line-through*/img{	filter:gray;}/*hover 鼠标悬停时的样式*/#id1{	background-color:silver;	font-size:50px;	font-color:black;}#id2{	background-color:pink;	font-size:30px;}#id2:hover{	background-color:yellow;	font-size:50px;}#id3{	background-color:yellow;	font-size:30px;} #id3:hover{	background-color:green;	font-size:50px;}#id4{	background-color:orange;	font-size:30px;}#id4:hover{	background-color:blue;	font-size:50px;}#id5{	background-color:blue;	font-size:30px;}#id5:hover{	background-color:yellow;	font-size:50px;}#id6{	background-color:silver;	font-size:30px;}#id6:hover{	background-color:blue;	font-size:50px;}a:link{	color:black;	background-color:pink;	text-decoration:none;	font-size:24px;}a:hover{	text-decoration:underline;	background-color:yellow;	font-size:40px;	color:green;}
登入後複製

html:



<meta http-equiv="content-type" content="text/html;charset=UTF-8"><link rel="stylesheet" type="text/css" href="css1.css"><center>			<span id="id1">css选择器之HTML选择器</span>		<br>		<br>		<br>		<span id="id2">这是第二个ID</span><br><br>		<span id="id3">这是第三个ID</span><br><br>		<span id="id4">这是第四个ID</span><br><br>		<span id="id5">这是第五个ID</span><br><br>		<span id="id6">这是第六个ID</span><br><br>	    <br>		<br>		<a href="http://sohu.com">打开搜狐</a>		<a href="http://baidu.com">打开百度</a>		<a href="http://qq.com">打开腾讯</a>		<a href="http://360.com">打开360</a>		<a href="http://hao123.com">打开hao123</a>		<a href="http://youku.com">打开优酷</a>		<a href="http://sina.com">打开新浪</a>		<a href="http://yahu.com">打开雅虎</a>		<a href="http://bing.com">打开bing</a>		<a href="http://microsoft.com">打开微软</a>		<a href="http://jw1.hustwenhua.net">打开教务</a>		<a href="http://csdn.net">打开CSDN</a>	</center>
登入後複製



总结:要善于使用css,使网页更美观

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? 公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗? Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

如何使用HTML5表單驗證屬性來驗證用戶輸入?

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? &lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

&lt; iframe&gt;的目的是什麼。 標籤?使用時的安全考慮是什麼?

如何高效地在網頁中為PNG圖片添加描邊效果? 如何高效地在網頁中為PNG圖片添加描邊效果? Mar 04, 2025 pm 02:39 PM

如何高效地在網頁中為PNG圖片添加描邊效果?

&lt; meter&gt;的目的是什麼。 元素? &lt; meter&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

&lt; meter&gt;的目的是什麼。 元素?

&lt; datalist&gt;的目的是什麼。 元素? &lt; datalist&gt;的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

&lt; datalist&gt;的目的是什麼。 元素?

&gt; gt;的目的是什麼 元素? &gt; gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

&gt; gt;的目的是什麼 元素?

視口元標籤是什麼?為什麼對響應式設計很重要? 視口元標籤是什麼?為什麼對響應式設計很重要? Mar 20, 2025 pm 05:56 PM

視口元標籤是什麼?為什麼對響應式設計很重要?

See all articles