CSS（三）

最新推荐文章于 2021-09-07 16:02:45 发布

捷。

最新推荐文章于 2021-09-07 16:02:45 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/qq_46151129/article/details/109555238

版权

列表

作用：1.设置不同的列表项标记
2.设置列表项标记为图像
无序列表：经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，使用list-style-type:none,表示无标记。list-style-type 属性的默认值为 disc 实心圆，即小黑点。除了无标记还可以修改标记，例如circle空心圆，square实心方块。
有序列表：有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。
图像作为列表项标记要指定列表项标记的图像，可以使用 list-style-image 属性，只需要简单地设置一个 url() 值，就可以将图像作为标记类型。
列表属性简写：list-style：list-style-type，list-style-position，list-style-image;

表格

边框：border
宽度：width
高度：height
对齐：text-align和vertical-align
内边距：tr，td的padding设置

<head>
   <style>
    #tab{
         width:50%;
         font-family:"微软雅黑";
        /*设置是否将表格边框合并为单一线条的边框*/
         border-collapse:collapse;
     }
     #tab th,#tab td{
          /*表格边框*/
          border:1px solid #7AC942;
          /*表格内边距*/
          padding:5px 10px;
     }
     #tab th{
           color:white;
           background-color:#9C3;
           font-size:1.125em;
           /*左对齐*/
           text-align:left;
           padding-top:4px;
           padding-bottom:8px;
     }
     #tab .list td{
           /*边颜色*/
           color:#000;
           /*背景颜色*/
           background-color:#FFC;
     }
     caption{
           margin-bottom:10px;
           font-weight:bold;
     }
   </style>
</head>

属性选择器

属性选择器：使用[attr]，可以把所有带有title属性的元素的字体设置为蓝色

<head>
    <style>
        [title]{
            color:bule;
        }
    </style>
</head>
<body>
    <h1>h1 标题不带有 title 属性</h1>
    <h2 title="标题">h2 可以设置样式</h2>
    <a href="#" title="链接">超链接可以设置样式</a>
</body>

属性和值选择器：使用[attr=value]

<head>
    <style>
        [title=Hello]{
            color:blue;
        }
    </style>
</head>
<body>
    <h1 title="Hello world">h1 标题 title="Hello world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <a href="#" title="Hello">超链接可以设置样式</a>
</body>

属性和多个值的选择器：
属性值空格分隔：[attr~=value];
属性值用连字符分隔：[attr=value]
使用 ~ 分隔属性和值：

 <style>
        [title~=Hello]{
            color:green;
        }
        [lang|=zh]{
            color:gray;
        }
    </style>
</head>
<body>
    <h1 title="world">h1 标题 title="world"</h1>
    <h2 title="Hello">h2 可以设置样式</h2>
    <h3 title="Hello Web">h3 可以设置样式</h2>
    <a href="#" title="Hello world">超链接可以设置样式</a>
    <a href="#" lang="zh-TW">超链接可以设置样式</a>
</body>

表单样式：属性选择器在为不带有class或者id的表单设置格式时出奇有效。

<head>
    <style>
        input[type="text"]{
            width:150px;
            display:block;
            margin-bottom:5px;
            background-color:yellow;
        }
        input[type="button"]{
            width:120px;
            margin-top:5px;
            background-color:green;
        }
    </style>
</head>
<body>
    <form name="input" action="demo.php" method="get">
        用户名：<input type="text" name="user" placeholder="请输入登录名">
        昵　称：<input type="text" name="name" placeholder="请输入角色名">
        <input type="button" value="查询">
    </form>
</body>

捷。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（三）

列表作用：1.设置不同的列表项标记2.设置列表项标记为图像无序列表：经常用来做导航栏菜单，通常都需要隐藏无序列表项的标记，使用list-style-type:none,表示无标记。list-style-type 属性的默认值为 disc 实心圆，即小黑点。除了无标记还可以修改标记，例如circle空心圆，square实心方块。有序列表：有序列表项标记默认使用数字样式显示，即 list-style-type:decimal。图像作为列表项标记要指定列表项标记的图像，可以使用 list-style-i
复制链接

扫一扫