Home >Web Front-end >HTML Tutorial >css html selector-shinepans_html/css_WEB-ITnose
css html selector-shinepans_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:391270browse
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 :
<html><meta http-equiv="content-type" content="text/html;charset=UTF-8"/><link rel="stylesheet" type="text/css" href="css1.css"/><center> <body> <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> </body></center></html>
Summary: Be good at using css to make web pages more beautiful
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jquery fixed columns. How to use % The navigation bar is displayed according to the size of the browser, and datagrid_html/css_WEB-ITnose is not required for viewing pictures.Next article：jquery fixed columns. How to use % The navigation bar is displayed according to the size of the browser, and datagrid_html/css_WEB-ITnose is not required for viewing pictures.