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. java的++i和i++的分析

    关于自增自减,先来一道题,大家尝试着做一下: public static void main(String[] args) { int a=2; int b=a++; int c=--a; Syste ...

  2. 【Java新特性】Lambda表达式典型案例，你想要的的都在这儿了！！

    写在前面 不得不说,有些小伙伴的学习热情真高,学完了Lambda表达式的语法,想来几个典型案例再强化下.于是问冰河能否给几个Lambda表达式的典型使用示例.于是乎,便有了这篇文章. 案例一 需求 调 ...

  3. 基于OpenCV的KNN算法实现手写数字识别

    基于OpenCV的KNN算法实现手写数字识别 一.数据预处理 # 导入所需模块 import cv2 import numpy as np import matplotlib.pyplot as pl ...

  4. JS 究竟是先有鸡还是有蛋，Object与Function究竟谁出现的更早，Function算不算Function的实例等问题杂谈

    壹 ❀ 引 我在JS 疫情宅在家,学习不能停,七千字长文助你彻底弄懂原型与原型链一文中介绍了JavaScript原型与原型链,以及衍生的__proto__.constructor等一系列属性.在解答了 ...

  5. LeetCode--Unique Email Addresses & Hamming Distance (Easy)

    929. Unique Email Addresses (Easy)# Every email consists of a local name and a domain name, separate ...

  6. qt绘制甘特图

    重写paintEvent事件,代码如下 void xx::paintEvent(QPaintEvent *event){ QPainter painter(this); //绘制x,y轴,_maxWi ...

  7. Android 8.1 关机充电动画（三）Android模式

    system:Android 8.1 platform:RK3326/PX30 uboot kernel system/core/healthd Android 8.1 关机充电动画(一)模式选择 A ...

  8. JDBC07 事务

    事务 事务基本概念 一组要么同时执行成功,要么同时执行失败的SQL语句,是数据库操作的一个执行单元(比如:银行中,对账户的操作和日志的记录是一组事务) 事务开始于: -连接到数据库上,并执行一条DML ...

  9. Mysql常用sql语句（19）- in / exists 子查询

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 前言 子查询在我们查询方法中是比较常用的,通过子查询可 ...

  10. 热修复框架Tinker快速集成

    由于腾讯官方的demo对于刚接触的我来说,太过复杂,找不到核心配置,因此将tinker集成中最核心的东西抽取出来,整合到一个demo中. demo工程已经提交到github上,点击跳转 更多使用方法, ...