层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS页面引入方法
1、外链式:通过link标签,链接外部样式表到页面中(推荐)
2、嵌入式:通过style标签,在网页上创建嵌入样式表(不完全推荐,可以做首页的性能优化)
3、行内样式:通过标签的style属性,在标签上直接写样式(冗余)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<!--插入样式的方式一:外链式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--插入样式的方式二:嵌入式-->
<style type="text/css">
h1{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h1>页面标题</h1>
<div>这是一个div标签</div>
<!--插入样式的方式三:行内样式-->
<a href="http://www.itcast.cn" style="font-size: 20px; color: pink">传播智客</a>
</body>
</html>
CSS文本设置
常用的应用文本的css样式:
-
color 设置文字的颜色,如: color:red;
-
font-size 设置文字的大小,如:font-size:12px;
-
font-family 设置文字的字体,如:font-family:'微软雅黑';
-
font-style 设置字体是否倾斜,如:font-style:'normal'; 设置不倾斜,font-style:'italic';设置文字倾斜
-
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
-
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写: font:是否加粗 字号/行高 字体;如: font:normal 12px/36px 'Microsofr Yahei';
-
line-height 设置文字的行高,如:line-height:24px;
-
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用文本样式</title>
<style type="text/css">
div{
font-size: 20px;
color: green;
font-family: "Microsofr Yahei"; /*微软雅黑,中文容易失效*/
font-style: italic; /*文字倾斜,默认不倾斜normal*/
line-height: 40px; /*第二行底部到第一行底部的距离*/
text-indent: 40px /*首行缩进*/
}
em{
font-style: normal; /*em倾斜变不倾斜*/
color: gold;
text-decoration: underline; /*下划线*/
}
span{
color: red;
font-size: 30px;
}
h1{
font-weight: normal; /*bold 加粗 normal不加粗*/
}
a{
font:bold 24px/40px 'Microsofr Yahei';
text-decoration: none; /*去掉下划线*/
/*a标签不可居中,本身就是居中*/
}
p{
text-align: center; /*水平居中*/
}
</style>
</head>
<body>
<h1>样式演示</h1>
<div>
<span>层叠样式表</span>(英文全称:<em>Cascading Style Sheets</em>)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
</div>
<p>这是一个p标签</p>
<a href="www.baidu.com">百度一下</a>
</body>
</html>