CSS边框样式

border-style:边框样式

  • none:无边框

  • solid:实线

  • dashed:虚线

  • dotted:点线

  • double:双线

border-width:边框大小

border-color:边框颜色

利用边框绘制三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        /* transparent 为透明色 */
        div{
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid black;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }
    </style>
</head>
    <body>
        <div></div>
    </body>
</html>

CSS文字样式

font-family:字体类型

  • 英文字体:Arial、'Times New Roman'……

  • 中文字体:微软雅黑、宋体、楷体……

  • 衬线体:Times New Roman、Georgia、宋体……

  • 非衬线体:Verdana、Arial、黑体……

  • ps:字体中有空格时,需要用引号引起

font-size:字体大小

  • 具体数值:单位px

  • xx-small:最小

  • x-small:较小

  • small:小

  • medium:正常(默认值16px)

  • large:大

  • x-large:较大

  • xx-large:最大

  • ps:单词形式的字体大小设置不推荐使用

  • ps:字体大小一般为偶数

font-weight:字体粗细

  • normal:正常(默认值)

  • bord:加粗

  • border:更粗

  • lighter:更细

  • 具体数值:范围100-900

  • ps:100-900显示为正常样式,600-900显示为加粗样式

  • ps:400 等同于 normal,而 700 等同于 bold

font-style:字体样式

  • normal:正常(默认值)

  • italic:斜体

color:字体颜色

CSS段落样式

text-decoration:文本修饰

  • none:不添加任何装饰(默认值)

  • underline:下划线

  • overline:上划线

  • line-through:删除线

  • ps:可同时添加多个文本修饰

text-transform:文本大小写(针对英文)

  • none:正常(默认值)

  • capitalize:首字母大写

  • uppercase:大写

  • lowercase:小写

text-indent:文本缩进

text-align:文本对齐方式

  • left:左对齐(默认值)

  • right:右对齐

  • center:居中

  • justify:两端对齐

line-height:定义行高

letter-spacing:定义字间距

word-spacing:定义词间距(针对英文)

不起眼的小广告