html5学习-2-CSDN博客

本文链接：https://blog.csdn.net/u011783353/article/details/10427571

昨天看了一些关于标签的问题，其实标签对于html很重要，所以学习的时候一定要好好把标签记忆一下。而下一个很重要的内容是CSS的内容，有很多人在写代码的时候都喜欢用CSS来表现。学习的东西有很多，要想细致的学习大家可以参考一些html5 css3书籍，下面就来继续我的学习内容。

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选择器
1、元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如：
body { background-color: #cff;}
h1,h2 { text-align: center;}
p { font-size: 16pt; color: red;}

2、类选择器
如：
.abc { color: blue; }
或
p.abc { font-size: 24pt; }

3、ID选择器
如：
#xyz { color: #060; }

例：
<html>
<head>
<title>CSS</title>
<style>
body {
background-color: #cff;
}
h1,h2 {
text-align: center;
}
p {
font-size: 16pt;
color: red;
}
.abc {
color: blue;
}
p.abc {
font-size: 24pt;
}
#xyz {
color: #060;
}
</style>
</head>
<body>
<h1>宜春学院</h1>
<h2 class="abc">HTML5网页设计</h2>
<p>这是第一段文字内容</p>
<p class="abc">这是第二段文字内容</p>
<p id="xyz">这是第三段文字内容</p>
</body>
</html>

4、属性选择器
如：
[title] { color:red; }
p[title] { font-size: 24pt; }
[title*="标题"] { color:green; }
例：
<html>
<head>
<title>CSS</title>
<style>
body {
background-color: #cff;
}
h1,h2 {
text-align: center;
}
p {
font-size: 16pt;
color: blue;
}
[title] {
color:red;
}
p[title] {
font-size: 24pt;
}
/*[title*="标题"] {
color:green;
}*/
</style>
</head>
<body>
<h1>宜春学院</h1>
<h2 title="这是标题">HTML5网页设计</h2>
<p>这是第一段文字内容</p>
<p title="这是这段文字的title属性">这是第二段文字内容</p>
<p title="这段文字不是标题">这是第三段文字内容</p>
</body>
</html>