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. 数学--数论--随机算法--Pollard Rho 大数分解算法 （带输出版本）

    RhoPollard Rho是一个著名的大数质因数分解算法,它的实现基于一个神奇的算法:MillerRabinMillerRabin素数测试. 操作流程 首先,我们先用MillerRabinMille ...

  2. 数学--数论--Miller_Rabin判断一个大数是不是素数（随机算法）

    前提知识 1,费马定理:ap−1=1(mod p)a^{p-1}=1(mod\ p)ap−1=1(mod p)

  3. Jmeter系列（9）- jmeter插件入门篇

    如果你想从头学习Jmeter,可以看看这个系列的文章哦 https://www.cnblogs.com/poloyy/category/1746599.html 前言 jmeter4.0以上,如现在最 ...

  4. python安装pycrypto库

    使用pycharm时安装pycrypto库,一直安装不上,提示安装成功,退出去一看,依旧没有 最后选择了pip安装,但一直报错(Microsoft Visual C++ 9.0 is required ...

  5. 蓝桥杯2019初赛]迷宫(dfs版本)

    传送门 大意: 题目的意思还是模板的搜索,不同的是我们要记录路径了,而且是最短字典序最小的路径. 思路: 1.对于字典序最小,也就是说我们要尽量先往下走,然后是左- 这个很简单,因为在dfs中是顺序枚 ...

  6. Linux暂时提升非root用户的权限

    sudo 用于提升非root用户的某些命令执行权限 1,使用root用户,复制vim /etc/sudoers 文件的第91行修改为,想提升的用户名称 root ALL=(ALL) ALL admin ...

  7. 【matlab 基础篇 02】基础知识一键扫盲，看完即可无障碍编程（超详细+图文并茂）

    博主快速入门matlab,系统地整理一遍,如何你和我一样是一个新手,那么此文很适合你: 本人能力有限,文中难免有错误和纰漏之处,请大佬们不吝赐教 创作不易,如果本文帮到了您: 请帮忙点个赞

  8. iOS开发--性能调优记录

    CPU VS GPU 关于绘图和动画有两种处理的方式:CPU(中央处理器)和GPU(图形处理器).但是由于历史原因,我们可以说CPU所做的工作都在软件层面,而GPU在硬件层面 对于图像处理,通常用硬件 ...

  9. 目前校园百晓生APP与CSDN软件的对比

    不忘初心.注入灵魂 设计之初 在做校园百晓生该APP时,初心是为校园的同学提供便捷的查询校园信息的服务,确实目前的软件已经实现了该功能,但是总感觉缺少一些灵魂,感觉大部分人渴望的重点在于信息而不是自己 ...

  10. Java元注解@Retention规则

    @Retention是java当中的一个元注解,该元注解通常都是用于对软件的测试 1.适用方式:     @Retention(RetentionPolicy.RUNTIME)     @interf ...