ASP.NET程序设计教程6---CSS级联样式表(2)

最新推荐文章于 2024-09-21 16:56:47 发布

cc邦彦

最新推荐文章于 2024-09-21 16:56:47 发布

阅读量861

点赞数 1

分类专栏： ASP.NET教程文章标签： asp.net C# 盒模型 box 特效

本文链接：https://blog.csdn.net/weixin_43981402/article/details/97618719

版权

ASP.NET教程专栏收录该内容

7 篇文章 6 订阅

订阅专栏

接第五讲。
(4)属性选择器
属性选择器可以根据元素是否具有某个属性或属性是否具有某个特定值来决定是否对其应用指定的样式。下面以一个代码例子来讲解属性选择器的使用：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html";charset = "utf-8" />
    <title>属性选择器示例</title>
    <meta charset = "utf-8" />
    <style type = "text/css">
           li{list-style:none}
           a[href $= "docx"]
           {
               background:url(word.jpg) no-repeat left center;
               padding-left:25px;
               line-height:36px;
               font-family:黑体;
               font-size:26px;
           }
           a[href $= "pptx"]
           {
               background:url(ppt.jpg) no-repeat left center;
               padding-left:25px;
               line-height:36px;
               font-family:楷体;
               font-size:26px;
           }
           [id = "exp1"] {background-color:Gray}
           [id *= "exp"] {color:Red}
           [id ^= "sub"] {font-size:24px}
           [id $= "-2"] {font-style:italic;line-height:40px;color:Black}
    </style>
</head>
<body>
    <h1>属性选择器</h1>
    <nav id = "exp1">示例文本exp1
        <ul>
            <li><a href="Word.docx">Word文档</a></li>
            <li><a href="PPT.pptx">PPT演示文稿</a></li>
        </ul>
    </nav>
    <div id = "exp2">示例文本exp2</div>
    <div id = "subexp2-1">示例文本sub_exp2-1</div>
    <div id = "subexp2-2">示例文本sub_exp2-2</div>
</body>
</html>

运行结果如图1所示。

图1 属性选择器示例抠出几段代码进行讲解：

a[href $= "docx"]
{
    background:url(word.jpg) no-repeat left center;
    padding-left:25px;
    line-height:36px;
    font-family:黑体;
    font-size:26px;
}

上述代码表示<a>标记中带有href属性，且href属性值以docx结尾应该用该样式(图标、字体、字号等等)进行设置。同理可以设置以pptx结尾的<a>标记样式。接下来，看下列的代码：

[id = "exp1"] {background-color:Gray}
[id *= "exp"] {color:Red}
[id ^= "sub"] {font-size:24px}
[id $= "-2"] {font-style:italic;line-height:40px;color:Black}

第一行，id属性值等于exp1的标记使用该样式进行设置，背景色为灰色。
第二行，id属性值中包含exp的标记使用该样式设置，以红色显示。
第三行，id属性值中以sub开头的标记使用该样式设置，字体大小为24。
第四行，id属性值以-2为结尾的标记使用该样式设置，斜体，行高40px，黑色。
从图1中的显示效果可以知道，如果出现多种样式冲突(比如即包含exp，又以-2结尾)，浏览器将采用“就近使用”的优先原则，采用与该原色位置最近的样式定义。
(5)伪类选择器
“伪类选择器”也称为“虚类选择器”，它是在前面介绍的各种选择器的基础上，进一步添加“伪类”来控制特定标记样式设置的方法，举例如下:

<style type = "text/css">
       a{text-decoration:none}   /*去掉下划线*/
       a:link{color:Red}     /*超链接的文字设置为红色*/
       a:visited{color:Green}    /*设置访问过的超链接文字为绿色*/
       a:hover{color:Blue}   /*鼠标指针在超链接上时文字变为蓝色*/
       a:active{color:Yellow}    /*单击超链接时文字变为黄色*/
</style>

4 盒模型
盒模型是CSS用于指定网页元素应该如何呈现的一个重要概念。所有CSS的样式规定都与盒模型相关。在网页设计中，每个元素都可以理解成一个由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成的矩形框。它们之间的关系如图2所示。

图2 CSS盒模型示意图盒模型的宽度 = 内容宽 + 内边距左右宽 + 边框左右宽 + 外边距左右宽；盒模型的高度 = 内容高 + 内边距上下高 + 边框上下高 + 外边距上下高。包围content、padding、border和margin区域的外部矩形分别被称为content-box、padding-box、border-box和margin-box。下面，来看一段代码，再来理解一下盒模型的概念：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>盒区域的阴影效果</title>
	<meta charset="utf-8" />
    <style type="text/css">
        .box{     /*定义box类样式*/
            width:100px;   /*content的宽*/
            height:40px;    /*content的高*/
            padding:10px;    /*内边距宽10px*/
            text-align:center;  /*区域内元素水平居中对齐*/
            vertical-align:middle;  /*区域内元素水平居中对齐*/    
            border:blue solid 26px;   /*边框样式*/
            margin-bottom:20px;
            position:absolute; top:10px;  /*距离顶端10px*/
        }
        #box1{    /*定义用于id为box1的元素样式*/
            border-radius:40px/30px;   /*设置边框圆角效果，水平半径40px，垂直半径30px*/
            box-shadow:10px 10px 10px gray;  /*设置区域的阴影效果，阴影离开区域的横向距离10px、纵向距离10px，模糊半径10px，颜色gray*/
        }
        #box2{    /*定义用于id为box2的元素样式*/
            border-radius:20px 30px 60px 80px;   /*设置边框圆角效果，圆角的半径，上下左右(顺时针)*/
            box-shadow:10px 10px 0 gray;  /*设置区域的阴影效果，阴影离开区域的横向距离10px、纵向距离10px，模糊半径0px，颜色gray*/
            left:200px;            /*设置区域的左边距200px*/
        }
        #box3{    /*定义用于id为box3的元素样式*/
            border-image:url(pic1.png) 26 26 26 26;        /*对图像进行分割时，上、右、下、左边距26px*/
            left:400px;            /*设置区域的左边距400px*/
        }
    </style>
</head>
<body>
    <div id="box1" class="box"><p>区域1</p></div>
    <div id="box2" class="box"><p>区域2</p></div>
    <div id="box3" class="box"><p>区域3</p></div>
</body>
</html>

运行效果如图3所示。