html5学习4

来源：互联网发布：个人工作室网站源码编辑：程序博客网时间：2024/06/08 01:34

上一次分享了一些网页制作的网站网址，今天继续html5入门书籍中其他的内容。学习就是一个日积月累的过程，希望大家和我一样持之以恒。

CSS语法：
选择符 { 属性名: 属性值; 属性名: 属性值; }

一、CSS 文本字体属性
color 设置文本的颜色。
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-style 规定文本的字体样式。italic: 斜体字。
font-weight 规定字体的粗细。bold: 粗体字。

例
<html>
<head>
<title>CSS</title>
<style>
p {
color: red;
font-size: 36pt;
font-family: 隶书,华文行楷;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<p>HTML5网页设计第三章 CSS样式表基础</p>
</body>
</html>

font 简写属性在一个声明中设置所有字体属性。
可以按顺序设置如下属性：
font-style
font-variant
font-weight
font-size/line-height
font-family
如：font: italic bold 36pt/40pt 黑体

二、CSS 文本段落属性
line-height 设置行高（行间距）。
letter-spacing 设置字符间距。
word-spacing 设置单词间距。
text-indent 规定文本块首行的缩进。
text-align 规定文本的水平对齐方式。
text-decoration 规定添加到文本的装饰效果。
underline：下划线；overline：上划线；line-through：删除线；none：无

例：
<html>
<head>
<title>CSS</title>
<style>
h1 {
text-align: center;
}
p {
color: red;
font-size: 24pt;
letter-spacing: 2px;
line-height: 40pt;
text-indent: 2em;
}
</style>
</head>
<body>
<h1>宜春学院简介</h1>
<p>宜春学院已成为集经济学、法学、教育学、文学、历史学、理学、工学、农学、医学、管理学等十大学科门类为一体的多学科性高等学府，成为江西省学科门类齐全的综合性本科大学。</p>
</body>
</html>

三、文本阴影
text-shadow: 阴影向右偏移量，阴影向下偏移量，阴影模糊值，阴影颜色
<html>
<head>
<title>CSS</title>
<style>
div {
text-align: center;
color: #39f;
font-size: 64pt;
font-family: 隶书;
text-shadow: 5px 5px 5px #666
}
p {
color: red;
text-align: center;
background: #9cc;
font-size: 72pt;
font-family: 楷体_GB2312;
text-shadow: 2px 1px 2px black,-2px -1px #ff9;
}
</style>
</head>
<body>
<div>宜春学院</div>
<p>HTML5网页设计</p>
</body>
</html>

四、背景 background
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。CSS3允许设置多个背景图像。
如：url(image/背景1.jpg),url(image/chrome.png);
background-repeat 设置是否及如何重复背景图像。值如下
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。值如下
fixed 当页面的其余部分滚动时，背景图像不会移动。
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
background-position 设置背景图像的开始位置。
xpos ypos 第一个值是水平位置，第二个值是垂直位置。
background-size 设置背景图片大小
宽度和高度的百分比
宽度和高度的具体值
contain：缩放到最大尺寸，显示整个图片
cover：缩放到最大尺寸，覆盖整个背景

background 简写属性在一个声明中设置所有的背景属性。
如：background: url(image/背景1.jpg) no-repeat fixed center;

例：
<html>
<head>
<title>CSS</title>
<style>
body {
/* background-color: #cff;
background-image: url(image/背景1.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size: 800 600; */
background: #cff url(image/背景1.jpg) no-repeat fixed center;
}
h1 {
text-align: center;
}
p {
font-size: 24pt;
}
</style>
</head>
<body>
<h1>宜春学院</h1>
<p>宜春学院座落于风景秀丽的宜春市城西文教新区，占地面积达1250多亩。新校园依山傍水，风光旖旎；南邻浙赣线，西接320国道；交通便利，地理位置优越，是莘莘学子读书研学的理想之地。学校的前身为创办于1958年的宜春大学。四十多年来，宜春学院人励精图治、奋发图强，使学校的建设和发展不断迈上新台阶。目前，宜春学院已成为集经济学、法学、教育学、文学、历史学、理学、工学、农学、医学、管理学等十大学科门类为一体的多学科性高等学府，成为江西省学科门类齐全的综合性本科大学。</p>
</body>
</html>

个人了解现在CSS制作网页是很重要的，所以学习CSS的时候一定要认真地学习，学习的同时也可以找一些html5 css3书籍，多做一些了解，对以后制作是有帮助。当然网上现在也有很多的CSS模板，大家也可以找来参考学习一下。