css的引入方式
1.内部样式
2.外部样式表
3.行内样式
1.内部样式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 一般在title的下面 内部样式-->
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>
2.外部样式表
3.行内样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 外链样式 -->
<link rel="stylesheet" href="./css外部.css">
<!-- 一般在title的下面 内部样式-->
<style>
h1{
color: blue;
}
</style>
</head>
<body>
<!-- -->
<h1 style="color: red;">这是一个标题</h1>
<p>哈哈哈</p>
</body>
</html>
1.标签选择器
div{
color: red;
}
2.类选择器
类选择器可以选择一个或多个选择器。
一个标签可以有多个类名
.blue{
color:blue;
}
.fontSize {
font-size: 30px;
}
3.id选择器和通配符选择器
id选择器一个页面只能使用一次，具有唯一标识的意义，一般写样式不使用id选择器。
#yellow{
color: yellowgreen;
}
/* 通配符指的是所有标签 */
*{
color: pink;
}
<body>
<div class="blue fontSize">你好</div>
<div>你好</div>
<div>你好</div>
<p>段落1</p>
<p id="yellow">段落2</p>
<p>段落3</p>
</body>
4.画盒子
画盒子
<style>
/* 快捷方式 w100 h100 bgc */
.div1{
width: 100px;
height: 100px;
background-color: red;
}
.div2{
width: 200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1">第一个盒子</div>
<div class="div2">第二个盒子</div>
</body>
</html>
5.字号，字体粗细,字体是否倾斜，行高
字号，font-size
字体粗细,font-weight
字体是否倾斜 font-style: normal;
行高 line-height 行高等于盒子的高度文字垂直居中，行高小于盒子的高度偏上显示，行高大于盒子的的高度偏下显示，line-height只针对一行文字的垂直居中。
字体名： {
font-size: 100px;
font-family: 隶书,黑体;
/* font-family 可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。网页中建议使用无衬线字体，比如字母没有边缘线。 */
}
/* 字体字号的大小 fz38 fz18 */
h1{
font-size: 38px;
}
p{
font-size: 18px;
}
/* fw700 */
.bold {
/* font-weight: 700; bold = 700*/
/* font-weight: normal; 400 = normal 不加粗 */
font-weight: bolder;
}
/* 文字倾斜编程不倾斜 em 大部分都是倾斜的编程不倾斜 快捷键fsn*/
.fontStyle {
font-style: normal;
/* font-style: italic; */
}
/* 行高1: 行与行之间的距离，文字的顶部-到下一行文字的顶部的距离 fz15px*/
.lineHeight1 {
font-size: 15px;
line-height: 30px;
/* 行高 数量+px（单位）*/
/* line-height:对应的倍数 想当于当前的字体的大小的倍数来说的。*/
}
/* 行高2：可以设置文字居中的方法，没有其他方法可以设置局中，可以用line-height来设置局中 行高的高度等于盒子的高度*/
/* 只针对于单行文字的居中对齐 行高等于盒子的高度*/
/* 上间距+文字高度+下间距 = 行高 */
/* 10+20+10 = div高度40 */
div{
width: 100px;
height: 100px;
background-color: yellowgreen;
line-height: 100px;
}
font-family: 隶书,黑体;
/* font-family 可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。
网页中建议使用无衬线字体，比如字母没有边缘线。
*/
}
6.字体复合，
div{/* 是否倾斜，是否加粗，字号/行高 字体 必须按着顺序书写*/
/* font: normal 0 30px/60px '黑体'; */
/* font: normal bold 30px/60px '黑体'; */
font: 40px/2 '黑体';
color: rebeccapurple;
/* 字号和字体不能省略 */
}
7.首行缩进，text-indent: 2em;
8.文本装饰 text-decoration:underline;(line-through;none;)
.div3{
text-decoration: underline;
/* text-decoration: line-through; */
/* text-decoration: none; */
/* 上划线用的最少 */
/* text-decoration: overline; */
}
p{
font-size: 18px;
/* 快捷键ti2em */
text-indent: 2em;
/* 收行缩进 */
/* em是一个相对单位，一个em是一个文字的大小，当前元素当前标签一个文字的大小。 */
}
9.color 3种颜色的写法。
点击颜色选择框可以切换rgb 还是十六进制
a{
text-decoration: none;
font-weight: 500;
font-style: 16px;
/* color: blueviolet; */
/* color: #ff0000; 红2绿2蓝2*/
/* color: rgb(255, 0, 0); */
/* color: rgba(255, 0, 0, 0.5); a 取值是0-1之间 */
/* color: #888888; 6个数相同，靠近灰色 */
color: #fff;
/* 可以把6位 缩写成3位 两两相同才能缩写 */
}
/* color 颜色的表示方法
颜色英文单词，rgb rgba
十六进制
*/
10.调试工具
检查错误，黄色感叹号的地方来修改代码。
