CSS学习笔记

最新推荐文章于 2024-07-19 14:58:51 发布

fellowlei

最新推荐文章于 2024-07-19 14:58:51 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

分类专栏： java学习笔记文章标签： CSS HTML Google

本文链接：https://blog.youkuaiyun.com/fellowlei/article/details/83923726

java学习笔记专栏收录该内容

10 篇文章

订阅专栏

CSS学习笔记

CSSDemo

CSS Demo1
CSS Demo2
Css Demo3

CSS Demo1

HTML

<html>
	<head>
		<title>这是网页的标题</title>
		<link rel="stylesheet" type="text/css" href="css.css">
		<style type="text/css">
		.center{text-align:center; color:red}
		</style>
	</head>

	<body>
		<h1 class="center">这是网页现实的内容</h1>

		<p class="center">hello world</p>
		<p class="center">right demo</p>
		<p class="center">center demo</p>
		<a href="http://www.baidu.com">这是一个连接</a>

	</body>

<html>

CSS

p {text-align:center;color:red}
h1,h2,h3,h4,h5,h6 {color:blue}
p.right{text-align:right}
p.center{text-align:center}
.center{text-align: center;color:blue}
#green{color:green}

CSS Demo2

HTML

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="lab1.css">
	</head>
	
	<body>
	
		<h1>hello world</h1>
		<h2>welcome to mark</h2>

		<p>zhangsan lisi wangwu</p>
	</body>
</html

CSS

body{background-color:red}
h1{font-size: 36pt}
h2{color: blue}
p{margin-left: 50px}

CSS Demo3

HTML

<html>

	<head>
		<link rel="stylesheet" type="text/css" href="lab2.css">
	</head>

	<body>
		<h1>hello world</h1>
		<hr>
		<p>welcome to mark</p>

		<p><a href="http://www.google.com.hk">This is a link</a></p>
	</body>

</html>

CSS

body {background-color: orange}
h1 {color:green; font-size: 20pt}
hr {color:red}
p {font-size: 11pt; margin-left: 15px}
a:link {color: green}
a:visited {color: yellow}
a:hover {color: black}
a:active {color: blue}