CSS 各类选择器第一节

最新推荐文章于 2022-11-15 17:12:47 发布

抹泪的知更鸟

最新推荐文章于 2022-11-15 17:12:47 发布

阅读量445

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_51596354/article/details/121291758

版权

CSS

在 HTML 中使用 CSS

1.内联样式

内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。

在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小，又增加文档的更新和维护难度。例如，所有的

元素都设置了宽度大小，如果需要修改，就需要反复更改多处样式定义内容。

<nav>
    <ul>
        <li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">首页</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Web前端开发</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">Linux操作系统</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">计算机网络</li>
    	<li style="float:left;padding: 4px 5px 0px 5px;;list-style:none;">MySQL数据库管理</li>
    </ul>
</nav>

注意：nav 作用效果和 div 相同，仅表示导航专用标签。

2.嵌入样式

嵌入样式是通过在 HTML 文档头定义样式单部分来实现的。通常不建议使用嵌入样式，因为此方式必须在 HTML 文档内部定义样式，如果此文档的 Css 样式需要被其他 HTML 文档使用，那么就必须重新定义。大量 CSS 嵌套在 HTML 文档中，也会导致 HTML 文档过大，造成网络负担过重。如果需要修改整站风格时，必须对网站的每一个网页进行修改，不利于更新和管理。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li {
       
            float: left;
            padding: 4px 5px 0px 5px;
            list-style: none;
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li>首页</li>
        <li>Web前端开发</li>
        <li>Linux操作系统</li>
        <li>计算机网络</li>
        <li>MySQL数据库管理</li>
    </ul>
</nav>
</body>
</html>

3.外部样式

外部样式是将所有样式写在一个外部文件中，在 HTML 文档中使用元素，将文件链接到需要设置样式的文档上。使用这种方法，只需要修改链接的文件，就可以完全改变网页的整体风格。此外，也可以使用这种方法修改或调整文档，使之适应不同环境或设备的显示要求。此种方法是推荐使用的方式。如果使用外部样式，修改样式是刷新浏览器可能看不到修改的效果，因为浏览器为了节省网速，缓存了先前的 css 文件，可以使用 ctrl + f5 强制刷新。

响应式（了解）

页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query 的使用等。无论用户正在使用笔记本还是 iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
    <style>
        body {
       
            background-color: white;
        }

        @media screen and (min-width: 768px) {
       
            /*分辨率宽度为768px以上*/
            body {
       
                background-color: red;
            }
        }

        @media screen and (min-width: 992px) {
       
            /*分辨率宽度为992px以上*/
            body {
       
                background-color: purple;
            }
        }

        @media screen and (min-width: 1200px) {
       
            /*分辨率宽度为1200px以上*/
            body {
       
                background-color: yellow;
            }
        }

    </style>
</head>
<body>
<ul>
    <li>浏览器宽度小于768px时，背景颜色为白色。</li>
    <li>浏览器宽度在768px至992px之间时，背景颜色为红色。</li>
    <li>浏览器宽度在992px至1200px之间时，背景颜色为紫色。</li>
    <li>浏览器宽度大于1200px时，背景颜色为黄色。</li>
    <li>此案例仅为演示，实际应用要复杂的多。</li>
</ul>
</body>
</html>

基础选择器

基础选择器是 CSS 中最基础、最常用的选择器，从 CSS 诞生开始就一直存在，供 Web 前端开发者快速地进行 DOM 元素的查找与定位。基本语法如下：

选择器名字{
    属性:值;
    属性:值; 
}

一个简单的选择器代码如下

li {
    float: left;
    padding: 4px 5px 0px 5px;
    list-style: none;
}

在该例中，“li”就是选择器(类型选择器)，“float"是属性，“left" 是取值。该 Css 定义表示：对页面

标签向左浮动。基础选择器包含通配符选择器、元素选择器、类选择器和 ID 选择器，通过这些基础的选择器可以为 HTML 元素添加很多的附加信息，如指定 div 元素的 widh 属性以实现对 div 元素的宽度控制。如下为几个常用的基础选择器

*                通用元素选择器，匹配任何元素
E                标签选择器，匹配所有使用E标签的元素
.info和E.info    class选择器，匹配所有class属性中包含info的元素
#info和E#info    ID选择器，匹配所有ID属性等于footer的元素

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
       
            color: yellow;
        }

        div {
       
            color: aqua;
        }

        .pink {
       
            color: pink;
        }

        #green</

最低0.47元/天解锁文章

抹泪的知更鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS 各类选择器第一节

CSS在 HTML 中使用 CSS1.内联样式内联样式是在元素属性中设置样式。此种方式很适合用于测试样式和快速查看样式效果，但是不推荐在整个文档上使用此方法。在使用此方法时，必须在每一个元素上重复设置各个样式，这样既增加文档大小，又增加文档的更新和维护难度。例如，所有的元素都设置了宽度大小，如果需要修改，就需要反复更改多处样式定义内容。<nav> <ul> <li style="float:left;padding: 4px 5px 0px
复制链接

扫一扫