WEB前端路径、选择器和文本（学习笔记）

路径：
1.绝对路径：相对于本台计算机，换成另一台计算机或文件夹时需要修改路径
2.相对路径：相对于该文件夹的路径，只要整个文件夹不变，该路径就不变
3.img标签–图片：
（1）src：图片的路径
（2）alt（代替文字）：作用无法显示图片时的替换文本
4.a标签–超链接：
（1）href：链接，超链接的路径
（2）target：打开方式，作用设置新的页面的打开方式
5.href和src的区别：
（1）href：（引用链接）指向网络资源所在的位置，用于在当前文档和引用资源间确定联系
（2）src：（引入来源）指向外部资源的位置，用于替换当前元素，
6.背景样式：
（1）background-image：url（）背景图，url（）是图片的路径
（2）background-repeat： 背景图是否重复
（3）background-position：center 0px；背景图位置，可以使用百分比
（4）background-attachment：fixed；背景固定
（5）background：#ff0 url(bg.jpg) no-repeat center 0px;背景复合样式
选择器：
1.把css样式写在style属性里的做法叫做行间样式表，该方法设置的样式只对当前元素有效
2.head里设置style标签，用选择器和样式的写法叫作内部样式表，该方法对当前页面有效
3.创建一个.css的文件，将选择器和样式写进去，并用link标签引入所有需要的页面叫做外部样式表，该方法对所有引用他的页面都有效，< link href=“style.css” rel=“stylesheet”/> //href属性的值既是路径,rel属性规定当前文档和被链接文档之间的关系。只有stylesheet值得到了所有浏览器的支持。
4.通配选择器（*）：获取所有元素；类型选择器：获取所有该种选择器；类名选择器（.+class的值）：获取所有class包含该类名的元素；id选择器（#+id的值）：获取id为该值的元素；
5.包含选择器：（#id .class）获取范围内第一种选择器后代中第二种选择器选中的元素
6.选择器的优先级：
（1）行间样式（虽然行间样式不是选择器）>id选择器>class选择器>类型选择器>通配选择器
（2）包含选择器层级较多时，可以约分包含选择器，如#id.class的优先级高于#id；#id.class与.clas#id的优先级相同
（3）如果多个选择器优先级一致：后面覆盖前面

常见文本标签和样式：
1.常见的文字标签：
（1）< p>/< h1>~< h6> < !–段落/标题标签–>
（2）< b>/< strong> < !–粗体/加重标签–>
（3）< i>/< em> < !–斜体/着重标签–>
（4） < sup>/< sub> < !–上标/下标标签–>
（5） < ins>/< del> < !–插入/删除标签–>
2.css的出现，文本样式：
（1）font-size：字体大小，px像素作为单位
（2）line-height：120%；字体行高，用px像素或百分比作为单位
（3）text-align：center；文字对齐方式
（4）font-family：字体，可以设置多个
（5）font-weight：文字加粗，可以用数值和命令
（6）font-style：文字斜体
（7）text-indent：2em；文本缩进，单位一般用em
（8）letter-spacing：0.5em/2px；字间距，单位一般用em或者px；
（9）text-decoration：underline；文本装饰，overline，line-through；

练习1：选择一张图片，将其作为一个div元素的背景图(要求图要比div小)，并让图片在div的垂直方向居中，水平方向平铺
练习2：将下面文字按照括号内的要求用文字标签和css分别做出来：
请删除该行文字(加上中划线)
Z2=X2+Y2(2为上标)
H2O(2为下标)
中国.陕西.西安(文字斜体)
你好！欢迎您的到来(文字加粗)

练习3：做一段文字在一个p元素(宽默认高80px背景黄色)水平垂直居中的效果