CSS，层叠样式表。
有了CSS后，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现样式完全交给CSS，html文档变得更加简洁。
CSS基本语法以及页面引用
css基本语法
css页面引入方法：
1、外联式：通过link标签，链接外部样式表到页面中。
<link rel="stylesheet" type="text/css" href="./css/main.css">
2、嵌入式：通过style标签，在网页上创建嵌入的样式表。
<style type="text/css">
h3 {
font-size: 20px;
color:gold;
}
</style>
3、内联式：通过标签的style属性，在标签上直接写样式。
<a href="http://www.itcat.cn" style="font-size: 20px;color: blue">
选择器{属性：值；属性：值；属性：值；}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。
div {
font-size: 20px;
color: red;
}
css文本设置
常用的应用文本的css样式：
- color 设置文字的颜色，如：color：red；
- font-size 设置文字的字体，如：font-family:'微软雅黑'
- font-sytle 设置字体是否倾斜， 如font-style:'normal';设置不倾斜，font-style：'italic';设置文字倾斜
- font-weight 设置文字是否加粗，如font-weight:bold;设置加粗 font-weight:normal 设置不加粗
- line-height 设置文字的行高，设置行高相当于在每行位子的上下同事加间距，如：line-height：24px
- font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：font：是否加粗 字号/行号字体；如font:normal 12px/36px '微软雅黑'
- text-decoration 设置文字的下划线，如text-decoration:none;将文字下划线去掉
- text-indent 设置文字首行缩进，如：text-indent:24px;设置文字首行缩进24px
- text-aligh 设置文字水平对齐方式,如text-align:center 设置文字水平居中
<!DOCTYPE html>
<html>
<head>
<title>常用文本样式</title>
<style type="text/css">
div {
/*font-size: 20px;
font-style: italic;
font-weight: bold;*/
font:normal 20px/40px 'Microsoft Yahei';
color: green;
/*font-family: 'Microsoft Yahei';
line-height: 40px;*/
text-decoration: underline;
text-indent: 40px;
}
em {
font-style: normal;
color: red
}
h3 {
font-weight: normal;
}
a {
text-decoration: none;
}
p {
text-align: center;
}
</style>
</head>
<body>
<h3>文本样式</h3>
<div>
<em>font </em>同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：font：是否加粗 字号、行号字体；如font:normal 12px/36px '微软雅黑'
</div>
<p>这是div标签</p>
<a href="https://www.baidu.com">百度链接</a>
</body>
</html>
css颜色表示法
css颜色值主要有三种表示方法：
- 颜色名表示，比如：red 红色，gold 金色
- rgb表示，如：rgb（255，0，0）表示红色
- 16进制数值表示，比如：#ff0000表示红色，这种可以简写成#ff0
div {
font-size: 30px;
/*color: rgb(255,0,0);*/
color: #00ff00;
}
css选择器
- 标签选择器
<style type="text/css">
* {
font-size: 20px;
}
div {
color: red;
}
</style>
- id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用
<style type="text/css">
* {
font-size: 20px;
}
div {
color: red;
}
#div1 {
font-size: 30px;
color: blue;
}
</style>
- 类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css选择器</title>
<style type="text/css">
* {
font-size: 20px;
}
div {
color: red;
}
#div1 {
font-size: 30px;
color: blue;
}
.green {
color: green;
}
.big {
font-size: 40px;
}
</style>
</head>
<body>
<div id="div1" class="big">这是一个div</div>
<div class="green big">这是第二个div</div>
<div>这是第三个div</div>
<p class="green">这是p标签</p>
</body>
</html>
- 层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style type="text/css">
.box {
font-size: 20px;
line-height: 30px;
text-indent: 40px;
}
.box span {
color: red;
font-weight: bold;
}
.box em {
font-style: normal;
text-decoration: underline;
font-weight: bold;
color: pink;
}
.box .span02 {
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<div class="box">
主要应用在选择父元素下的子元素，或者<span>子元素下</span>面的子元素，可与标签元素结合使用，<span class="span02">减少命名</span>，同时也可以通过层级，<em>防止命名冲突</em>。
</div>
<div class>
主要应用在选择父元素下的子元素，或者<span>子元素下</span>面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
</div>
</body>
</html>
- 组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style type="text/css">
.box01,.box02,.box03 {
font-size: 20px;
text-indent: 40px;
}
.box01 {
color: red;
}
.box02 {
color: pink;
}
.box03 {
color: gold;
}
</style>
</head>
<body>
<div class="box01">这是第一个div</div>
<div class="box02">这是第二个div</div>
<div class="box03">这是第三个div</div>
</body>
</html>
- 伪类以及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before何after，他们可以通过样式在元素中插入内容
<!DOCTYPE html>
<html>
<head>
<title>css选择器</title>
<style type="text/css">
.link {
font-size: 30px;
text-decoration: none;
color: pink;
}
.link:hover {
color: green;
font-weight: bold;
font-style: italic;
}
.box01,.box02 {
font-size: 20px;
}
.box01:before {
content: ".";
color:red;
}
.box02:after {
content: "。";
color: red;
}
</style>
</head>
<body>
<a href="http://www.itcast.cn" class="link">传智播客</a>
<div class="box01">这是第一个div</div>
<div class="box02">这是第二个div</div>
</body>
</html>
网友评论