ai素材免费下载网站,自己怎么制作网页链接,做算法的网站,济宁网架公司文字样式
1.文字颜色 color
取值方式#xff1a;
英文单词 red green blue十六进制的颜色值 #000000 也可以写为#000#xff08;如aabbcc可以简写为abc#xff09;rgb三原色取值 color#xff1a;rgb(220,32,215) 取值范围都在0~255之间
2.文字大小 font-size …文字样式
1.文字颜色 color
取值方式
英文单词 red green blue十六进制的颜色值 #000000 也可以写为#000如aabbcc可以简写为abcrgb三原色取值 colorrgb(220,32,215) 取值范围都在0~255之间
2.文字大小 font-size
一般网页默认16像素 最小是0没有文字的
单位px em1em16px等
3.文字粗细 font-weight
正常不加粗的标签默认值是normal 除了h1~h6 strong等
加粗的文字bold
更粗的文字bolder
更细的文字lighter
自定义的值取整百位数100200300....900
4.字体类型 font-family
写法font-family:宋体;
常用宋体楷体微软雅黑黑体等。
引入外部字体方式 font-face {font-family: ;/* 放入外部字体种类文件地址 */src: url();} 文字效果 文字在盒子居中 line-height: 100px; 行高等于盒子高度(100px)时 字体倾斜 font-style: italic; 强制倾斜 font-style: oblique; 文字复合写法
font: 斜体 粗细 字体大小/行高 字体类型;
font: normal 900 12px/100px 宋体; 文本样式
1.文本对齐方式 text-align 居中对齐 text-align: center; 左对齐 text-align: left; 右对齐 text-align: right; 2.文本缩进 text-indent
缩进10像素
text-indent: 10px; 关于a标签 (不止a标签可以这样用 清除下划线 text-decoration: none; 下划线 text-decoration: underline; 上划线 text-decoration: overline; 中横线 text-decoration: line-through; 文本线颜色 text-decoration-color: red; 3. 文本间距 letter-spacing
设置每一个文字/字符之间的距离
letter-spacing: 5px;
设置英文单词之间的间隔
word-spacing: 5px;
4.文本溢出 white-space/overflow
文本超出宽度会默认换行显示
white-space: normal;
文本不换行显示
white-space: nowrap;
溢出隐藏
overflow: hidden;
控制文本溢出为省略号显示
text-overflow: ellipsis;
数字换行显示强制数字换行
word-wrap: break-word;
多行文本变成省略号 下面是显示在第二行有省略号 .text{/* 文字间距 */letter-spacing: 2px;display: -webkit-box;/* 超出宽度自动换行 */white-space: normal;/* 文本显示方向 */-webkit-box-orient: vertical;/* 文本显示行数 */-webkit-line-clamp: 2;overflow: hidden;font: normal 400 15px/30px 宋体;}
5.文本基线
可以使图片与文本文字对齐
与顶部基线对齐
vertical-align: top;
对齐文本基线中间
vertical-align: middle; 背景样式
1.背景颜色 background-color
background-color
2.背景图片 background-image
background-image: url(图片路径)
3.背景平铺 background-repeat
当图片小于盒子的时候默认平铺 background-repeat: no-repeat; (不平铺图片) background-repeat: repeat-x; (水平方向平铺图片) background-repeat: repeat-y; (垂直方向平铺图片) 但图片大于盒子时超出的部分会被隐藏 background-size: 100% 100%; (图片适应盒子大小 background-size:cover; (等比例铺满盒子) 4.背景大小 background-size: x y
调整时注意大小当背景图片大于盒子时超出的会被隐藏。
5.背景显示位置 background-position: x y background-position: 0px 0px; (默认左上角显示) background-position: right top; (右上角显示) background-position: center; (在中间显示 background-position: 0px 10px; x轴0图片沿y轴向下移动10px) 6.背景固定显示 background-attachment
默认为网页高度
html,body{height: 100%;}
背景图片默认跟随滚动条滚动
background-attachment:scroll;
设为固定背景不会跟随滚动条滚动
background-attachment: fixed; css精灵图
由很多个图标组合而成的一张图片
存在意义让网页运行速度变快 缓存少 请求快
在线生成精灵图https://www.toptal.com/developers/css/sprite-generator/ 背景图片和img标签的区别
背景图片不会占用内容部分img标签会背景图片大于盒子不会超出img标签会
背景样式复合写法容易写错不建议这样写
background: color url() repeat position/size attachment;
背景颜色 背景图片 背景平铺 背景位置/背景大小 背景显示 浮动 float float: right; 使盒子向右浮动可以理解成右对齐 float: left; 使盒子向左浮动可以理解成左对齐 1.div块级元素使用了浮动后可以达到重合效果也可以解决div盒子的基线对齐和空格问题。
2.图片和文字也可以使用浮动达到文字环绕图片的效果给图片设置浮动。
3.可以使行内元素支持高宽自定义上下外边距。
4.可以按照自己设置的方向进行移动。
除了这些也可以在其他地方发挥作用 清除浮动属性
父级高度坍塌父级盒子若不设置高度就是由子级盒子/内容高宽决定的但如果子级元素设置了浮动属性那么就看不到父级盒子了。
解决方式
给父级盒子设置高度在父级元素的最下边设置一个清除浮动的属性在父级元素里面设置overflow: hidden; clear: both; (左右浮动同时清除 clear: left; (清除左浮动) clear: right; (清除右浮动) overflow: hidden;可以理解为一个封闭的盒子将父级盒子包裹起来里面的元素浮动不会影响外面的。
