css和html的结合方式
行内样式 内部样式【内嵌样式】 <style type="text/css"> 选择器 </style> 外部样式 【连接样式】 <link href="外部css文件路径" type="text/css" rel="stylesheet" /> type：当前文件的类型，格式：大类型/小类型 text/css:css text/javascript:javascript image/png:png图片 rel="stylesheet"：rel===>relation关系， 指的是加载的外部的css文件和当前html文件之间的关系， css是一个样式表，主要是为了给html设置样式 【导入样式】 <style> @import url("外部css文件路径")； </style>css选择器
通配符选择器 *{}：给当前html文件中所有的html标签都会设置为统一的样式 使用场景：一般统一设置padding【内边距】和margin【外边距】 元素选择器 标签名称{}：只对指定类型的标签设置统一的样式 id选择器 id属性的值{} class选择器 .class属性的值 优先级：id选择器【权重：100】 > class选择器【权重：10】 > 元素选择器【权重：1】 > 通配符选择器 包含选择器 先辈选择器 后辈选择器{ }，包含父子标签 父选择器 > 子选择器{ } 兄弟选择器 选择器1 + 选择器2：只匹配指定标签后面的一个兄弟标签 选择器1 + 选择器2：只匹配指定标签后面的一个兄弟标签 伪类选择器 选择器：hover{ }，鼠标悬浮设置 选择器：before/after，添加头部/尾部 选择器：first-letter{ }，设置第一个字符 选择器：first-line{ }，设置第一行 结构选择器 选择器：first-child{ }，设置匹配到所有标签中的第一个 选择器：last-child{ }，设置匹配到的所有标签中的最后一个 选择器：nth-child ( n ) { }，设置顺序匹配到的第n个标签 选择器：nth-last-child ( n ) { }，设置倒序匹配到的第n个标签 选择器：empty{ }，匹配文本内容为空的标签 选择器：not ( 选择器 ){ }，设置除指定标签之外的其他标签 属性选择器 选择器[ 属性 ]{ }，设置具有指定属性的标签 选择器[ 属性=值 ]{ }，设置指定属性为指定值的标签 组合选择器 选择器1，选择器2，选择器3......{ }，设置所有选择器匹配到的标签权重
行内样式的权重：1000 id选择器的权重：100 class选择器的权重：10 标签名称选择器的权重：1 包含或者组合选择器的权重：基本选择器的权重之和css的属性
字体属性
font-family：设置字体类型 font-size：设置字体大小 px：表示像素，与分辨率有关，表达字体大小， 但是，缩放的时候不建议使用 em：自动适应尺寸，方便字体的放大和缩小， 1em = 16px font-style：设置是否倾斜 normal正常，italic意大利体，oblique斜体 font-weight：设置字体粗细，取值范围为100~900 normal，bold粗体，bolder加粗体，lighter细体文本属性
text-decoration：设置文字的装饰效果 none正常显示，underliine下划线，line-throufh删除线， overline顶线 text-indent：段落缩进，中文中常用2em text-align：对齐方式 left左对齐( 默认 )，right右对齐，center居中对齐，justify两端对齐 letter-spacing：设置单词内部的字母间距 word-spacing：设置单词之间的间距 text-transform：变化，大小写转换 none，capitalize每个单词的首字母大写，uppercase大写 lowercase小写 direction：文本方向( 段落反向 ) ltr从左到右( 默认 )，rtl，从右到左 text-shadow：设置文本阴影，参数：水平阴影 垂直阴影 模糊距离 颜色 word-wrap设置文字换行【允许对长单词进行拆分，并换行到下一行】 none，break-word根据单词换行 overflow：设置当文本溢出包含元素的时候需要做的操作 hidden：隐藏，内容会被修剪，并且内容不可见 scroll：内容会被修剪，但是如果超出标签的范围，则出现滚动条 auto：自适应，根据情况而定 visible：默认值，内容不会被修剪，会呈现在元素框外面 cursor：设置游标的样式 default:默认样式【箭头】 auto：默认，浏览器的默认的样式s crosshair:十字线 pointer：一只手 move：指示某个对象可以被移动 text；文本 wait：指示程序正在忙【一只表或者沙漏】 help：可用的帮助【一个问号或者一个气球】盒子属性
边框属性 border，设置边框，参数：宽度 样式 颜色 border-top，border-bottom，border-left，border-right border-width：边框宽度 border-style：边框样式 dotted点画线，dashed虚线，solid实线，double双线 border-color：边框颜色 border-radius：边框削圆角 同时设置四个边框：选择器{ 属性：值( 上 ) 值( 下 ) 值( 左 ) 值( 右 ) } 内边距：一个元素内部的文本距离该元素边界的距离 padding：内边距，参数为距离 padding-left，padding-right，padding-top，padding-bottom 外边距：标签之间的距离，子标签相对于父标签的边距被称为外边距 margin：外边距，子标签相对于父标签的边距 margin-left，margin-right，margin-top，margin-bottom浮动属性
float：设置浮动效果 left向左浮动，right向右浮动，clear清除浮动，取值一般为right或者left定位属性
position设置定位 absolute：绝对定位，参照物为父标签， relative：相对定位，参照物为标签本身 fixed：固定定位，参照物为窗口尺寸属性
width：设置元素的高度 height：设置元素的高度 line-height：【注意：如果行高和标签的高度相等， 则表示该文本在标签中在垂直方向上居中显示】 max/min-height：设置元素的最大或者最小高度 max/min-width：设置元素的最大或者最小宽度 注意：可以使用px或者百分比，还可以使用auto 说明：max/min-xxx使用较少，一般情况下，会让文本自适应背景属性
background：背景色/图 background-color：背景色 background-image：背景图 background-repeat：背景样式平铺样式 repeat：沿水平和垂直两个方向平铺，默认值 no-repeat：不平铺，只显示一次 repeat-x：只沿水平方向平铺 repeat-y：只沿垂直方向平铺 background-position：背景图像的位置 left、right、top、bottom、center background-attachment：设置背景图是否随着网页内容一起滚动 scroll：会随着滚动，默认值 fixed：不随着滚动列表属性
list-style：设置项目符号的样式，参数：图片 位置 list-style：none list-style-image：设置项目符号的图片 list-style-position：设置项目符号的位置 inside：里面 outside：外面连接属性
链接的四种状态： link：普通的，未被访问的状态 visited：用户已访问过的链接 hover：鼠标指针停留在链接的上方 active：链接被点击的时刻透明度属性
opacity：设置透明度，能够设置的值从 0.0 到 1.0，值越小，越透明显示属性
display：标签的显示状态 block：块级标签， 特点：可以独占一行 ，可以设置宽高以及内外边距， 如果不设置宽，默认和父标签的宽相等， 高度是随着内容自适应的，例如：div p li h1 inline：行内标签， 特点：不会自动换行，宽高随着内容自适应， 设置宽高和内外边距属性无效，例如：b a span， 设置这个属性，可以将一个块级元素转换成行内元素， 那么这个块级元素将不能再设置宽高以及内外边距 inline-block：行内块级标签， 特点：不但具有block元素可以设置宽高和内外边距属性的 特性，又保持了inline元素不换行的特性 none：隐藏状态， 特点：将元素设置为none的时候既不会占据空间，也无法显示， 相当于该元素不存在;该属性可以用来改善重排与重绘形变属性：transform
拉伸： scale ( v )，宽高同时拉伸，v大于1，表示放大，v在0~1之间，表示缩小 scaleX ( v )，只拉伸宽 scaleY ( v )，只拉伸高 设置旋转点： transform-origin：center left； 旋转： rotate ( ndeg )：degree，表示角度，默认沿着z轴旋转 rotateX ( ndeg ) rotateY( ndeg ) rotateZ( ndeg ) n大于0，则顺时针旋转 n小于0，则逆时针旋转过渡属性：transition
all ( 过渡属性 ) 5s ( 过渡时间 ) 2s ( 延迟时间，一般不写 ) linear ( 匀速过渡 ) 确定哪些属性需要过渡，如果都需要直接赋值all 如果部分过渡，则书写指定的属性，如：transform动画属性：animation
动画是使元素从一种样式逐渐变化为另一种样式的效果。 可以改变任意多的样式任意多的次数。 使用百分比规定变化发生的时间，或用关键词 "from" 和 "to"， 等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。 动画名称 ,自定义,但是，该动画需要手动实现 动画执行一次的时间 ，单位为秒 动画执行的次数，正数表示指定的次数，默认为1次，用infinite表示无限次 动画执行的形式： 线性动画：linear 由快到慢：ease <style> div{ animation：ani 3s infinite linear； } @keyframes ani{ from{ } to{ } } <style>