css基础
一，css基本语法
css的定义方法是：
选择器 { 属性:值; 属性:值; 属性:值;}
选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。
代码如下：
/*
css注释 ctrl+shift+"/"
*/
<style type="text/css">
div{
width:100px;
height:100px;
color:red }
</style>
css 代码一般放在<head> </head>标签 之间。
二，css页面引入方法：
1、外联式：通过link标签，链接到外部样式表到页面中。（比较常用）
<link rel="stylesheet" type="text/css" href="css/main.css"> href 是放css样式所在文件地址
代码如下：
外联式css代码：
div{
font: 20px;
color: red;
}
外联式HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基本语法</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>css外联式</div>
</body>
</html>
2、嵌入式：通过style标签，在网页上创建嵌入的样式表。（常用于首页）
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基本语法</title>
<style type="text/css">
h1{font: 23px;
color: blue}
</style>
</head>
<h1>css嵌入式</h1>
</body>
</html>
3、内联式：通过标签的style属性，在标签上直接写样式（小部分用到）
<div style="width:100px; height:100px; color:red ">......</div>
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基本语法</title>
</head>
<body>
<a href="http//:www.baidu.com" style="font-size:23px; color:green">百度</a>
</body>
</html>
内嵌式直接在<body> </body>标签里面要引用标签的 style 属性 中直接写样式。
三，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 设置不加粗
-
line-height 设置文字的行高，设置行高相当于在每行文字的上下同时加间距， 如：line-height:24px;
-
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';
-
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
-
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
-
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的文本样式</title>
<style type="text/css">
div{color: green;
text-indent: 40px;
/* font-size: 20px;
font-family: "Microsoft Yahei";
line-height: 40px; */
font: normal 20px/40px "Microsoft Yahei"
}
span{color: red;
font-size: 30px;
}
em{color: gold;
font-style:normal;
}
p{text-align: center;
font-weight: bold;
}
a{text-decoration: none;
}
h1{font-weight: normal;
}
</style>
</head>
<body>
<h1>css常用样式</h1>
<div>
为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，<span>CSS</span>是 <em>Cascading Style Sheets</em> 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁。
</div>
<p>这是一个p标签</p>
<a href="http://www.baidu.com">百度网的链接</a>
</body>
</html>
效果如下：
四，css颜色表示法和css选择器：
1、标签选择器
标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
/* 标签选择器（选择器影响范围大，建议尽量应用在层级选择器中）
*/
*{color: red;
}
div{font-size: 20px;}
</style>
</head>
<body>
<!-- 1.标签选择器 -->
<div>标签选择器</div>
</body>
</html>
* 表示全部标签
2、id选择器
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
/* id选择器（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。） */
#box{
color: gold;
font:bold 26px/40 "Microsoft Yahei";
}
</style>
</head>
<body>
<!-- 2.ID选择器 -->
<div id="box">id标签选择器</div>
</body>
</html>
3、类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
/* 类选择器（通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。） */
.red{color: red;}
.big{font-size: 20px;}
.mtlo{margin: 10px;}
</style>
</head>
<body>
<!-- 3.类选择器 -->
<div class="red">类选择器1</div>
<p class=" red mtlo">类选择器2</p>
<h1 class=" red big mtlo">类选择器3</h1>
</body>
</html>
4、层级选择器
主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style type="text/css">
/* 层级选择器（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）*/
.box{
font-size:20px;
line-height:30px;
text-indent:40px;
font-weight: bold;
color: pink;
}
.box span{
color:red;
font-weight:bold;
}
.box em{
font-style:normal;
text-decoration:underline;
font-weight:bold;
color:pink;
}
.box .span02{
color:blue;
}
</style>
</head>
<body>
<!-- 4.层级选择器 -->
<div class="box">层级选择器主要应用在选择父元素下的<span>子元素</span>，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，<em>防止命名冲突</em>。
层级选择器主要应用在选择父元素下的子元素，或者子元素下面的<span class="span02">子元素</span>，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
层级选择器主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
</div>
</body>
</html>
5、组选择器
多个选择器，如果有同样的样式设置，可以使用组选择器。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组选择器</title>
<!-- 多个选择器，如果有同样的样式设置，可以使用组选择器。 -->
<style type="text/css">
/* 同样的样式放在一个组 */
.box1, .box2, .box3{font:bold 23px/40px "黑体";}
/* 不同样的样式放在不同组 */
.box1{color: red;}
.box2{color: pink;}
.box3{color: gold;}
</style>
</head>
<body>
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>
</body>
</html>
6、伪类及伪元素选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类及伪元素选择器</title>
<!-- 伪类选择器（常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态） -->
<style type="text/css">
.link{
font: bold 18px/40px "黑体";
color: pink;
}
.link:hover{color: blue;
font-style: italic;
font-weight: bold;}
/* 伪元素选择器（伪元素选择器有before和after,它们可以通过样式在元素中插入内容。） */
.box01,.box02{
font-size:20px;
}
.box1:before{content: ".";
color: red;}
.box2:after{content: "。";
color: gold;}
</style>
</head>
<body>
<p class="link">常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。</p>
<div class="box1">伪元素</div>
<div class="box2">伪元素</div>
</body>
</html>