前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用

一、字体样式（font）

font-style 【用于打开和关闭斜体文本】
• normal 正常字体，关闭斜体
• italic 斜体
• oblique 模拟斜体
font-weight 【为字体设置粗细程度】
• normal 正常
• bold 加粗字体
• lighter 设置当前元素字体比父元素更细
• bolder 设置当前元素字体比父元素更粗
• 100–900 数值类型的粗细程度（值越大字体越粗）
text-align【水平对齐方式】
• left
• right
• center
• 设置行高进行垂直居中一行文本，line-height的值等于容器的高度
text-transform 【允许字体改变】
• none 防止任何改变
• uppercase 将文本转换为大写
• lowercase 将文本转换为小写
• capitalize 将所有单词第一个字母转换为大写
• full-width 转换为类似于一个等宽字体
text-decoration 【设置或者取消文本修饰】
• none 取消所有文本修饰
• underline 为文本添加下划线
• overline 为文本添加上划线
• line-through 为文本添加删除线
text-decoration-style【修饰线的样式】
• dashed 虚线
• dotted 点状线
• double 双实线
• wavy 波浪线
• solid 实线
text-shadow 【设置或者取消文本阴影】
语法： text-shadow: h-shadow v-shadow blur color;
• none 取消所有阴影
• h-shadow 必需。水平阴影的位置。允许负值。
• v-shadow 必需。垂直阴影的位置。允许负值。
• blur 可选。模糊的距离。
• color 可选。阴影的颜色。

二、list（列表样式）

list-style-type【设置列表项标志类型】
• none 无
• disc 小黑点（默认的）
• circle 空心圆
• square 实心方形
• decimal 数值，小于10的不补0
• lower-roman 小写罗马数字，E.g. i, ii, iii, iv, v…
• upper-roman 大写罗马数字，E.g. I, II, III, IV, V…
• decimal-leading-zero : 数值，小于10的补0，E.g. 01, 02, 03, … 98, 99
list-style-position 【设置列表项标志出现的位置】
• outside 列表项标志出现在主块框的外部
• inside 列表项标志出现在主块框的内部
list-style-image 【自定义设置列表项标志】
• url() 指定图标位置
list-style 列【表样式的速记写法】
• <type> <image> <position>

三、cursor（调整光标悬浮到链接上的时候光标的形状）

pointer 手型
crosshair十字交叉
wait 等待
help 帮助
move 移动…
default箭头
auto默认，浏览器设置的光标
text文本
方向键
右，东
cursor: e-resize;
左，西
cursor: w-resize;
上，北
cursor: n-resize;
下，南
cursor: s-resize;
右下,东南
cursor: se-resize;
右上，东北
cursor: ne-resize;
左下，西南
cursor: sw-resize;
左上，西北
cursor: nw-resize;

四、 outline 【调整环绕链接的框】
• 类似border,但是不占据屏幕空间

五、其他样式

display 显示方式
• inline 行内显示，宽高无效
• block 块级显示，宽高有效
• inline-block 行内显示同时宽高有效
• none 不显示，不占据屏幕空间
visibility 显示与隐藏
• hidden 隐藏，占据屏幕空间
• visible 显示
opacity 透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间
overflow 溢出处理
• hidden 超出内容隐藏
• auto 超出产生滚动条
• scroll 滚动条

六、盒子模型【文档中的每个元素都可以被看作是一个矩形盒子】

• width & height 用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。
• padding 内间距代表内容盒子的外边界与外边框的内边界之间的距离
• border 设定介于padding的外边缘与 margin的内边缘之间，默认值为0
• margin 外边距代表盒子四周的区域。设值方法与padding类似。相邻元素的边距会合并（margin collapsing ）

默认盒子模型 W3C盒子【使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。】
• width 属性仅表示盒子内容所占的宽度
• height 属性仅表示盒子内容所占的高度
边框盒子模型 IE盒子【使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。】
• width = width + padding-left + padding-right + border-left + border-right

前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用相关推荐

前端一HTML:八:css中与文本相关的属性
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
前端学习-DOM：清空输入框，输入框内容的显示与隐藏，双色球（获取不重复的随机数）
1.清空输入框 <style>div {position: relative;width: 180px;}span {display: none;position: absolute;ri ...
保安日记：前端学习第八篇之HTML5
前端学习第八篇 HTML5新特性 HTML5的新增特性主要是增加了一些新的标签.新的表单以及表单属性等.这些新特性都有兼容性问题,基本上是IE9+以上版本的浏览器才支持新增语义化标签: < h ...
寒假中前端学习归档html/css
寒假中前端学习归档html/css 001blog: <!DOCTYPE html> <html><head><meta charset="utf- ...
个人前端学习笔记 html5+css（保持更新）
2022年7月5日 HTML基础知识一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...
小白前端学习日记（一）认识前端
小白前端学习日记系列小白前端学习日记(二)HTML基础语法与标签小白前端学习日记(一)认识前端小白前端学习日记系列前言前端是什么前端所需要掌握的基本能力结构层--HTML 样式层--CS ...
【前端学习日记】利用reveal.js把实验报告做成一个简单的幻灯片
一.整体效果把电磁场的实验报告做成网页PPT,原文是这里:<[电磁场实验作业]有限差分法(FDM)求解静电场电位分布_轩辕衍的博客-CSDN博客> 二.核心代码讲解 0.创建页面第一篇 ...
css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
html中选择字体的元素,深入探讨CSS中字体元素
深入探讨CSS中字体元素更新时间:2006年09月25日 00:00:00 作者: 字体的处理在网页设计中无论怎么强调也不为过,毕竟网页使用来传递信息的,而最经典最直接的信息传递方式就是文字,所 ...

前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用

前端学习日记（八）：css中字体、列表、鼠标形状、显示与隐藏、溢出处理、盒子模型的简单应用相关推荐

最新文章

热门文章