CSS-01入门和选择器

今天你好好生活了吗

已于 2023-01-29 17:52:32 修改

阅读量78

点赞数

文章标签： css css3 前端

于 2023-01-17 17:49:57 首次发布

本文链接：https://blog.csdn.net/qq_74031198/article/details/128717390

版权

基础知识

简介

CSS【层叠样式表】是基于HTML的基础上，帮助我们进一步美化网页的计算机语言。HTML侧重于这个网页有什么内容，注重的是内容的语义；而CSS侧重于如何排版和美化这些内容。

语法规范

1. 总览

CSS整体放在<style></style>标签中，<body></body>标签之外，由选择器，花括号，样式三大部分组成。
示例：
下图表示将“走进苏州”的字体颜色改为蓝色

<style>
        h1 {color: aqua;}
</style>
<body>
    <h1>走近苏州</h1>
</body>

2. 选择器

分类

1. 基础选择题

标签选择器：将页面中选定的所有同类标签改为同一样式，以HTML标签名为选择器。
类选择器：将同类标签中的某一个或某几个标签设置为不同的样式，以点＋名称为选择器
示例：

<style>
    .green{color: aquamarine;
          font-size: larger;}
</style>
<body>
 <h1>走近苏州</h1>
 <h1>走近无锡</h1>
 <h1 class="green">走近云南</h1>
</body>

补充：多类名的使用
使用方式：把多个名称放在同一个class属性里，名称中间保留一个空格
功能：统一修改
示例：

<style>
    .green {color: aquamarine;
          font-size: larger;}
    .width {width: max-content;}
</style>
<body>
 <h1>走近苏州</h1>
 <h1>走近无锡</h1>
 <h1 class="green width">走近云南</h1>
</body>

id选择器：与类选择器相似，但是只能调用一次，是唯一的。以井号+名称为选择器。
示例

<style>
    #green{color: aquamarine;
          font-size: larger;}
</style>
<body>
 <h1>走近苏州</h1>
 <h1>走近无锡</h1>
 <h1 id="green">走近云南</h1>
</body>

通配符选择器：将页面所有的元素改为同一样式，以“*”为选择器
注意： 无需调用，特殊情况下使用，如需要统一处理页面边距时

2. 复合选择器

并集选择器

理解：是多个选择器通过逗号连接而成，为多个元素定义相同CSS样式时使用，通常用于集体声明
简记：多个选择器，统一要求时使用
示例：

<style>
        span,
        ul {
            color: bisque;
        }
    </style>
<body>
    <div>
        <span> 橘子</span>
        <p>橙子</p>
        <ul>
            <li>平安果</li>
            <li>智慧果</li>
            <li>苹果</li>
        </ul>
    </div>

注意：

语法规范：所有选择器应该竖着写
最后一个选择器不需要加逗号

后代选择器

理解：语法“E F”，可选择元素或元素组的后代
示例：

<style>
        ol li {
            color: bisque;
        }
    </style>
<body>
    <ol>
        <li>我是ol的后代</li>
    </ol>
    <ul>
        <li>我是ul的后代</li>
    </ul>

注意：

E与F间有个空格
E为父级，F为子级，最终选择对象为子级F
若只想更改子级里的某一项，一级级查找就行，注意保留空格
若出现相同的父级，但只需要更改其中一项时，可以用类选择器。E和F可以是任意选择器
示例：

<style>
        .nav li {
            color: bisque;
        }
    </style>
<body>
    <ol>
        <li>我是ol的后代</li>
    </ol>
    <ol class="nav">
        <li>我是ol的后代</li>
    </ol>

子元素选择器

理解：语法“E>F”，可选择作为某元素子元素的元素，只能选择最近一级子元素
示例：

<style>
        .nav>a {
            color: bisque;
        }
    </style>
<body>
    <div class="nav">
        <a href="#">我是离div最近一级</a>
        <p>
            <a href="#">我是离div两级远</a>
        </p>
    </div>
</body>

伪类选择器

理解：添加特殊的效果

链接伪类选择器

语法	作用
a: link{}	选择所有未被访问的链接
a:visited{}	选择所有已被访问的链接
a:hover{}	选择鼠标指针位于其上的链接
a:active{}	选择活动链接（鼠标按下未弹起的链接）

注意：

其中的a是主体部分的标签选择器，可以更换
为了确保语法生效，请按照*LVHA *的循顺序声明，也就是表格从上到下的顺序
因为a链接在浏览器中有默认样式，一般需要给链接单独设置样式。先给链接单独设置一个样式，然后再使用链接伪类选择器，分为两部分写
示例：

 <style>
        a {
            color: black;
            text-decoration: none;
        }

        a:hover {
            color: aqua;
        }
    </style>
<body>
    <a href="https://www.bilibili.com/">bilibili</a>
</body>

:focus伪类选择器

理解：选取获得焦点的表单元素，焦点就是光标，一般情况<input>表单元素才能获取，故该选择器主要针对于表单元素来说
示例：

input:focus{background-color: aliceblue;}

3. 样式：由属性和值组成，注意要带上分号。

代码风格

格式书写：有紧凑格式和展开格式两种方法，为了增加可读性，应使用展开格式
示例：

<style>
        h1 {
           color: aqua;
           font-size: larger;
          }
</style>
<body>
    <h1>走近苏州</h1>
</body>

样式大小写：大写或者小写代码都可运行，但为了增加可读性，推荐全部用小写字母，特殊情况除外。
空格规范

选择题和大括号中间留一个空格
属性的冒号后面留一个空格