Web基础关键_004_CSS（二）
目 录
一、样式
1.行内样式
2.内部样式
3.外部样式
二、选择器优先级
1.非关系选择器
2.关系选择器
三、属性
四、盒子模型
五、元素
1.块级元素
2.行内元素
3.行内块级元素
4.元素类型转换
六、浮动
七、定位
1.静态定位
2.相对定位
3.绝对定位
4.固定定位
一、样式
1.行内样式
<html><head><title>Test CSS</title>
</head><body><h3>你是我触碰不到的风，醒不来的梦</h3><p style="font-family: 楷体;font-size: 20px;color: pink;">寻不到的天堂，医不好的痛</p><p>点不着的香烟，松不开的手</p><p>忘不了的某某某</p><span>你是我寻觅不到的风，哭不完的红</span><p>说不出的保重，熬不过的冬</p><div><p>忍不住的欢笑，喝不完的酒</p></div><p>愈合不了的伤口</p></body></html>
2.内部样式
<html><head><title>Test CSS</title><style>p {font-family: 楷体;font-size: 20px;color: red;}</style>
</head><body><h3>你是我触碰不到的风，醒不来的梦</h3><p>寻不到的天堂，医不好的痛</p><p>点不着的香烟，松不开的手</p><p>忘不了的某某某</p><span>你是我寻觅不到的风，哭不完的红</span><p>说不出的保重，熬不过的冬</p><div><p>忍不住的欢笑，喝不完的酒</p></div><p>愈合不了的伤口</p></body></html>
3.外部样式
内部样式只能作用于当前页面，若有多个页面需要使用同一个样式，则需要使用外部样式。
/* index.css */
p {font-family: 楷体;font-size: 20px;color: pink;
}<html><head><title>Test CSS</title><link rel="stylesheet" href="css/index.css">
</head><body><h3>你是我触碰不到的风，醒不来的梦</h3><p>寻不到的天堂，医不好的痛</p><p>点不着的香烟，松不开的手</p><p>忘不了的某某某</p><span>你是我寻觅不到的风，哭不完的红</span><p>说不出的保重，熬不过的冬</p><div><p>忍不住的欢笑，喝不完的酒</p></div><p>愈合不了的伤口</p></body></html>
二、选择器优先级
1.非关系选择器
- 被【!important】修饰，优先级最高；
- 行内样式优先级其次；
- 内部样式和外部样式会根据加载顺序加载进文档，形成文档流，所以和内部、外部无关；
- 文档流内，选择器的优先级：id > 属性、伪类 > 类 > 标签 > 全局；
- 优先级相同的，靠后的选择器生效，遵循就近原则；
- 部分属性可以被子继承，即父容器的样式会传递给子容器。但优先级最低，若子容器有自己的样式，则会覆盖继承的样式。
2.关系选择器
- 一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID）、十（类）、个（元素），三位数的三个位数：
- ID：选择器中包含 ID 选择器则百位得 1 分。
- 类：选择器中包含类选择器、属性选择器或者伪类则十位得 1 分。
- 元素：选择器中包含元素、伪元素选择器则个位得 1 分。
- 得分高者优先。
三、属性
- 详细可以参考【CSS 属性】；
- 常用属性如下：
| 属性名称 | 作用 |
|---|---|
| background-color | 背景颜色 |
| font-family | 字体 |
| font-size | 字体大小 |
| font-style | 字体风格（斜体、倾斜、正常） |
| font-weight | 字体粗细 |
| font | 字体复合属性 （其他字体属性、font-size、font-family 的简写属性） |
| color | 文本颜色 |
| letter-spacing word-spacing | 文本间距 |
| text-decoration | 文本划线 |
| text-indent | 文本缩进 |
| text-align | 文本对齐 |
| line-height | 文本行高 |
| list-style | 列表 （list-style-type、list-style-position、list-style-image） |
| border | 边框属性 （border-width、border-style[必需]、border-color） |
四、盒子模型
- 合理利用块级标签；
- 内边距：
- 左内边距：padding-left；
- 右内边距：padding-right；
- 上内边距：padding-top；
- 下内边距：padding-bottom。
- 外边距：
- 左外边距：margin-left；
- 右外边距：margin-right；
- 上外边距：margin-top；
- 下外边距：margin-bottom。
<html><head><title>Test CSS</title><style>#d1 {border: 3px solid red;padding: 10px 10px 10px 10px;margin: 10px 10px 10px 10px;}#d2 {border: 2px solid blue;padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;}#p1 {border: 1px solid green;text-align: center;text-indent: 10px;}#p2 {border: 1px solid yellow;text-align: right;}#p3 {border: 1px solid pink;text-align: left;}</style>
</head><body><div id="d1"><div id="d2"><p id="p1">遗憾吗 忘了吧</p><p id="p2">擦掉眼泪送走离开的他</p><p id="p3">平行的直线不该再有牵挂</p></div></div>
</body></html>
五、元素
1.块级元素
- 块级元素独占一行；
- 可以设定元素的宽、高、内边距、外边距；
- 未设置宽度时，始终与父元素宽度一致，与内容无关；
- 块级元素一般是其他元素的容器，可以容纳块级元素和行内元素；
- 常见块级元素：body、div、p、h1~h6、ol、ul、li、pre 等。
<html><head><title>Test CSS</title><style>#d1 {border: 3px solid red;padding: 10px 10px 10px 10px;margin: 10px 10px 10px 10px;}#d2 {border: 2px solid blue;padding: 5px 5px 5px 5px;margin: 5px 5px 5px 5px;height: 300px;width: 700px;}#sp1 {border: 1px solid green;}#sp2 {border: 1px solid yellow;}#sp3 {border: 1px solid pink;}</style>
</head><body><div id="d1"><div id="d2"><span id="sp1">遗憾吗 忘了吧</span><br><span id="sp2">擦掉眼泪送走离开的他</span><br><span id="sp3">平行的直线不该再有牵挂</span></div></div>
</body></html>
2.行内元素
- 行内元素（内联元素），可以和其他行内元素共处一行；
- 不可以设置宽、高，内边距、外边距左右可控；
- 行内元素宽度仅与内容有关；
- 行内元素只能容纳文本或其他行内元素。
3.行内块级元素
- 行内块级元素既有块级元素的特点，也有行内元素的特点；
- 可以与其他行内元素、行内块级元素共处一行；
- 可以设置宽、高；
- 常见行内块级元素：img、input。
4.元素类型转换
display 属性，可以将一个元素类型转换为另一个元素类型；
属性值：
none：此元素不会被显示，不保留物理空间；
block：此元素会被显示为块级元素，前后带有换行符；
inline：此元素会被显示为行内元素，前后没有换行符；
inline-block：行内块级元素。
六、浮动
将二维文档流变为三维；
属性：float。
<html><head><title>Test CSS</title><style>.img1 {width: 300px;height: 300px;float: left;}</style>
</head><body><img src="img/wydt.jpg" class="img1"><h2>我与地坛</h2><p>人有时候只想独自静静地待一会儿，悲伤也成享受。</p><p>一些人真实的困苦变成了另一些人编织的愉快，一个时代的绝望与祈告，变成了另一个时代的潇洒的文字调遣。</p><p>风，四处游走，串联起夜的消息，从沉睡的窗口到沉睡的窗口，去探望被白昼忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消灭恐惧最有效的办法，就是消灭欲望。</p><p>他熄灭着走下山去，收入苍凉残照之际，正是他在另一面燃烧着爬上山巅，布散烈烈朝晖之时。</p><p>但是二十岁上下的人，不谈恋爱尚且可做到，不向往爱情则不可能，除非心理有毛病。</p>
</body></html>
七、定位
1.静态定位
文档流的默认位置。
<html><head><title>Test CSS</title><style>p {position: static;left: -50px;}</style>
</head><body><h2>我与地坛</h2><p>人有时候只想独自静静地待一会儿，悲伤也成享受。</p><p>一些人真实的困苦变成了另一些人编织的愉快，一个时代的绝望与祈告，变成了另一个时代的潇洒的文字调遣。</p><p>风，四处游走，串联起夜的消息，从沉睡的窗口到沉睡的窗口，去探望被白昼忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消灭恐惧最有效的办法，就是消灭欲望。</p><p>他熄灭着走下山去，收入苍凉残照之际，正是他在另一面燃烧着爬上山巅，布散烈烈朝晖之时。</p><p>但是二十岁上下的人，不谈恋爱尚且可做到，不向往爱情则不可能，除非心理有毛病。</p>
</body></html>
2.相对定位
相对正常文档流的位置进行定位。
<html><head><title>Test CSS</title><style>p {position: relative;left: -50px;}</style>
</head><body><h2>我与地坛</h2><p>人有时候只想独自静静地待一会儿，悲伤也成享受。</p><p>一些人真实的困苦变成了另一些人编织的愉快，一个时代的绝望与祈告，变成了另一个时代的潇洒的文字调遣。</p><p>风，四处游走，串联起夜的消息，从沉睡的窗口到沉睡的窗口，去探望被白昼忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消灭恐惧最有效的办法，就是消灭欲望。</p><p>他熄灭着走下山去，收入苍凉残照之际，正是他在另一面燃烧着爬上山巅，布散烈烈朝晖之时。</p><p>但是二十岁上下的人，不谈恋爱尚且可做到，不向往爱情则不可能，除非心理有毛病。</p>
</body></html>
3.绝对定位
若没有父容器，或父容器没有定位，则以浏览器为定位标准。若父容器有定位，则以父容器为定位标准。
<html><head><title>Test CSS</title><style>#d1 {position: absolute;left: -50px;}</style>
</head><body><div id="d1"><h2>我与地坛</h2><p>人有时候只想独自静静地待一会儿，悲伤也成享受。</p><p>一些人真实的困苦变成了另一些人编织的愉快，一个时代的绝望与祈告，变成了另一个时代的潇洒的文字调遣。</p><p>风，四处游走，串联起夜的消息，从沉睡的窗口到沉睡的窗口，去探望被白昼忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消灭恐惧最有效的办法，就是消灭欲望。</p><p>他熄灭着走下山去，收入苍凉残照之际，正是他在另一面燃烧着爬上山巅，布散烈烈朝晖之时。</p><p>但是二十岁上下的人，不谈恋爱尚且可做到，不向往爱情则不可能，除非心理有毛病。</p></div>
</body></html>
4.固定定位
相对浏览器窗口进行定位，当浏览器出现滑动滚轮时，元素位置不变。
<html><head><title>Test CSS</title><style>img {position: fixed;width: 300px;height: 300px;right: 0px;bottom: 0px;}</style>
</head><body><img src="img/wydt.jpg"><h2>我与地坛</h2><p>人有时候只想独自静静地待一会儿，悲伤也成享受。</p><p>一些人真实的困苦变成了另一些人编织的愉快，一个时代的绝望与祈告，变成了另一个时代的潇洒的文字调遣。</p><p>风，四处游走，串联起夜的消息，从沉睡的窗口到沉睡的窗口，去探望被白昼忽略了的心情。</p><p>人真正的名字是：欲望。所以你得知道，消灭恐惧最有效的办法，就是消灭欲望。</p><p>他熄灭着走下山去，收入苍凉残照之际，正是他在另一面燃烧着爬上山巅，布散烈烈朝晖之时。</p><p>但是二十岁上下的人，不谈恋爱尚且可做到，不向往爱情则不可能，除非心理有毛病。</p><p>秋风起时，疯狂的摇滚才能聚敛成爱的语言。</p><p>我忽然觉得，我一个人跑到这世界上来玩真是玩的太久了。</p><p>人终会被年少不可得之物困其一生，也终会为一时一景解开一生困惑。 现在是将来的过去，现在是过去的将来，将来是将来的现在。</p><p>我常以为是愚氓举出了智者 我常以为是懦夫衬照了英雄 我常以为是众生度化了佛祖。可是不必着急的事并不证明是一件必要拖延的事呀？你总是决定活下来，这说明什么？是的，我还是想活。人为什么活着？因为人想活着，说到底是这么回事，人真正的名字叫作：欲望。</p><p>但要是“爱”也喧嚣，“美”也招摇，“真诚”沦为一句时髦的广告，那怎么办？惟柔弱是爱愿的识别，正如放弃是喧嚣的解剂。人一活脱便要嚣张，天生的这么一种动物。</p><p>诵经声如无字的伴歌，好像黑夜的愁叹，好像被灼烤了一白天的土地终于得以舒展便油然飘缭起的雾霭。</p><p>那一天，我也将沉静着走下山去，扶着我的拐杖。有一天，在某一处山洼里，势必会跑上来一个欢蹦的孩子，抱着他的玩具。 当然，那不是我。 但是，那不是我吗？宇宙以其不息的欲望将一个歌舞炼为永恒。这欲望有怎样一个人间的姓名，大可忽略不计。</p><p>比如你起早熬夜准备考试的时候，忽然想起有一个长长的假期在前面等待你，你会不会觉得轻松一点？并且庆幸并且感激这样的安排?</p><p>我不高兴是指精神的我 我发烧了是指肉身的我 我想自杀是精神的我想杀死肉身的 我 但是我不敢死 是肉身的我在哀求精神的我 我想结束的是痛苦 不是生命</p><p>命运把我推到悬崖边，我就在这里坐下来，唱支歌给你听。</p><p>看见了伤残，却摆脱不了春天。春风强劲也是一座牢笼，一副枷锁，一处炼狱，一条命定的路途。</p><p>四处无人，寂静悠久，寂静的我和寂静的墙之间，膨胀和盛开着野花，膨胀和盛开着冤屈。</p>
</body></html>