CSS基础(二)：高级选择器、页面美化

最新推荐文章于 2024-07-22 14:19:33 发布

＿愚者

最新推荐文章于 2024-07-22 14:19:33 发布

阅读量317

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_43477218/article/details/106345157

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS基础（二）高级选择器、美化网页

四种高级选择器

之前介绍了三种基本选择器，但是样式多了用id选择器就太繁琐了，也不是按照一定规则分类的。这是就不知道怎么办了。那么高级选择器提供了更多的选择方法。

层次选择器

层次选择器就是按照层次选择的，在HTML代码中按照代码结构会将代码分层。

<body>
    <!--这是一层-->
    <h1>Title</h1>
    <img src="">
    <ul>
        <!--这是一层-->
        <li>
            <!--这是一层-->
            <p>123234</p>
            <img src="">
            
        </li>
        <li>
            <!--这是一层-->
            <h2>Two</h2>
        </li>
    </ul>
</body>

层次选择器就是将这些按照层次分开，然后去给这些层上样式。

后代选择器

后代选择器选中的位置是某一元素，它的下一层的某一或某一类元素或标签。格式如下

body li{
    color:red;
}

这样body后代层中的li标签全部变红，包括li所以那个小圆点点会成红色。用空格表示后代。

子选择器

后代选择器是选中的后代，子选择器选中的是子层（也就是选中标签的下一层）

body>h1{
    color:red;
}
/*这个就是选不到的*/
body>li{
    color:black;
}

相邻选择器

选择的是与该元素同层，且在该元素的相邻下一个。用+

img+p{
    color:red;
}

<body>
    <img src"#">
    <p>123</p>
</body>

<!--这样是改变不了的，因为p不是img相邻的下一个-->
<body>
    <img src"#">
    <h1>456</h1>
    <p>123</p>
</body>

通用选择器

通用选择器就是相邻选择器的扩展版了，它可以选择某一元素同一层的下面所有。用~

<body>
    <img src"#">
    <h1>456</h1>
    <p>123</p>
</body>

img~p{
    color:red;
}

这个就可以实现了。

结构伪类选择器

伪类的定义是：伪类对元素的分类是基于特征的，而不是它们的名字、属性或内容；原则上特征是不可以从文档树上获取的。

伪类有：first-child、nth-child、nth-of-type等等，写伪类时要加冒号

比如：

<body>
    <img src="#">
    <p>hahahaha</p>
    <ul>
        <li>124</li>
        <li>dfdffv</li>
        <li>655</li>
    </ul>
</body>

/*选中ul下的第一个li*/
ul li:first-child{
    color:red;
}
/*选中li的父亲层的第一个孩子，且这个孩子的类型还得是li才能选中*/
li:nth-child(1){
    color:green;
}
/*选中p的父层(body)的第一个p，不像上边第一个孩子(在这种第一个是img)必须是此类型*/
p:nth-of-type(1){
    color:blue;
}

超链接伪类选择器

鼠标在链接上悬停

a:hover{
    color:red;
}

鼠标按压链接

a:active{
    color:red;
}

鼠标按压后链接

a:visited{
    color:red;
}

属性选择器

属性选择器，顾名思义按照属性来选择的。格式如下：

/*有class属性的p标签都变红*/
p[class]{
    color:red;
    /*变得是：<h1 class="one">Title</h1>，<p class="one">123234</p>
      <p class="three">ooo</p>，<h2 class="one">Two</h2>*/
}

/*有class且等于one的p变黑*/
p[class="one"]{
    color:black;
    /*变得是：<h1 class="one">Title</h1>，<p class="one">123234</p>
      <h2 class="one">Two</h2>*/
}

/*有id且等于two的*/
p[id="two"]{
    color:green;
    /*变得是：<p id="two">www</p>*/
}

<body>
    <h1 class="one">Title</h1>
    <img src="">
    <ul>
        <li>
            <p class="one">123234</p>
            <img src="">
            
        </li>
        <li>
            <p class="three">ooo</p>
            <p id="two">www</p>
            <h2 class="one">Two</h2>
        </li>
    </ul>
</body>

span突出重点

span标签没有特殊实际意义，就是span包起来的就是重点，约定俗成，啥也不能干。

<span>
    <p>1234567890</p>
</span>

div划分模块

div也是约定俗成，将代码分成一个个的模块包起来。

<body>
    <div>
        <h1>Title</h1>
    </div>
    <div>
        <form action="h2.html">
            <input type="text"/>
            <input typr="password"/>
            <input type="submit"/>
        </form>
    </div>
</body>

美化网页

字体样式

在选择器中有属性—font，控制字体

font-family：字体
font-size：字体大小
font-weight：字体宽度

div{
    color:red;
    /*英文的字体、中文的字体*/
    font-family:"Arial", "楷体";
    font-size:50px;
    font-weight:bolder;
    /*bold、bolder是粗体与更粗的，正常的字体大小是最细的
      在html中strong标签也能实现此功能*/
}

文本样式

颜色

颜色在哪里都有用，不单单是文本样式里，链接的字也可以设置颜色。

div{
    color:red;
    /*由RGB组成，这是三个十六进制数*/
    color:#d3ff84;
    color:rgb(r,g,b);
    color:rgba(r,g,b,0.1);
    /*最后一个参数是透明度设置*/
}

排版

排版最重要的就是对齐方式、首行缩进。

div{
    /*这是水平对齐*/
    text-align:center;
    text-indent:2em;
    /*首行缩进，1个em是一个子的长度*/
}

行高、宽度

div{
    weight:30px;
    /*这个高度是元素所占高度，就是盒子模型的最里边那层的高度*/
    height:50px;
    /*这个是行高，当行高与元素高度相等时上下居中*/
    line-height:50px;
}

装饰

div{
    text-decoration:line-through;
    text-decoration:overline;
    text-decoration:underline;
    text-decoration:none;
}

分别是：中划线、上划线、下划线、没线

使用 text-decoration:none 可以将文字链接的下划线去掉。

超链接伪类

/*鼠标悬停样式*/
a:hover{
    color:red;
}
/*鼠标点击不放样式*/
a:active{
    color:blue;
}
a:visited{
    text-decoration: none;
}

背景图

div{
    /*通过url添加图片背景*/
    background-image:url("#");
    /*背景图默认平铺方，可以设置为不重复等等*/
    background-repead:no-repead;
    /*设置背景图的坐标*/
    background-position:xpx ypx;
}

盒子模型

在这里插入图片描述

这个框框就是盒子模型。

盒子模型控制着边距，有margin（外边距）、border（边框）、padding（内边距）

div{
    /*分别是粗细、线的类型、颜色*/
    border:40px dashed red;
    /*外边距可以这样分别调用，也可以margin:...这样像上面那个border那样调用*/
    margin-bottom:50px;
    margin-top:50px;
    margin-left:20px;
    margin-right:20px;
}

padding与margin类似。

圆角边框

div{
    border-radius:10px;
    border-radius:10px 20px;
    border-radius:20px 20px 30px 40px;
}

一个参数时是四个角都是10px。两个参数时左上、右下为10px，右上、左下为20px。四个参数时就是从左上开始顺时针。

图层

z-index：0~，设置图层等级，等级越高越在上层显示

.brother1{
    position:absolute;
    top:0px;
    left:opx;
    z-index:999;
    background:red;
}

.brother2{
    position:absolute;
    top:0px;
    left:0px;
    z-index:1;
    background:blue;
}
/*
解析：
	有同一父级的brother1、brother2。将他们都定位到父级的左上角。若不进行图层等级设置，因为brother1先声明的，所以brother2会将brother1覆盖。但是进行了图层等级设置，且brother1大于brother2，所以brother1会在上层显示，即brother1覆盖了brother2。
*/

透明度

opacity：0~1。

透明度范围为0~1，或0% ~ 100%。rgba也可以设置透明度，但是它是设置颜色的，会多些一些颜色的东西。opacity就纯粹多了。

px;
left:opx;
z-index:999;
background:red;
}

.brother2{
position:absolute;
top:0px;
left:0px;
z-index:1;
background:blue;
}
/*
解析：
有同一父级的brother1、brother2。将他们都定位到父级的左上角。若不进行图层等级设置，因为brother1先声明的，所以brother2会将brother1覆盖。但是进行了图层等级设置，且brother1大于brother2，所以brother1会在上层显示，即brother1覆盖了brother2。
*/




### 透明度

　　opacity：0~1。

　　透明度范围为0~1，或0% ~ 100%。rgba也可以设置透明度，但是它是设置颜色的，会多些一些颜色的东西。opacity就纯粹多了。

＿愚者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础(二)：高级选择器、页面美化

CSS基础（二）高级选择器、美化网页文章目录CSS基础（二）高级选择器、美化网页四种高级选择器层次选择器后代选择器子选择器相邻选择器通用选择器结构伪类选择器超链接伪类选择器属性选择器span突出重点div划分模块美化网页字体样式文本样式颜色排版行高、宽度装饰超链接伪类背景图盒子模型圆角边框图层透明度四种高级选择器之前介绍了三种基本选择器，但是样式多了用id选择器就太繁琐了，也不是按照一定规则分类的。这是就不知道怎么办了。那么高级选择器提供了更多的选择方法。层次选择器层次选择器就是按照层次选
复制链接

扫一扫