css
# 引入css
# 外部样式表
多个网站使用统一的样式时，通过一个文件来改变整个站点的外观
注意：html中如果外部样式的定义放在内部样式的定义后面，则外部样式将覆盖内部样式
# 内部样式表
在html中的head部分定义
## 内联样式
对具体的元素仅用一次
｀
这是一个段落。
｀# css基本规则
# css语法规则：
选择器1 选择器2 ……：{属性：值;属性2：值2;……;}。
- .marked,p 并集，满足其中一个就匹配
- .marked p p元素和marked类两个作用域的交集才匹配
CSS注释以 /* 开始, 以 */ 结束
# 选择器
id选择器，指定一个具体对象的格式，html中以标签的id属性来设置，css中以#来定义
class选择器，描述一组元素的样式，html中以class属性来设置，css以
.开头显示属性选择器：选择具有指定属性的元素。
伪类选择器：选择特定状态的元素，如悬停、焦点等。
伪元素选择器：选择特定位置的元素
组合选择器：
后代选择器(‘ ’空格分割)：表示div里的p元素
子选择器（>）：表示div里下一级的p元素，属于后代选择器里的一种情况
通用兄弟选择器（~）：选择在另一个元素之后的所有兄弟元素。
相邻兄弟选择器（+）：紧结在一个元素后端另一个元素,属于通用兄弟的特殊情况
否定伪类选择器（:not）：选择不匹配某个选择器的元素。
html中，多个类用空格分割
| 选择器 | 示例 | 示例说明 | CSS |
|---|---|---|---|
| .class | .intro | 选择所有class="intro"的元素 | 1 |
| #id | #firstname | 选择所有id="firstname"的元素 | 1 |
| * | * | 选择所有元素 | 2 |
| element | p | 选择所有<p>元素 | 1 |
| element,element | div,p | 选择所有<div>元素和 <p> 元素 | 1 |
| element.class | p.hometown | 选择所有 class="hometown" 的 <p> 元素 | 1 |
| element element | div p | 选择<div>元素内的所有<p>元素 | 1 |
| element>element | div>p | 选择所有父级是 <div> 元素的 <p> 元素 | 2 |
| element+element | div+p | 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 | 2 |
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute|=language] | [lang|=en] | 选择 lang 属性等于 en，或者以 en- 为开头的所有元素 | 2 |
| :link | a:link | 选择所有未访问链接 | 1 |
| :visited | a:visited | 选择所有访问过的链接 | 1 |
| :active | a:active | 选择活动链接 | 1 |
| :hover | a:hover | 选择鼠标在链接上面时 | 1 |
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| :first-letter | p:first-letter | 选择每一个<p>元素的第一个字母 | 1 |
| :first-line | p:first-line | 选择每一个<p>元素的第一行 | 1 |
| :first-child | p:first-child | 指定只有当<p>元素是其父级的第一个子级的样式。 | 2 |
| :before | p:before | 在每个<p>元素之前插入内容 | 2 |
| :after | p:after | 在每个<p>元素之后插入内容 | 2 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有<p>元素 | 2 |
| element1~element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
| [attribute^=value] | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
| [attribute*=value] | a[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
| ::selection | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
| :has | :has | 允许根据其后代元素来选择一个元素。 | 3 |
| :is | :is | 接收任何数量的选择器作为参数，并且返回这些选择器匹配的元素的并集。 | 3 |
# 元素的属性
# 尺寸
属性值有：
- height 设置元素的高度。
- line-height 设置行高。
- max-height 设置元素的最大高度。
- max-width 设置元素的最大宽度。
- min-height 设置元素的最小高度。
- min-width 设置元素的最小宽度。
- width 设置元素的宽度。
参数值有：
- auto 默认。浏览器会计算出实际的高度。
- length 使用 px、cm 等单位定义高度。
- % 基于包含它的块级对象的百分比高度。
- inherit 规定应该从父元素继承 height 属性的值。
# 颜色
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
# 显示
# 定位position
position属性，对应的参数有：
static 默认值，没有定位，(有空间)
fixed 相对于窗口位置固定，不随窗口滚动改变，(该元素将不占空间，和其他元素重叠显示)
relative 设置的位置信息为相对位置，(有空间)
absolute 页面的绝对位置，(该元素将不占空间，和其他元素重叠显示)
sticky 根据用户的滚动来定位位置，同常行为为relative，当页面滚动使其和边界的位置达到阔值时，转为fixed(该元素将不占空间，和其他元素重叠显示)
除了static，其他的参数都可以搭配其他定位属性，包括left，top，right，bottom
z-index属性，表示当前元素在页面显示的图层层级
实现提示信息的定位：
# overflow溢出属性：
设置当元素的内容超出所设置的对象大小时是否显示滚动条
<div style="background-color:lightblue;width:110px;height:110px;overflow:scroll">ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈ha哈</div>
overflow: hidden;不显示滚动条，也不显示内容
overflow: scroll;使用滚动条
overflow: auto; overflow: visible;不显示滚动条，显示内容，默认值
overflow: inherit;继承父类
# float浮动
使当前元素和后面的部分紧密相邻。后面的部分如果不想被重新排列使用clear:both清空
左图使用了内联属性，右图没有
如果设置了float浮动来对齐元素，提前定义好元素的外边距和内边距，避免不同终端的差异，同时父元素上添加 overflow: auto; 来解决子元素溢出的问题
# 剪裁
clip:rect(0px,60px,200px,0px);
# 定位时的光标cursor
请把鼠标移动到下面的单词上，可以看到鼠标指针发生变化：
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
设置鼠标和元素的交互：
# 元素内元素的整体对齐
方式一：
垂直对齐：padding:3px 0;，表示内容上下填充3px，填充颜色为白色。
需要手动计算上下位置
方式二：
方式三：
元素内元素居中对齐：margin:auto;,必须要设置了宽度才会生效
# css选择器的匹配规则
在匹配选择器的时候是要html的这个对象同时满足这些选择器才会被匹配，html对象可以比匹配的选择器多
样式优先级：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
如果在同一优先级下，则比较权重，权重越大优先级越高，一个样式的权重为所有选择器的累加
- 内联样式表的权值最高 1000；
- ID 选择器的权值为 100
- Class 类选择器的权值为 10
- HTML 标签选择器的权值为 1
如果多个匹配权重相同，则在样式表里靠后的会被匹配到
注意匹配选择器时，多个选择器用空格分割的表示应该同时满足，用‘，’分割的表示满足其中一个就匹配
- .marked,p 并集，满足其中一个就匹配
- .marked p p元素和marked类两个作用域的交集才匹配
- p.marked 一个标签同时是p元素，有marked属性才匹配，即
<p class=marked>
background-color: red !important;添加了!important标记将有最高的优先级
# css盒子模型
这个对象共计占300+252+252+25*2=450px的宽度
注意在
<p>标签的内容中，回车会被输出为一个空格，即一个字体的大小5px
box-sizing: border-box;设置盒子的规则，没有margin部分
# 边框border
border-style: dotted dashed solid double;分别给上、右、下、左设置不同的边框效果
hello world
# outline
# 屏蔽margin和border
# 盒子阴影
box-shadow: 10px 10px 5px #888888;
利用盒子阴影实现一个卡片效果
# 允许用户调整盒子尺寸
# 弹性盒子display
弹性盒子使得内层多个元素的设定的总尺寸在不等于外层元素的大小时，自动调整尺寸对齐外层尺寸
flex-direction属性指定了弹性子元素在父容器中的位置。
语法:flex-direction: row | row-reverse | column | column-reverse
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content指定了弹性子元素的在一行上的对齐规则
- flex-start: 默认，左对齐
- flex-end:右对齐
- center:居中对齐
- space-between:均匀平分在这一行，两边无空间
- space-around:均匀平分在这一行，两边有空间
align-items指定了弹性子元素的在一列上的对齐规则，参数同上
flex-wrap指定了是否换行
- nowrap默认不换
- wrap换行
- wrap-reverse
order用于子元素定义排列顺序，数字低的排前面
margin: auto;用于子元素自动居中margin: 10px;
align-self用于定义当前子元素的在一列上的对齐规则，参数同justify-content
flex: 2;设置当前子元素在整个元素的占比的权重
# 圆角
# 背景
# 背景图像的定位和剪裁
背景颜色：body {background-color:#b0c4de;}
背景图片：body {background-image:url('paper.gif');}
普遍的写法:body {background:#ffffff url('paper.gif') no-repeat right fixed top;}
默认进行平铺重复显示
属性值有这些，当使用简写时顺序从上往下:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-attachment表示是否背景图像随滚动变化：
- scroll：背景图片随着页面而滚动，这是默认的。
- fixed：背景图片不会随着页面而滚动。
- local：背景图片会随着元素内容而滚动。
- initial：设置该属性的默认值。 阅读关于 initial 内容
- inherit：指定 background-attachment 的设置应该从父元素继承。
可以设置多个背景图像
# 渐变
background-image: linear-gradient(to right, red , yellow);从左到右的线性渐变
background-image: linear-gradient(to bottom right, red , yellow);从左上角到右下角的线性渐变
background-image: linear-gradient(-90deg, red, yellow);带有角度的线性渐变，等同于从左到右的线性渐变
用rgba()函数使用rgb颜色可以设置透明度
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));0表示完全透明，1表示完全不透明
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);每30%重复一次线性渐变
background-image: radial-gradient(circle, red, yellow, green);径向渐变，围绕圆心渐变。circle表示形状
# 文字
# 文本
text-align:文本的对齐方式
- center:居中对齐
- right:右对齐
- justify:自动调整字间距使左右边距对齐，没有这个的话，会是固定间距，最后一点距离不够一个字时会空着然后换行
text-decoration:文字的修饰
- overline：上划线
这是文字
- line-through：删除
这是文字
- underline：下划线
这是文字
text-transform:文本转换
- uppercase: 所有字母均为大写
abb
- lowercase: 所有字母均为小写
abb
- capitalize: 首字母大写
abb
text-indent:文本缩进
文本缩进: p {text-indent:50px;}
所有属性：
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
# 字体
字体大小用px表示绝对大小，用em表示相对大小，1em表示浏览器的默认大小16px，用%也可以
font:italic bold 12px/30px Georgia, serif;字体属性的简写设置
# 文字阴影
text-shadow: 5px 5px 5px #FF0000;【右偏移 下偏移 发散度】
# 文字溢出
换行的方式
允许换行的时候打断一个单词
p {word-wrap:break-word;}
word-break: break-all;
不允许换行的时候打断单词：word-break: keep-all;
# 网站的私有字体
# 段落
# 列表
【list-style-position】
- inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
- inherit 规定应该从父元素继承 list-style-position 属性的值。
# 多列
# 表格
如果一个表格中需要有不同样式,最好单独设置，而不是样式覆盖
# 图像
# 一个缩略图的示例
# 响应式图片
# 滤镜
filter:grayscale(100%)
# 图片拼接
当网页图片较多时，为了避免多次请求大量图片，将多个图片拼接成一个图片，在显示时不同位置显示这张图片的不同部分
设置元素框的大小，再设置图片的位置，溢出方案选择丢弃即可
或者设置好对象的尺寸，用背景填充 background:url('/images/img_navsprites.gif') -91px 0;
# 图片模态框
结合JavaScript完成图片点击弹出完整图片 (opens new window)
# 媒体类型
指定文件在不用媒体上的呈现方式
@media not|only mediatype and (exp)多媒体查询语法
not|noly部分：
- not除了某类设备都匹配
- only，只匹配某类设备
mediatype部分：
- all，所有设备
- print 打印机
- screen电脑屏幕、手机、平板
- speech屏幕阅读器
在不同媒体上使用不同样式文件<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
# 响应布局
# viewport标签
用于对移动设备的网页优化
<meta name="viewport" content="width=device-width, initial-scale=1.0">
指定在不同的尺寸下显示网页的比例
- width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。
# css计数器
- counter-reset - 创建或者重置计数器
- counter-increment - 递增变量
- counter() 或 counters() 函数 - 将计数器的值添加到元素
# css3 2D转换
平移：transform: translate(50px,100px);当前元素向下移50px，向右移100px
旋转：transform: rotate(30deg)向右旋转30度(-180-180)
缩放：transform: scale(2,3);宽度为原来大小的两倍，高度为原来大小的3倍
歪曲：transform: skew(30deg,20deg);x方向倾斜30度，y方向倾斜20度
合并成一个同一表示：transform:matrix(0.866,0.5,-0.5,0.866,0,0);对应matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
这种转换是absolute属性的，将覆盖其他图像
# css3 3D转换
围绕给定轴旋转：transform: rotateX(120deg);
- scale3d
- scaleX
- rotate3d
- perspective
# 元素的过渡transition
设定一个状态到另一个状态的转变
transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。
transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位。
transition-timing-function: 指定过渡效果的速度曲线。它可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等等。
transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。
transition: color 0.3s ease-in-out;
# 动画
# 按钮实例
鼠标移动到按钮上后添加箭头标记: (opens new window)
点击时添加 "波纹" 效果: (opens new window)
点击时添加 "压下" 效果: (opens new window)
# css网格布局
通过相交的水平线和垂直线定义多个网格的布局系统，网格形状应是矩形，不可能创建出L形的网格区域
网格系统中为每一个线条设定了编号，可以用来指定选定的方块范围
对每个单元格设定名字，从而将元素放到指定单元格
使用多媒体可以重排指定屏幕下网格尺寸
