属性选择器（常用）

属性选择器：eg：a[]{}

要设置块大小

先浮动

在分为块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;/*浮动*/ /**/
            display: block;/*将元素显示为块级元素,未加则对a设置宽高是没有用的，而且内容都处于同一行*/
            height: 50px;
            width: 50px;
            border-radius: 10px;/*设置圆角*/
            background: #9055d7;
            text-align: center;/*规定属性排在文本中间*/
            color: #cb1c1c;
            text-decoration: none;/*无文本修饰*/
            margin-right: 5px;/*右边距的宽度*/
            font:bold 20px/50px Arial;/*字体的大小/行高，当行高与高度一致是自动居中*/
        }
        /*
        a[]{}推荐用这种
        */
        /*    =,写死了，两边相等   */
        a[id=ip]{
            background: #64c62f;
        }
        /*    *=，包含有这个元素。*/
        a[id*=ip]{
            background: black;
        }
        /*    ^=,以http开头的元素。*/
        a[href^=http]{
            background: aqua;
        }
        /*    $=,以lin结尾的元素*/
        a[class$=lin]{
            background: blue;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com"class="huang first lin"id="ip">1</a>
    <a href="style.css"class="huang lin">2</a>
    <a href=""id="ly">3</a>
    <a href="层次选择器.html"class="lin" id="ip lu">4</a>
    <a href="层次选择器.html"class="lin">5</a>
    <a href="层次选择器.html"class="last lin">6</a>
</p>
</body>
</html>

text-decoration可能的值如下：

1、none：默认。定义标准的文本。

2、underline：定义文本下的一条线。

3、overline：定义文本上的一条线。

4、line-through：定义穿过文本下的一条线。

5、blink：定义闪烁的文本。

6、inherit：规定应该从父元素继承 text-decoration 属性的值。

text-align 属性规定HTML元素中的文本的水平对齐方式：

1、center ：就是把HTML元素中的文本排列到中间的意思。

2、left ：就是把HTML元素中的文本排列到左边的意思。

3、right：就是把HTML元素中的文本排列到右边的意思。

4、justify：实现两端对齐文本效果。

5、inherit ：规定应该从父元素继承 text-align 属性的值。

posted on 2022-07-10 00:19 阿霖找BUG 阅读(63) 评论(0) 收藏举报