网站开发 招聘,响应式中文网站欣赏,萧山网站建设xsszwl,建设机械网站案例分析一、字体族 1、字体的相关样式#xff1a; ① color 用来设置字体颜色#xff08;前景颜色#xff09; ② font-size 字体的大小 和font-size相关的单位#xff1a; em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size ③ font-family 字体族#x… 一、字体族 1、字体的相关样式 ① color 用来设置字体颜色前景颜色 ② font-size 字体的大小 和font-size相关的单位 em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size ③ font-family 字体族字体的格式 指定字体的类别浏览器会自动使用该类别下的字体 可选值 serif 衬线字体 sans-serif 非衬线字体 monospace 等宽字体 font-family 可以同时指定多个字体多个字体间用逗号隔开字体生效时优先使用第一个第一个无法使用时则使用第二个以此类推。 ④ font-face 可以将服务器中的字体直接提供给用户去使用 问题加载速度慢、版权问题、字体格式 格式 font-face{ font-family /*指定字体的名字*/ scrurl /*服务器中字体的路径*/ } 二、图标字体iconfont 1、在网页中经常需要使用一些图标可以通过图片来引入图标但是图片大小本身比较大并且非常不灵活所以在使用图标时我们还可以将图标直接设置为字体然后通过font-face的形式来对字体进行引入这样我们就可以通过使用字体的形式来使用图标。 2、用法将all.css即所有图标的样式文件引入到网页中然后直接通过类名来使用图标字体: class“fas fa-bell”或者class“fab fa-accessible-icon” 其中class里面的fas或者fab都是不能修改的后面跟图标字体的名字。也可修改大小跟颜色。 3、其他用法 通过伪元素来设置图标字体① 找到要设置图标的元素通过before或者after选中 ② 在content中设置字体的编码 ③ 设置字体的样式 fab类font-family‘Font Awesome 5 Brands’ fas类font-family‘Font Awesome 5 Free’font-weight900 通过实体来使用图标字体格式 —— #x图标字体的编码 三、行高line height 1、行高指的是文字占有的实际高度。 2、可以通过line-height来设置行高行高也可以指定一个大小px em也可以直接为行高设置一个整数如果是一个整数的话行高将会是字体的指定的倍数。 3、行高经常还用来社会文字的行间距。 行间距行高-字体大小 4、字体框字体框就是字体存在的格子设置font-size实际上就是设置字体框的高度。 5、行高会在字体框中进行上下平均分配。 四、字体的简写属性 1、font 可以设置字体相关的所有属性。 语法font字体大小/行高 字体族 【中间必须空格隔开行高可以省略不写如果不写则使用默认值】 2、font-weight 字重字体的加粗 可选值normal 默认值不加粗 bold 加粗 3、font-style 字体的风格 可选值 normal 正常的 italic 斜体的 五、文本的水平和垂直对齐 1、text-align文本的水平对齐 可选值 left 左侧对齐 right 右侧对齐 center 居中对齐 justify 两端对齐 2、 vertical- align设置元素垂直对齐的方式 可选值 baseline 默认值子元素和父元素基线对齐 top 顶部对齐 bottom 底部对齐 middle 居中对齐与字母x的中点对齐 也可以设置任意数值正值向上对齐负值向下对齐 3、对于图片的垂直对齐问题也会默认跟基线对齐为了取消这种对齐方式让图片跟基线之间没有缝隙可以采用 vertical-aligntop或者vertical-alignbottom或者vertical-alignmiddle来进行设置取消图片与基线之间的缝隙。 六、其他的文本样式 1、 text-decoration设置文本修饰 可选值 none 默认值什么修饰都没有 underline 下划线 line-through 删除线 overline 上划线 2、 white-space设置网页如何处理空白 可选值 normal 默认值对空白部分不加处理 nowrap 不换行 pre 保留空白 3、 overflowhidden 对溢出内容进行裁剪 text-overflowellipsis 对溢出内容用省略号表示 七、背景 1、background-color 设置背景颜色 2、background-image 设置背景图片 语法 background-imageurl 【括号里面写图片的路径可添加双引号也可以没有双引号】 3、可以同时设置背景颜色和背景图片这样背景颜色将会成为图片的背景色。 4、如果背景图片大小小于元素的大小则背景图片会自动在元素中平铺将元素铺满。 5、如果背景图片大于元素则会有一部分背景图片无法完全显示。 6、如果背景图片和元素一样大则会直接正常显示。 7、background-repeat 用来设置背景图片的重复方式 可选值 repeat 默认值背景图片会沿着x轴、y轴双方向重复 repeat-x 沿着x轴方向重复 repeat-y 沿着y轴方向重复 no-repeat 背景图片不重复 8、background-position 用来设置背景图片的位置 设置方式① 通过 top 、left 、right 、bottom 、center 几个表示方位的词来设置背景图片的位置。使用方位词必须指定两个值如果只写一个则第二个默认是center。 ② 通过偏移量来指定背景图片的位置水平方向的偏移量 垂直方向的偏移量 9、background-clip 设置背景的范围 可选值 border-box 默认值背景只会出现在边框的下边 padding-box 背景不会出现在边框只会出现在内容区和内边距 content-box 背景只会出现在内容区 10、background-origin 背景图片的偏移量计算的原点 可选值 padding-box 默认值background-position从内边距处开始计算 content-box 背景图片的偏移量从内容区处开始计算 border-box 背景图片的变量从边框处开始计算 11、background-size 设置背景图片的大小 可选值 第一个值表示宽度 第二个值表示高度 【如果只写一个则第二个默认是auto】 cover 图片的比例不变将元素铺满 contain 图片的比例不变将图片在元素中完整显示 12、background-attachment 设置背景图片是否跟着元素移动 可选值 scroll 默认值背景图片跟随元素移动 fixed 背景图片固定在页面中不会跟随元素移动 13、background 背景相关的简写属性所有背景相关的样式都可以通过该样式来设置没有顺序要求也没有哪个属性是必须写的。 注意① background-size必须写在background-position后面并且中间用/隔开即background-position/background-size ② background-origin必须写在background-clip前面 八、按钮练习 九、雪碧图 雪碧图的使用步骤 ① 先确定要使用的图标 ② 测量图标的大小 ③ 根据测量结果创建一个元素 ④ 将雪碧图设置为元素的背景图片 ⑤ 设置一个偏移量以显示正确的图片 雪碧图的特点一次性将多个图片加载进页面降低请求的次数加快访问速度提升用户体验。 十、线性渐变 1通过渐变可以设置一些复杂的背景颜色可以实现从一个颜色向其他颜色过渡的效果 2渐变是图片需要通过background-image来设置 3线性渐变【 linear-gradient】颜色沿着一条直线发生变化 语法 background-imagelinear-gradient方向颜色1 颜色2 例如 linear-gradientredyellow 表示红色在开头黄色在结尾中间是过渡区域 线性渐变的开头我们可以指定一个渐变的方向 to left 向左渐变 to right 向右渐变 to bottom 向下渐变 to top 向上渐变 xxxdeg deg表示度数 xxxturn turn表示圈 4渐变可以同时指定多个颜色多个颜色默认情况下平均分布也可以手动指定渐变的分布情况颜色后面加入像素即可。 5repeating-linear-gradient 可以平铺的线性渐变 十一、径向渐变 1radial-gradient 径向渐变放射性的效果 2默认情况下径向渐变的形状根据元素的形状来计算 正方形——圆形 长方形——椭圆形 也可以手动指定渐变的位置语法 radial-gradient大小 at 位置颜色1 位置颜色2 位置······ 【注大小、位置可省略不写】 其中① 大小的可选值 circle 圆形 ellipse 椭圆形 closest-side 距离原点最近的边近边 closest-corner 距离原点最近的角近角 farthest-side 远边 farthest-corner 远角 ② 位置的可选值top right left center bottom 本文分享就到这里欢迎大家一同讨论学习下一篇跟大家补充一下HTML的表格和表单的内容。
