<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<!-- <link rel="stylesheet" href="Html5与Css3\CSS\my.css"> -->
<!-- link引入外部样式表：rel：关系.样式表，敲完link直接按回车就行 -->
<!-- <style>
/* 写css代码 */
p{
color:red
}
</style> -->
</head>
<body>
<!-- css的定义：css就是层叠样式表是一种样式表语言，用来描述html文档的呈现美化内容
书写位置：title标签下方添加style双标签，style标签里面书写css代码
规则：选择器{属性名：属性值;}
-->
<p>体验css</p>
<!-- <div style='color:red;font-size:20px'>这是div标签</div> -->
<!--用css把段落变红 -->
<!-- CSS引入方式
内部样式表：css代码写在style标签里面
外部样式表：css代码写在单独的css文件中（.css），在html使用link标签引入
<link rel = 'stylesheet'href='./my.css'>
行内样式：配合JavaScript使用，写在标签的style属性值里
<div style='color:red;font-size:20px'>这是div标签</div>
-->
<!-- 选择器
作用：查找标签，设置样式
1.标签选择器：使用标签名作为选择器，选中同名标签设置相同样式
2.类选择器：查找标签，差异化设置标签的显示效果
特点：一个类选择器可以给多个标签使用，一个标签可以使用多个类名，类名用空格隔开
注意：类名自定义，尽量用英文命名
开发习惯：类名见面知意，多个单词用-连接
步骤：定义类选择器 .类名
使用类选择器 标签添加class='类名'
<style>
.red{
color:red;
}
</style>
如<div class='red'>变红</div>
3.id选择器：
查找标签，差异化设置标签的显示效果
id选择器一般配合JavaScript使用，很少用来设置css样式
步骤：
定义id选择器：#id名
使用id选择器：标签添加id='id名'
#id{
color:red;
}
4.通配符选择器：
通配符选择器：*，不需要调用，浏览器自动查找页面所以标签，设置相同的样式
*{
color：red;
}
-->
<!-- 画盒子
属性：
width：宽度
height：高度
background-color：背景色
-->
<!-- 网页的文字效果
字体大小：font-size
属性值：文字尺寸，常用单位是px
属性必须有单位，否则不生效
{
font-size：30px;
}
字体粗细：font-weight
属性值：数字或关键字
正常：normal / 400
加粗：bold / 700
{
font-weight：400;
}
字体倾斜：font-style
属性值：
正常：normal
.text
{
color:red;
font-size: 30px;
font-style: normal;
}
.text1
{
color:blue;
font-weight:400;
font-style:italic;
}
行高：line-height
行高的测量方法：从一行文字的最顶端量到下一行文字的最顶端
作用：设置多行文本的间距
属性名：line-height
属性值：
数字+px
数字(当前标签font-size属性值的倍数)
.text2
{
line-height: 50px;
}
垂直居中技巧：行高属性值等于盒子高度属性值（只适用于单行文字）
字体族：font-family
属性值：字体名
可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找，属性最后设置一个字体族名，网页开发建议使用五衬线字体
.text2{
font-family: 楷体;;
}
字体复合属性：font
使用场景：设置网页文字公共样式
复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
注意：字号和字体值必须书写，否则font属性不生效
div{
font：italic 700 30px/2 楷体
}
文本缩进：text-indent
属性值：
数字+px
数字+em（推荐：1em = 当前标签的字号大小）
p{
text-indent：2em;
}
文本对齐：text-align
作用：控制内容水平对齐方式
居中的是文字内容而不是标签
属性值：
left：左对齐
center：居中对齐
right：右对齐
{
text-align:center;
}
水平对齐方式-图片
text-align本质是控制内容的对齐方式，属性要设置给内容的父级
<style>
div{
text-align:center;
}
</style>
<div>
<img>
</div>
修饰线：text-decoration
属性值：
none：去掉下划线
underline：下划线
line-through:删除线
overline：上划线
颜色：color
属性值：
颜色关键字：颜色英文单词：red，green，blue等
rgb表示法：rgb（r，g，b）：r，g，b表示红绿蓝三原色，取值：0-255
rgba表示法：rgb（r，g，b，a）：a表示透明度,取值：0-1
十六进制表示法：#RRGGBB：#000000，#ffcc00，简写：#000，#fc0
a{
text-decoration: none;
/* color:red; */
/* color:rgb(0, 100, 0); */
/* color:rgba(1, 0, 0, 0.3); */
color:#ff0000;
}
-->
<!--调试工具
作用：检查，调试代码；帮助程序员发现代码问题，解决问题
1.打开调试工具
浏览器窗口任意位置/选中标签 ------>鼠标右键------>检查
F12
2.使用调试工具
细节：
1.如果是错误的属性，有黄色感叹号
2.css属性的前面有多选框，如果勾选，这个属性生效，如果没有勾选这个属性不生效
-->
<p class="text">测试下划线</p>
<p class="text1">测试2删除线</p>
<p class="text2">上划线aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<a href="#">没有下划线</a>
</body>
</html>