Head First HTML与CSS笔记

最新推荐文章于 2020-03-19 20:24:40 发布

moluchase

最新推荐文章于 2020-03-19 20:24:40 发布

阅读量884

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS

本文链接：https://blog.youkuaiyun.com/molu_chase/article/details/52798817

HTML 同时被 2 个专栏收录

9 篇文章

订阅专栏

CSS

7 篇文章

订阅专栏

1.首先推荐一款很好的html编辑软件-------Sublime Text 2

http://blog.youkuaiyun.com/molu_chase/article/details/52814037

2.使用id链接到元素

例如在一个页面中指定某个元素的id=“chai”，然后使用a标签，如<a href="index.html#chai">See Chai Tea</a>

3.把元素增加到greentea类

<style type="text/css">
	p.greentea{
		color: green;
	}
</style>
<body>
<p class="greentea">
	chock full of citamins.
</p>

如上要对<blockquote>做同样的处理，如下

p.greentea,blockquote.greentea{
		color: green;
	}

当然上面的有更简的写法，在每个使用的标签中声明就可以了

.greentea{
		color: green;
	}

多个样式下的标签，如果每个样式都有指定该属性，则按照多个样式中最后一个样式的属性来指定

4.字体

font-family: Verdana,Arial,sans-serif,

上面指定了三种字体，是为用户准备的，如果用户计算机上面有第一种字体，就用第一种，否则，用第二种，依次类推。

5.css中的子孙

        /*对div中的h2进行设置*/
	div h2{
		color: black;
	}
	/*id为elixirs的标签中的h2设置*/
	#elixirs h2{
		color: black;
	}

6.span标签

下面看一个例子

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	
	.cd{
		font-style: italic;
	}
	.artist{
		font-weight: bold;
	}
</style>
<body>
<h1>span标签的效果</h1>
<li><span class="cd">Buddha Bar</span>,<span class="artist">Claude Challe</span></li>
<li>When It Falls,Zero 7</li>
</body>
</html>

结果

7.a标签的多重人格

        /*链接未访问的状态*/
	a:link{
		color: green;
	}
	/*链接已访问的状态*/
	a:visited{
		color: red;
	}
	/*鼠标悬停在链接上的状态*/
	a:hover{
		color: yellow;
	}

或者将其用在某一个id上，对于选中该id的标签中含有a的标签有效，如下：

        #elixirs a:link{
		color: green;
	}
	/*链接已访问的状态*/
	#elixirs a:visited{
		color: red;
	}
	/*鼠标悬停在链接上的状态*/
	#elixirs a:hover{
		color: yellow;
	}