Web应用 —— CSS
二、CSS
1.样式定义方法
- 行内样式表
直接定义在标签的<style>属性中，作用范围：仅对当前标签产生影响
- 例如：
<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">
<html> <style type="text/css"> img{ width:300px; height:300px; background-color:lightgreen; } .big{ width:70px; height:70px; } </style> /* style放在head中（最好），对所有img标签的内容进行统一操作（）属性用大括号括起来,前面加点的属于对含有此属性的标签进行统一操作(class) */ </html>
- 内部样式表
定义在<style>标签中，通过选择器影响对应的标签，作用范围：可以对同一个页面中的多个元素产生影响
- 外部样式表(最常见)
- 定义在CSS样式文件中，通过选择器影响对应的标签。可以用**
<link>标签引入某些页面**，作用范围：可以对多个页面产生影响
通俗讲，就是讲定义样式的标签提出来放到单独的css文件里，然后通过link标签导入，如：
<link rel="stylesheet" href="/static/css/style.css" type="text/css">
static.css文件内存放：
img{ width:300px; height:300px; background-color:lightgreen; } .big{ width:70px; height:70px; }
注释：
不能用
//,只有/* 注释 */
2.选择器
1.标签选择器
选择所有div标签
div { width: 200px; height: 200px; background-color: gray; }
2.ID选择器
选择ID为<rect-1>的标签 用#
#rect-1 { width: 200px; height: 200px; background-color: gray; } ID一般用#
3.类选择器
选择所有<rectangle>类的标签 用.
.rectangle { width: 200px; height: 200px; background-color: gray; }
4.伪类选择器
伪类用于定义元素的特殊状态
链接伪类选择器：
:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式
例如：
.effect:hover{ transform:scale(1,1); teansition:200ms; } /* 第一行表示鼠标悬停后放大一点一倍，第二行表示鼠标悬停后放大的用时 */
位置伪类选择器
:nth-child(n)：选择是其父标签第n个子元素的所有元素。
n可以写成其他表达式批量定义
目标伪类选择器：
:target：当url指向该元素时生效。
5.复合选择器
由两个及以上基础选择器组合而成的选择器。
element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。
element1 > element2：选择父标签是element1的所有element2元素。
6.通配符选择器
*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签
7.伪元素选择器
将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。
::first-letter：选择第一个字母
::first-line：选择第一行
::selection：选择已被选中的内容
::after：可以在元素后插入内容
::before：可以在元素前插入内容
8.样式渲染选择器
- 权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
- 权重相同时，后面的样式会覆盖前面的样式
- 继承自父元素的权重最低
3.颜色
预定义的颜色值
black、white、red、green、blue、lightblue等。
1.16进制表示法
使用6位16进制数表示颜色，例如：#ADD8E6。
其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。
简写方式：#ABC，等价于#AABBCC。
2.RGB表示法
rgb(173, 216, 230)。
其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。
3.RGBA表示法
rgba(173, 216, 230, 0.5)。
前三个数同上，第四个数表示透明度。
4.取色方式
- 网页里的颜色，可以在chrome的调试模式下获取
- 其他颜色可以使用QQ的截图软件：
- 直接按
c键，可以复制rgb颜色值
- 按住
shift再按c键，可以复制16进制颜色值
4.文本
1.text-align
text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。
2.line-height
line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。(行盒可以理解为行高)
补充知识点：长度单位
| 单位 | 描述 |
| px | 设备上的像素点 |
| % | 相对于父元素的百分比 |
| em | 相对于当前元素的字体大小 |
| rem | 相对于根元素的字体大小 |
| vw | 相对于视窗宽度的百分比 |
| vh | 相对于视窗高度的百分比 |
3.letter-spacing
CSS 的 letter-spacing 属性用于设置文本字符的间距。
4.text-indent
text-indent属性能定义一个块元素首行文本内容之前的缩进量
5.text-decoration
text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。
6.text-shadow
text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。
text-shadow: 3px 3px 2px grey; 分别表示 x(右偏移量3px) y(下偏移量3px) 模糊(2px) 颜色为灰
