黑马程序员_样式选择器的种类及用法

最新推荐文章于 2024-10-09 13:50:32 发布

原创最新推荐文章于 2024-10-09 13:50:32 发布 · 862 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #c# #html #class #标签

ASP.NET 专栏收录该内容

17 篇文章

订阅专栏

样式选择器的种类及用法

1、标签选择器

标签选择器：对于指定的标签采取统一的样式。样式写在<head>中。样式代码：

<head>

<title>样式选择器</title>

<!........标签选择器.........>

/*定义两个标签*/

input{ background-color:Aqua; color:White;}

p{ color:Blue; font-size:xx-large; font-family:华文彩云;}

</style>

</head>

样式效果：

2、Class选择器

Class选择器：以定义一个命名的样式，然后在用到它的时候设定多个class；名称之间要以空格隔开；样式名称开头要加“.”。样式写在<head>中。

样式代码：

<head>

<title>样式选择器</title>

<!........id选择器.........>

/*定义两个class标签*/

.class1{ color:Blue;background-color:Red; }

.class2{ font-size:large; font-family:华文彩云;}

</style>

</head>

使用样式：

<h3>........class选择器效果.........</h3>

<br />

<br />

<br />

</body>

样式效果：

3、id选择器

id选择器：为指定的元素设定样式；样式之前加“#”。样式写在<head>中。

样式代码：

<head>

<title>样式选择器</title>

<!........id选择器.........>

/*定义一个id标签*/

#username{ color:Blue; font-size:large; font-family:华文彩云;background-color:Red; }

</style>

</head>

使用样式：

<h3>........使用id选择器.........</h3>

样式效果：

4、关联选择器

关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串。样式写在<head>中。

样式代码：

<head>

<title>样式选择器</title>

<!........关联选择器.........>

/*定义一个关联选择器标签*/

p strong{ color:Blue;background-color:Red;font-size:large; font-family:华文彩云; }

</style>

</head>

使用样式：

<h3>........关联选择器效果.........</h3>

<br />

<strong>不见去年人，泪湿春衫袖。 </strong>

<br />

<p><strong>却把泪来作水，流也流到伊边。 </strong></p>

</body>

样式效果：

5、组合选择器

组合选择器：同时为多个标签设定一个样式。样式写在<head>中。

样式代码：

<head>

<title>样式选择器</title>

<!........关联选择器.........>

/*定义一个组合选择器标签*/

h1,h2,input{ color:Blue;background-color:Red;font-size:large; font-family:华文彩云; }

</style>

</head>

使用样式：

<h3>........组合选择器效果.........</h3>

<br />

<h1>孤臣泪已尽，虚作断肠声。 </h1>

<br />

<h2>故国三千里，深宫二十年。</h2>

<br />

样式效果：

6、伪类选择器

伪类选择器:为标签的不同状态设定不同的标签。一般用于超链接中。它的样式需要写在单独的css文件中。

样式代码：

a:link {color: #FF0000; TEXT-DECORATION:ouerline}/* 未访问的链接 */

a:visited {color: #00FF00;TEXT-DECORATION:none}/* 已访问的链接 */

a:hover {color: #FF00FF;TEXT-DECORATION:blink}/* 鼠标移动到链接上 */

a:active {color: #0000FF;TEXT-DECORATION:underline}/* 选定的链接 */

使用样式：

<head>

<title>样式选择器</title>

</head>

<body>

</body>

样式效果：

总结：样式是可以使网页美观的工具，样式种类有很多，可以单独使用，也可以共同使用。所学有限，不当之处，还望指点。