CSS——样式

一、表格样式!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style table{ /* 1设置表格宽高 */ width: 300px; height: 200px; /* 2设置实线边框 */ border: 1px solid black; /* 3设置单边框 */ /* 如果设置了边框合并则border-spacing自动失效 */ border-collapse: collapse; border-spacing: 0; } th,td{ border: 1px solid palegreen; } /* 4设置隔行变色 */ tr:nth-child(even){ background-color: chocolate; } /* 5设置鼠标移入tr后变色 */ tr:hover{ background-color: aqua; } td{ /* 6设置文本水平居中 */ text-align: center; /* 7设置文本垂直居中 */ vertical-align: middle; } /style /head body table tr !-- th表头标题有加粗的默认样式 -- th学号/th th姓名/th th性别/th th住址/th /tr tr td1/td td孙悟空/td td男/td td花果山/td /tr tr td2/td td猪八戒/td td男/td td高老庄/td /tr tr td3/td td沙和尚/td td男/td td流沙河/td /tr /table /body /html二、长度单位一固定单位不会随着其他的条件而变化像素 px: 1个像素其实就是1个发光的小元件正常情况下像素是无法看到可以放大可观察到二相对单位会随着一定的条件变化大小发生变化1、百分比 %会随着父元素的大小变化而变化2、em会随着当前元素字体大小的变化而变化,当前元素如果没有字体大小则会继承祖先元素直到继承html根标签根标签默认的字体大小是16px3、remroot 只会随着根标签字体大小的变化而变化4、vwviewport width会随着视口的宽度变化而变化视口的宽度100vw5、vhviewport height会随着视口的高度变化而变化视口的高度100vh以上相对单位remvwvh参考标准都是唯一的。所以后期我们开发移动端主要用这些单位三、颜色单位1、直接用颜色的英语单词表示用的不多2、RGBrgb(redgreenblue)rgb值在0-255之间一般直接用取色器吸取颜色浓度3、RGBArgba(reagreenbluealpha)alpha:透明度值在0-1之间0表示透明1表示不透明4、使用十六进制的rgb值来表示颜色原理和上边RGB原理一样如果颜色浓度两两重复可以简写一位#ffffff——白色简写#fff #000000——黑色简写#000#ff0000——红色简写#f00 #00ff00——绿色简写#0f0#0000ff——蓝色简写#00f #f0f0f0不能简写四、字体样式1、color设置字体颜色也可以设置其他颜色2、font-size设置字体大小3、font-family设置指定字体字体分类在网页中将字体分成5大类serif 衬线字体sans-serif非衬线字体monospace 等宽字体cursive [kə:siv]草书字体fantasy [fæntəsi]虚幻字体将字体设置为这些大的分类以后浏览器会自动选择指定的字体并应用样式一般会将字体的大分类指定为font-family中的最后一个字体 ,用来兜底4、font-face自定义字体类型使用步骤!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style /*第一步 自定义字体类型 */ font-face { /* font-family: ;写入你给自定义字体类型起的名字 */ font-family: simyou; /* src: url();自定义字体文件的路径 */ src: url(./字体类型/SIMYOU.TTF); } /* 第二步使用自定义字体类型 */ div { font-family: simyou; } /style /head body p夭韩承易重生皇司。\/p /body /html5、font-style设置文字类型可选值italic、oblique 斜体 normal 正常显示可用来清除样式6、font-weight设置字体粗细可选值bold、bolder 加粗 normal 正常显示值在100-900之间100表示最细900表示最粗7、font简写可以同时设置字体大小类型是否斜体是否加粗条件一必须要设置字体大小和类型条件二字体大小必须在倒数第二位字体类型必须在倒数第一位font: 900 italic 30px monospace;六、行间距1、行高line-height文字占有的实际高度可选值1xx长度单位eg60px2数值:字体大小的倍数如果当前没有字体大小继承祖先元素的直到继承根标签html的3百分比用的不多作用1设置文本与文本之间的行间距值越大间距越大2设置单行文本的垂直居中设置行高跟元素高度一致2、font简写可以指定行高font:字体大小/行高 字体类型;font: 20px/1.5 serif;七、文本样式1、设置文本阴影效果text-shadow: h-shadow v-shadow blur color;h-shadow :阴影的水平位移距离正值向右移动负值向左移动必选v-shadow :阴影的垂直位移距离正值向下移动负值向上移动必选blur 阴影的模糊半径值越大越模糊可选,默认是0color阴影的颜色可选默认是字体颜色2、设置盒阴影效果box-shadow: h-shadow v-shadow blur color;h-shadow :阴影的水平位移距离正值向右移动负值向左移动 必选v-shadow :阴影的垂直位移距离正值向下移动负值向上移动 必选blur 阴影的模糊半径值越大越模糊 可选,默认是0color阴影的颜色 可选默认是字体颜色.box:hover { /* 将h-shadow和v-shadow设置为0就是四周阴影 */ box-shadow: 0px 0px 20px #6c6b6b; /* 过渡让样式变化缓慢进行 */ transition: 1s; }3、设置文本的修饰线text-decoration可选值none 没有修饰线文本正常显示underline下划线overline上划线line-through删除线4、指定字符间距letter-spacing5、设置单词之间的距离word-spacing6、设置文本的对齐方式text-align可选值left默认值 靠左对齐center 居中对齐right 靠右对齐前提文本一定是有移动的空间7、设置首行缩进text-indent正值向右移动负值向左移动拓展作用隐藏元素设置一个比较大的负值8、设置是否换行white-space/* 不可换行 */ white-space: nowrap;9、裁剪多余内容overflow: hidden;10、设置文本溢出形式text-overflow/* 多余文本以省略号出现设置单行文本省略号 */ text-overflow: ellipsis;11、将元素转成表格单元格显示display: table-cell;12、定位position: sticky;元素需要设置 top、bottom、left 或 right 中的至少一个属性来指定固定的位置。当滚动到元素距离指定位置还有相应像素时元素就会固定在该位置直到滚动离开该范围。