前端：CSS/10/伪类选择器，CSS列表属性，CSS边框属性，CSS内边距属性，CSS背景属性

最新推荐文章于 2024-08-01 16:25:07 发布

浅香沉木

最新推荐文章于 2024-08-01 16:25:07 发布

阅读量313

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Java_53/article/details/105655861

版权

CSS伪类选择器：给超链接加的样式（链接的不同状态加样式）

一个超链接，有四个状态；
正常状态（:link）：鼠标没放上去之前的样式；
放上状态（:hover）：鼠标放到链接上时的样式；
激活状态（:active）：按下后，按住鼠标的时候的样式；
访问过的状态（:visited）：按下鼠标左键，弹起后的样式；
在平常工作中，会使用以下写法，来给链接加不同的样式：
a:link, a:visited{color:#444; text-decoration:none;}//将“正常状态”和“访问过的状态”合二为一，即使用相同的样式；
a:hover{color:#990000; text-decoration:underline;}//"鼠标放上"单做一种效果；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS层叠样式表</title>
    <style>
        /* 为HTML文件添加样式通常遵循：标记的基础样式 > 部分模块不同的样式 > 个别标记特殊的样式 */
        .box {
            /* 使用了“.”开头的类选择器 */
            width: 600px;
            border: 1px solid #333;
            /* 边框：1像素 实线 十六进制下的一种颜色 */
            padding: 20px;
            /* padding同时给四个边加内填充 */

        }

        /* 使用组合选择器中的后代选择器选择 */
        .box a:link,
        .box a:visited

        /* box类所有后代中<a>的正常状态和box类所有后代中<a>的访问过后状态 */
            {
            color: "#007FFF";
            text-decoration: none;
        }

        /* 超链接统一基础样式 */
        .box a:hover {
            color: red;
            text-decoration: underline;
        }

        /*使用组合选择器中的后代选择器选择 
        a.a1是指给class=a1的<a>元素添加样式
a.a1:link //给class=a1的<a>元素的正常状态，添加样式
 */
        .box a.a1:link,
        .box a.a1:visited {
            color: aqua;
            font-size: 24px;
            background-color: #FFFF33
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#">网站首页</a> |
        <a href="#">公司简介</a> |
        <a href="#" class="a1">新闻动态</a> |
        <a href="#">产品中心</a> |
        <a href="#" class="a1">最新发布</a> |
        <a href="#">在线留言</a>
    </div>
</body>

</html>

显示效果如下：

图片中鼠标放在了网站首页（未点击）

CSS列表属性

list-style属性，取值：none;去除前面的符号（系统默认的样式太普通了）；

CSS边框属性：每个元素都可以加边框线

border-left :左边框线
语法格式：border-left:粗细线型线的颜色;
线型有：none(无线),solid(实线),dashed(虚线),dotted(点状线)
例：border-left :2px dashed red;
border-right :右边框线；border-top :上边框线；border-bottom :下边框线；这些边框线的语法格式及取值与border-left（左边框线）相似；
border :边框线（左右，顶部，底部同时加边框线）

CSS内边距属性

注意：平常我们所说的width和height属性，它们指内容的宽度和高度，不包含内，外边距和边框线；
padding-left :左内填充距离，左边线到内容间的距离；
padding-right :右内填充距离，右边线到内容间的距离；
padding-top :顶部内填充距离，上边线到内容间的距离；
padding-bottom :下内填充距离，下边线到内容间的距离；
padding(缩写形式)，顺序规定为“顶右底左”
例：padding:10;//四个边的内填充都为10px;
padding:10px 20px;//上下为10px，左右为20px;
padding:5px 10px 20px;//顶部为5px，左右为10px，底部为20px;
padding:5px 10px 15px 20px;//顶部为5px,右为15px,底部为15px,左为20px;

CSS背景属性

background-color :背景颜色；
background-image :背景图片；例：background-image:url(images/righttitle.gif);
background-repeat:背景平铺方式。取值：no-repeat（不平铺）,repeat(水平方向平铺)，repeat-y(垂直方向平铺)
background-position :背景定位，格式：background:水平方向定位垂直方向定位;
        用英文单词定位：background-position:left|center|right top|center|bottom;
        用固定值定位：background-position:50px 50px;//背景距离容器的左边50px,容器顶端50px;
        用百分比定位：background-position:50% 50%;//水平居中，垂直居中；
        用混合定位：background-position:left 10px;//背景靠左边齐，距离容器顶端10px。
(简写)background: 背景色背景图平铺方式定位方式；
举例：background:url(images/bg.gif) no-repeat center center;
举例：background:#ccc url(imgaes/bg.gif) no-repeat left 10px;