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

css 基础

2015-12-25 14:11 671 查看

<html>
<head>
<link href="my.css" type="text/css" rel="stylesheet" />
</head>
<div class="style1">
<table>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
</div>
</html>

.style1{
width:300px;
height:200px;
border:1px solid red;
margin:50px 0px 0px 200px;
}

/*父子选择器*/
.style1 table {
border:1px solid black;
width:298px;
height:180px;
}

.style1 table td {
border:1px solid black;
}

以上是记事本下开发的简单 table。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个网页</title>

<style type="text/css">/*内嵌式css*/
.style1 {
font-size: 20px;
color: red;
font-style: normal;
font-weight: bold;
text-decoration: underline;
}
a:link img {
opacity:0.4;/*透明*/
filter:alpha(opacity=40);

-webkit-filter: grayscale(100%);/*灰色*/
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
a:hover img {
opacity:1;/*透明*/
filter:alpha(opacity=100);

-webkit-filter: grayscale(0);/*彩色*/
-moz-filter: grayscale(0);
-ms-filter: grayscale(0);
-o-filter: grayscale(0);
filter: grayscale(0);
filter: gray;
}
</style>

</head>
<body>
<a href="#"><img src="images/test.jpg" width=170px border=3px /></a><br/>/*用超链接实现鼠标悬停改变效果*/
<span class="style1">第一个栏目</span><br/>
<span class="style1">第二个栏目</span><br/>
<span class="style1">第三个栏目</span><br/>
<span class="style1">第四个栏目</span><br/>
</body>
</html>

三种选择器：

A 代表：标签名称为 A 的元素

#A 代表：id 属性值为 A 的元素

.A 代表：class 属性（脚本访问时此属性名为 className）值包括 A（当然，你知道的，多个值用空格分隔）的元素

优先级：#A > .A > A

css里，id选择器可以无限次数使用，并且可以写一样的。

你在网上听别人说不能多次使用，应该是出现2个以上同名的id选择器吧。

例如都是id="div1"

其实这样写，在css里是可以的。但如果页面涉及到js，就不好了。因为js里获取DOM是通过getElementById，而如果页面出现同一个id几次，这样就获取不到了。所以id要有唯一性。

最后，成熟网站里，你很少看到css里用id选择器的，都是用class，id选择器留给写js的人用，这样避免冲突。

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

标签：

相关文章推荐

新的分享

章节导航