您的位置：首页 > Web前端 > CSS

css入门之html选择器，ID选择器，类选择器，属性选择器

2014-01-24 14:54 645 查看

Css 基本语法：选择器：{属性1：值1；属性2：值2.......}

例：h1{color:red;fond-size:14px}

对于属性有4钟：HTML选择器，ID选择器，类选择器，属性选择器

1.对于HTML选择器，用法：p{color:red},对于p，如果我们是行标记的话，就用tr，如果是表格标记的话就用table标记，等等

<html>
<head>
<title>html选择器</title>
<style type = "text/css">
p{color:red;font-weight:bold}
</style>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>

2,对于ID选择器，用法：#test{color:red}, 这里的test，我们可以自己定义，注意是用#.

在HTML文档中只能出现一次。同时对大小写敏感，推荐适用小写。

<html>
<head>
<title>ID选择器</title>
<style type = "text/css">
#test{color:blue;font-weight:bold}
</style>
</head>
<body>
<p id="test">这是一个段落。</p>
</body>
</html>

3,对于类选择器，.用法：test{color:red},这里的test同ID选择器我们可以行定义，但不同的是前面用的是点.

在HTML文档中可以出现多次。同时对大小写敏感，推荐适用小写。

<html>
<head>
<title>类选择器</title>
<style>
.test{color:red;font-weight:bold}
</style>
</head>
<body>
<p class="test">这是一个段落</p>
</body>
</html>

4.对于属性选择器是带有指定属性的HTML元素设置样式

用法：

[align=center]{color:blue}

//包含指定值，试用于由空格分隔的属性值

[name~="t1"]{color:red}

//包含指定值，适用由连字符分隔的属性值

[name|="t"]{color:red}

<html>
<head>
<title>属性选择器</title>
<style type="text/css">
[align = "center"]{color:blue}
[name~="t1"]{color:red}
[name|="t"]{color:green}
</style>
</head>
<body>
<p align = "center">这是一个段落</p>
<p align = "center" name = "t t1">这是一个段落</p>
<p align = "center" name = "t-t1">这是一个段落</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航