1、css概述

主要的使用场景就是美化网页，布局页面

（1）html的局限性

它只关注内容的语义，只能做一些简单的样式，并且非常的臃肿和繁琐

（2）css对网页美化的作用

css是层叠样式表的简称，它和html是一样的，都是一种标记语言，css主要用于设置html页面的文本内容（字体、大小、对齐方式等）图片的外形（宽度、高度、边框样式、边距等）以及版面的布局和外观显示样式。css可以美化html使得页面更加漂亮，页面的布局更加简单。

（3）html与css

html主要做结构，显示元素内容，css美化html，布局网页。因此，html专注结构呈现，css做样式，即结构与样式相分离

2、css语法规范

（1）代码

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            p{

                color: red;

                font-size: 20px;

            }

        </style>

    </head>

    <body bgcolor="aquamarine">

        <h2>静夜思</h2>

        <p>

                                床前明月光，疑似地上霜

        </p>

        <p>

                               举头望明月，低头思故乡，

        </p>

    </body>

</html>

（2）测试

在style标签中，p被称为选择器，用于指定css的html标签，花括号内部是对该对象设置的具体样式

属性和属性的值，以键值对的形式出现

属性和属性的值以冒号隔开

每一个键值对以分号相隔开

3、选择器

就是根据不同的需求，把不同的标点选出来。

（1）标签选择器

标签选择器是指用标签名称作为选择器，按照标签名称分类，为页面中某一标签制定统一的样式。优点是能够快速地为页面同类型的标签，统一设置样式。但是标签选择器不能满足差异化样式，只能同时设置同一类型的标签

代码：

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            p{

                color: red;

                font-size: 20px;

            }

            div{

                color:black;

                font-size: 25px;

            }

        </style>

    </head>

    <body bgcolor="aquamarine">

        <h2>静夜思</h2>

        <p>

                       床前明月光，

        </p>

        <p>

                               疑似地上霜，

        </p>

        <div>

            举头望明月，

        </div>

         <div>

            低头思故乡，

        </div>

    </body>

</html>

测试：

标签选择器，是根据标签的不同来对样式进行设置的

（2）类选择器

标签选择器不能实现差异化的设置，但是类选择器可以，它可以单独选一个或者几个标签

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            .myclass1{

                color: red;

                font-size: 20px;

            }

            .myclass2{

                color:black;

                font-size: 25px;

            }

        </style>

    </head>

    <body bgcolor="aquamarine">

        <h2>静夜思</h2>

        <p class="myclass1">

                       床前明月光，

        </p>

        <p class="myclass2">

                               疑似地上霜

        </p>

        <div class="myclass1">

            举头望明月，

        </div>

         <div class="myclass2">

            低头思故乡

        </div>

    </body>

</html>

测试：

在使用类选择器之后，即使是相同的标签，也可以实现不同的样式。如果说标签选择器是为了区别不同的标签的话，那么类选择器，则可以进一步对众多的同一种标签进行区分

类命名规则：

头：header

内容：content

尾：footer

导航：nav

侧栏：column

菜单：menu

类选择器实现盒子模型：

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            .red{

                width: 50px;

                height: 20px;

                background-color: red;

            }

            .yeloow{

                width: 50px;

                height: 40px;

                background-color: yellow;

            }

        </style>

    </head>

    <body bgcolor="aquamarine">

        <h2>类选择器实现盒子模型</h2>

      <div class="red"></div>

      <div class="yeloow"></div>

      <div class="red"></div>

    </body>

</html>

在同一种标签中，通过class的不同实现不同的布局

类选择器的多类名：一个标签的class属性有多个值

可以把一些标签元素相同的元素放到一个类里面：

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

           .myclass1{

                   width: 250px;

                height: 60px;

                background-color: blanchedalmond;

           }

           .myclass2{

                   width: 250px;

                height: 60px;

                background-color:red;

           }

        </style>

    </head>

    <body>

        <h2>类选择器实现盒子模型</h2>

      <div class="myclass1">

          床前明月光，疑是地上霜.

      </div>

      <div class="myclass2">

          举头望明月，低头思故乡，

      </div>

    </body>

</html>

在这个案例中，两句话显示的区域的大小是相同的，可以把他们抽取出来，重新创建一个新的class

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

           .myclass1{

                background-color: blanchedalmond;

           }

           .myclass2{

                background-color:red;

           }

           .area{

                   width: 250px;

                height: 60px;

           }

        </style>

    </head>

    <body>

        <h2>类选择器实现盒子模型</h2>

      <div class="myclass1 area">

          床前明月光，疑是地上霜.

      </div>

      <div class="myclass2 area">

          举头望明月，低头思故乡，

      </div>

    </body>

</html>

这样的话可以节省css代码，统一修改也非常方便

（3）id选择器

ID选择器和类选择器的使用方法基本相同，但是定义方式不同，最大的区别就是ID选择器只能使用一次

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

        #color{

            color: red;

        }

        </style>

    </head>

    <body>

      <div id="color">

          床前明月光，疑是地上霜.

      </div>

    </body>

</html>

（4）通配符选择器

*：修改所有标签的样式

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

        * {

            color: red;

        }

        </style>

    </head>

    <body>

      <div id="color">

          床前明月光，疑是地上霜.

      </div>

      <p>

          举头望明月，低头思故乡.

      </p>

    </body>

</html>

css：选择器（标签、类、ID、通配符）的更多相关文章

  1. 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

    前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介    叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...

  2. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. html5--6-11 CSS选择器7--伪类选择器

    html5--6-11 CSS选择器7--伪类选择器 #E:target 选择当前活动的锚点元素. 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候, ...

  4. html5--6-10 CSS选择器7--伪类选择器

    html5--6-10 CSS选择器7--伪类选择器 实例 学习要点 掌握常用的CSS选择器 了解不太常用的CSS选择器 什么是选择器 当我们定义一条样式时候,这条样式会作用于网页当中的某些元素,所谓 ...

  5. html5--6-9 CSS选择器6--伪类选择器

    html5--6-9 CSS选择器6--伪类选择器 实例 @charset="UTF-8"; /*:root{background: green}*/ /*li:first-chi ...

  6. HTML5新标签使用及CSS选择器(伪类)

    这些标签能够让搜索引擎更直接的解析页面内容. <header></header>语义:文档或者页面的头部 <nav></nav>语义:导航这两者不是组合 ...

  7. css选择器四大类：基本、组合、属性、伪类

    什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器 基本选择器又分为:*通配符.标 ...

  8. CSS选择器中类和ID选择器的区别

    类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选 ...

  9. CSS选择器和jQuery选择器的区别与联系之一

    到底什么是选择器?我们通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的 ...

  10. CSS汇总之CSS选择器

    要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. 一.通配符选择器 语法:*{ } 说明:通配符选择器可以选择页面上所有的html标签(包括body,h ...

随机推荐

  1. CodeForces - 1102B Array K-Coloring

    B. Array K-Coloring time limit per test2 seconds memory limit per test256 megabytes inputstandard in ...

  2. CodeForces - 140A New Year Table （几何题）当时没想出来-----补题

    A. New Year Table time limit per test2 seconds memory limit per test256 megabytes inputstandard inpu ...

  3. Jenkins 节点配置

    1.配置代理 系统管理---configure Global Security(全局安全设置)---Tcp port for inbound agents---指定端口 服务器防火墙中开放此端口(li ...

  4. .NET Core 反编译dll源码查看

    一.可以通过JetBrains dotPeek进行反编译 二.可以通过.NET Reflector和VS自带的反编译工具查看

  5. 题目分享F 二代目

    题意:T个点R种双向边,P种单向边,求点S到每个点的最短距离 分析:(这再看不出来是spfa就该**了) 首先,这题能否用spfa就看他是否有负环呗,显然,双向边的权值非负,单向边还有个啥政策,总之显 ...

  6. YOLACT : 首个实时one-stage实例分割模型，29.8mAP/33.5fps | ICCV 2019

    论文巧妙地基于one-stage目标检测算法提出实时实例分割算法YOLACT,整体的架构设计十分轻量,在速度和效果上面达到很好的trade-off.   来源:[晓飞的算法工程笔记] 公众号 论文: ...

  7. 现代企业要求上什么样的MES(四)

    一个制造企业要想盈利,在生产方面要做的无非是提高资源利用效率和缩短生产通过时间(生产周期),而实现这俩步骤需要生产状况的在线透明及避免薄弱环节的分析数据,由此达到改善生产状态的目的.在erp系统中,通 ...

  8. C. Jury Marks 思维

    C. Jury Marks 这个题目虽然是只有1600,但是还是挺思维的. 有点难想. 应该可以比较快的推出的是这个肯定和前缀和有关, x x+a1 x+a1+a2 x+a1+a2+a3... x+s ...

  9. ssh框架整合时的延迟加载问题（no session问题）的分析以及解决方案

    当我们整合完三大框架,并采用hibernate的延迟加载方案时,会出现如下的异常: 现在对这个异常进行分析,如下图所示(模拟通过id查询用户信息的过程): 上图分析了为什么会出现no session的 ...

  10. 如何发挥Visual Studio 2019强大的编辑功能轻松编辑Keil项目

    本文地址:https://www.cnblogs.com/jqdy/p/12565161.html 习惯了VS的强大编辑功能,对Keil 5越来越深恶痛绝.查阅网络文章后按图索骥初步实现了VS编辑Ke ...