HTML基础—1样式表和border

小灰灰 2022-01-10 07:34 217阅读 0赞

### 1.样式表 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

>    默认 < 类型 < class < id < style(行间) < !important  
> 
>     通用选择器（*） < 元素(类型)选择器 < 类选择器（class）） < 属性选择器 < 伪类 < ID 选择器 < 内联样式（style行间）< !important

###  2.border ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

边框的组成

![20190621100633720.png][]

边框的方向

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

边框的特征：非矩形

使用下列方式可以实现一个向下的三角形

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
              width: 0px;
              height: 0px;
              border: 10px solid #fff;
              border-top-color: #cccccc; /* 向下的箭头 */
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

![20190621101727209.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220109/5ec0beaca24047d2b96f721a1a405fc8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220109/3389d0de69074d6e9f89df5d650f38ca.png
[20190621100633720.png]: /images/20220109/8df7aba81b44472fb384bd9d354dffd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220109/20d0e6d140d54ce7a5c021418c10a6a0.png
[20190621101727209.png]: /images/20220109/2800c155d3db45459479028f34b49481.png