CSS 3 SEC

最新推荐文章于 2024-07-23 14:07:14 发布

hbx_Ambition

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量176

点赞数

分类专栏：自学文章标签： css html 前端

本文链接：https://blog.csdn.net/hbx_ambition/article/details/122966316

版权

自学专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2.3、结构伪类选择器

伪类：条件

    <style>
/*避免使用class id选择器*/
/* ul的第一个子元素*/
ul li:first-child{
    background: aqua;
}
/* ul的第最后子元素*/
ul li:last-child{
    background: aquamarine;
}
    /*选中p1:定位到父元素 选择当前的第一个元素
    选中当前p元素的父级元素，选中父级元素的第二个，并且是当前元素才生效
    */
p:nth-child(1){
    background: crimson;
}
/*选中父元素下的，p元素的第二个*/
p:nth-of-type(2){
    background: blue;
}


    </style>

2.3、属性选择器

id + class 结合-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }
    /*存在id属性的元素
    a[]{}
    属性名，属性名=属性值（正则）
    =绝对等于
    *=包含
    ^=以这个开头
    $=以这个结尾
    */
        /*a[id]{*/
        /*    background: chartreuse;*/
        /*}*/
        /*id=frist的元素*/
        /*a[id=frist]{*/
        /*    background: #b41794;*/
        /*}*/
    /*   class 中有links的元素 */
/*a[class*="links"]{*/
/*    background: red;*/
/*}*/

    /*   选中href中以http开头的元素 */
    /*    a[href^=http]{*/
    /*        background: cadetblue;*/
    /*    }*/
        a[href$=pdf]{
            background:coral;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="frist">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>
</body>
</html>

1.=
2*=
3^=
4$=

3、美化网页

3.1 为什么要美化网页

有效的传递页面信息
美化网页，页面漂亮，才能吸引用户啊
凸显页面的主题
提高用户的体验

span标签：重点要突出的子，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
            
        }
    </style>
</head>
<body>
欢迎学习 <span id="title1">Java</span>
</body>
</html>

3.2、字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    z字体风格：-->
    <style>
        p{
            font:oblique bold 50px "楷体";
        }
    </style>
</head>
<body>
<p>层楼终将误少年</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
font-family:字体
font-size:字体大小
font-weight:粗细
color：字体颜色


-->
    <style>
        body{
            font-family: "Agency FB" ,楷体;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">年少不被层楼误</p>
<p>余生不羁尽自由</p>
<p>jsiasjdiajskcnajnsca</p>
</body>
</html>

3.3、文本样式

颜色 color rgb rgba
文本对齐方式 text-align = cnter
首行缩进 text-indent :2em
行高line-height 单行文字上下居中line-height =height
装饰 text-decoration:
文本图片对齐vertical-align:middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   颜色
 单词
 RGB 0~F
 RGBA
 text-align: center;排版 居中
 text-indent: 2em; 首行缩进两个字母
行高和块的高度一致就可以上下居中
  height: 300px;
  line-height: 300px;

 -->
    <style>
        h1{
            color:rgba(0,22,266,0.9);
            text-align: center；
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: coral;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l12{
            text-decoration:underline;
        }
        /*中划线*/
        .l13{
            text-decoration: line-through;
        }
        /*上划线*/
        .l14{
            text-decoration:overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<p class="l12">12151215</p>
<p class="l13">121515</p>
<p class="l14">121555454541215</p>
<h1>故事介绍</h1>
<a href="5456">12151321</a>
<p class="p1">年少不被层楼误</p>
<p class="p3">余生不羁尽自由</p>
<p>jsiasjdiajskcnajnsca</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    水平对齐~ 参照物  a，b-->
    <style>
        img,span{
            vertical-align:middle;
        }
    </style>
</head>
<body>


<p>
    <img src="images/mmexport1644734856629.jpg" alt="huas">
    <span>sjaijscnasio</span>
</p>
</body>
</html>

hbx_Ambition

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 3 SEC

2.3、结构伪类选择器伪类：条件 <style>/*避免使用class id选择器*//* ul的第一个子元素*/ul li:first-child{ background: aqua;}/* ul的第最后子元素*/ul li:last-child{ background: aquamarine;} /*选中p1:定位到父元素选择当前的第一个元素选中当前p元素的父级元素，选中父级元素的第二个，并且是当前元素才生效 */p...
复制链接

扫一扫