前端~CSS~层叠样式表/语法规范/基础/复合选择器的选择与使用

最新推荐文章于 2024-11-03 20:03:09 发布

Salute-Y

最新推荐文章于 2024-11-03 20:03:09 发布

阅读量623

点赞数 5

分类专栏： Java API LeetCode 文章标签： html 前端 css

本文链接：https://blog.csdn.net/Merciful_Lion/article/details/123296425

版权

Java API 同时被 2 个专栏收录

38 篇文章 2 订阅

订阅专栏

LeetCode

14 篇文章 0 订阅

订阅专栏

文章目录

CSS介绍
选择器
- 基础选择器
- 复合选择器

CSS介绍

前端技术中，HTML是核心骨架，而CSS就是对html构建起来的骨架进行美化，生成“皮肉”。

CSS是层叠样式表（Cascading Style Sheets）
CSS能够对网页中的元素位置的排版进行像素级的精确控制，实现页面美化的效果。能够做到页面的样式和结构分离。

基本语法规范

CSS代码，由两个部分构成。

选择器{
属性：值；
}

选择器：决定针对哪个元素进行修改。
属性和值都是针对被选中的元素进行的~

CSS代码创建html文件即可写入。
（idea创建/记事本等等都可以）

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSSDemo</title>
    <style>
        p{
            /*设置字体颜色*/
            color:blue;
        /*设置字体大小*/
            font-size:30px;
        }
    </style>
</head>
<body>
<p>
    hello world!
</p>
</body>
</html>

上述代码中style标签内写CSS代码，而style标签的位置不固定，可以在body标签中，也可以在body标签外，一般放到head标签内。
style标签中，p就是选择器，意思是选中下面代码中的p标签，里面的color和font-size就是属性，，后面的 red和30px就是值。意义是对下面所有的p标签进行修改，将颜色改为红色，字体大小改为30px.

原来效果：
在这里插入图片描述
CSS修改后的效果：

在这里插入图片描述

引入方式

内部样式表

写在style标签中，嵌入到html内部。
即上面提到的，将CSS选择器写在style标签，理论上style标签可以放在html任何位置，但是一般都是放到head标签中。

优点：
页面样式和页面结构分离。
缺点：
当CSS代码过多时，分离不彻底。

行内样式表（内联样式表）

通过style属性，来指定某个标签的样式。

<h3 style="color: purple"> 热爱 </h3>

只针对当前标签生效，不能写复杂样式。

注意：

当内部样式和行内样式同时修改一个元素的属性时，行内样式的优先级更高。即style属性的优先级高于style标签。

外部样式表

当CSS进一步的复杂之后，就可以把CSS代码单独放入一个文件中，然后在html中单独引入。

<link rel="stylesheet" href="Test.css">

使用link 标签来引入一个外部的CSS，link href属性描述了CSS的位置。rel属性表示引入的文件类型。stylesheet就表示“样式表”。

优点：样式和结构彻底分离。
缺点：
受到浏览器缓存的影响，修改之后不一定立刻生效。

关于缓存：这是计算机中常见的一种提升性能的手段。
网页依赖的资源（图片/CSS/JS等）通常是从服务器上获取的，如果频繁的访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来，存到本地磁盘上，从而提高访问效率。
当浏览器不显示最新版本的css文件时，可以ctrl+f5强制刷新页面。强制浏览器重新获取css文件。

语法细节

代码风格：
1）紧凑

 p { color: red; font-size: 30px;}

部署阶段，建议紧凑风格，减少不必要的空格/缩进/换行，达到节省带宽的目的。

2）展开

p {
    color: red;
    font-size: 30px;
}

开发阶段，建议展开风格，可读性好。

样式大小写
CSS不区分大小写。
所以css命名时一般使用脊柱命名法：font-size.

命名法：
驼峰：countNum.
蛇形命名法：count_num
脊柱命名法：count-num
匈牙利命名法：iuCountNum

选择器

选择器用于选中页面中指定的标签元素。
种类：

基础选择器

单个选择器构成
主要包含以下几种

标签选择器

标签选择器会选中某一类标签。
例如选择p标签，就会让整个页面中所有的p标签都被选中。

<style>
    p{
        /*设置字体颜色*/
        color: red;
       /*设置字体大小*/
        font-size: 24px;
    }
</style>

如上，在选择器部分直接写入标签名，此时后面所有的p标签都会带有该样式。

类选择器
在CSS中创建“类”，通过该类指定哪些元素要遵守指定的样式。
类选择器是最常用的选择器

此处的“类” 是class属性，与Java中的类毫无关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
   
    /* CSS中 ， .开头的就是“类” */
        .green{
            color: green;
        }
    </style>
</head>
<body>
<div>俄罗斯</div>
<div class="green">俄罗斯</div>
<div>俄罗斯</div>
<div>俄罗斯</div>
</body>
</html>

. 开头的表示是类。而点后面的名字就是类名。
在具体要应用选择器的元素上，通过class属性引入。
引入的时候，不需要加点

一个类可以被多个标签使用，一个标签也可以使用多个类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
        /* CSS中 ， .开头的就是“类” */
        .green{
            color: green;
        }
        .font {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div>俄罗斯</div>
<div class="green">俄罗斯</div>
<div>俄罗斯</div>
<div class="font green" >俄罗斯</div>
</body>
</html>

在这里插入图片描述

id选择器
每个html元素都有一个id属性，要求整个属性是整个页面中唯一的值。

<style>
        #first{
            color: purple;
          }
    </style>

<div class="green font" id="first">俄罗斯</div>

在这里插入图片描述

id 选择器相当于按照“身份证号”查找元素并赋予指定的样式。而类选择器相当于按照类别来找，一个类别下可以有很多元素，一个元素也可以属于多个类别（多对多关系）

通配符选择器
通配符选择器可以选中页面所有元素，一般使用的比较少，作用是消除浏览器默认的样式。

 *{
            background-color: yellowgreen;
        }

复合选择器

把多种基础选择器综合运用起来，通过组合，达到更精准更快速的定位元素的效果。

后代选择器
先指定一个父元素，然后再指定一个子元素~
或者子元素的子元素…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器练习</title>
    <style>
        /*li{*/
        /*    color:red;*/
        /*}*/

        .red{
            color:red;
        }
   /* ol标签为父标签  li标签为子元素，这里选择将ol中的li设置为blue*/
        ol li{
            color: blue;
        }

        ol a{
            color:red;
        }
    </style>
</head>
<body>
<ul>
    <li>俄罗斯</li>
    <li>俄罗斯</li>
    <li>俄罗斯</li>
</ul>

<ol>
    <li>乌克兰</li>
    <li>乌克兰</li>
    <li>乌克兰</li>
    <a href="#">中国</a>
</ol>
</body>
</html>

后代选择器不仅可以是标签选择器的组合，也可以是其他任意基础选择器的组合。
如类选择器：

 .amra a{
            color:red;
        }

子选择器
只能选中子标签~

元素1>元素2{
属性：值
}
先找到元素1 在找到元素2.元素2必须是元素1 的子元素，不能是孙子元素或者其他…
子选择器和后代选择器非常类似。但也有一些不同，下面从代码中对比：

将猫改为红色

<div class="cat">
    <ul>
        <li><a href="#">猫</a></li>
        <li><a href="#">猫</a></li>
        <li><a href="#">猫</a></li>
    </ul>
</div>

<style>
       /*后代选择器*/
        .cat ul li a {
            color:red;
        }
        
           /*子选择器*/
        .cat>ul>li>a{
            font-size: 40px;
        }
    </style>

并集选择器
一次选中多个标签。

元素1，元素2{
属性：值；
}
同时将元素1 和元素2修改。
如下，将苹果香蕉橙子火龙果同时修改成 40px大小

<div>苹果</div>
    <h3>香蕉</h3>
    <ul>
        <li>橙子</li>
        <li>火龙果</li>
    </ul>
    <style>
        div,h3,ul>li{
            font-size: 40px;
        }
    </style>

伪类选择器

链接伪类选择器
和超链接标签a搭配使用。根据a标签的状态来选择。
a标签的几种状态：
1.未被访问过 : link
2.已经被访问过：visited
3.鼠标悬停 :hover
4.活动链接（点下去之后，没松手)
:active

<a href="http://www.sogou.com">搜狗</a>
    <style>
     a{

         font-size: 30px;
     }

     /*a链接被访问过后的样式*/
     a:visited{
         color:green;
     }
        /*a链接未被访问时的样式*/
        a:link{
            color:black;
        }
 
    /*a链接鼠标悬停时样式*/
        a:hover{
            color:red;
        }
  /*a链接被点击时的样式*/
        a：active{
            color:blue;
        }
    </style>

上述几种状态中，link和visited是只有a标签才具有的状态
而hover和active标签是不仅仅a标签生效，其他标签也可以生效。

force伪类选择器

选取获取焦点的input表单元素。

<div>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</div>
<style>
    input:focus{
        color:red;
    }
</style>