css文本样式--记录html

通过文本的属性我们可以指定很多东西:文本如何对齐,对文本进行缩进等等。
缩进
<p style="text-indent: 2em">(相对值)推荐使用
“1em”:就是这个字有多宽
或者:
<p style="text-indent: 50%">(相对值)
<p style="text-indent: 2in">inch(绝对值;绝对值在不同的浏览器并不一定一样)
<p style="text-indent: 2cm">(绝对值)
类似悬挂:
<p style="text-indent: -2em; padding: 2em">
行高:
<p style="text-indent: 2em; line-height: 2em">=
<p style="text-indent: 2em; line-height: 2">(行高只看数字)
<p style="text-indent: 2em; line-height: normal">正常间距
也可以指定对其方式:
<p style="text-indent: 2em; text-align:left">向左对齐
<p style="text-align: center;">中间对齐
字母之间的间隔:
<style="word-spacing:30px">(对英文有用)
字符之间的间隔
<style="letter-spacing:10px">
大写
<style="text-transform:uppecase;">
小写
<style="text-transform:lowercase;">
首字母大写
<style="text-transform:capitalize;">
上划线/下划线/删除线
<style="text-decoration:underline overline line-through">
关于空格
<style="white-space:normal">默认
<style="white-space:pre">承认你编辑时的空格和回车,而且不会随着窗口的大小而自动适应换行
<style="white-space:pre-wrap">这样就可以自动卷绕了
<style="white-space:nowrap">没有卷绕
<style="white-space:pre-line">合并空白,保留换行
右到左显示
<style="direction:rtl">(rtl=right to left)
字体
<style="font-family:serif">
矢量字体,线条是有粗细的,等比例放大,上下两端是有小横线的(大多数使用的)
<style="font-family:sans-serif">(上下两端不带小横线)
上面带有小横线
上面是带有小横线的,下面是不带有小横线的
<style="font-family:monospace">等宽(用来写代码的,表达终端输出的)
<style="font-family:cursive">类似手写
效果如下图的上面那行:(不同的浏览器效果不同)
在这里插入图片描述
<style="font-family:fantasy">另外一种字体形式

在这里插入图片描述
如果第一种字体不可以就第二种,第二种不可以就第三种…
字体倾斜
<style="font-style:italic">
<style="font-style:oblique">
区别是:一个是厂家做好的斜体,一个是浏览器计算产生的斜体,不同的浏览器有不同的效果
<style="font-variant:small-caps;">小的大写字母,如下图:
在这里插入图片描述
<style="font-weight:bold;>加粗;
<style="font-weight:700;>数字可以根据情况更改
<style="font-size:2em;>设置字体大小(推荐)
<style="font-size:10px;>也可以设置绝对的字体大小,但是还是推荐em,因为不是所有的浏览器都支持绝对的这个值
<style="text-shadow:3px 5px 5px rgba(0,250,0,0.5)";>文字阴影,四个值依次是:x轴,y轴,阴影范围,颜色,效果如下:在这里插入图片描述
当然根据自己对于这四个值的调配,可是有很多效果
例如:<style="text-shadow: 0px -1px 0px #000000,0px 1px 3px #606060;color: #606060">
效果是不是有点像刻进去的:
在这里插入图片描述

style="outline-color: red;outline-style: solid;outline-width:1"

边框,要指定三样:颜色、外面的线形(dotted点点的)(dashed 划线型的)(double有两条线)(groove凹进去的,凹槽)(ridge凸槽)(inset凹的边)(outset凸的边)、线的宽度

猜你喜欢

转载自blog.csdn.net/weixin_43788566/article/details/84842740