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. awk调用date命令

    创建文件date.awk: $ == { cmd = "\"" while (cmd | getline line) { print line } close(cmd) ...

  2. JVM之类加载器、加载过程及双亲委派机制

    JVM 的生命周期 虚拟机的启动 Java 虚拟机的启动是通过引导类加载器(bootstrap class loader)创建一个初始类(initial class)来完成的,这个类是由虚拟机的具体实 ...

  3. Django model重写save方法及update踩坑记录

    一个非常实用的小方法 试想一下,Django中如果我们想对保存进数据库的数据做校验,有哪些实现的方法? 我们可以在view中去处理,每当view接收请求,就对提交的数据做校验,校验不通过直接返回错误, ...

  4. windows脱密码总结

    方式1:通过SAM数据库获得本地用户HASH sam文件:是用来存储本地用户账号密码的文件的数据库system文件:里面有对sam文件进行加密和加密的密钥 利用方式: 导出sam和system: re ...

  5. CTF-Pwn-[BJDCTF 2nd]diff

    CTF-Pwn-[BJDCTF 2nd]diff 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!本文仅用于学习与交流,不得用于非 ...

  6. 区间dp C - Two Rabbits

    C - Two Rabbits 这个题目的意思是,n块石头围一圈.一只兔子顺时针,一只兔子逆时针(限制在一圈的范围内). 这个题目我觉得还比较难,不太好想,不过后来lj大佬给了我一点点提示,因为是需要 ...

  7. 201771030125-王英雪 实验一 软件工程准备一<构建之法与博客首秀>

    项目 内容 班级博客 点我呀! 作业要求 看这里! 课程学习目标 提出三个问题并以写博客的形式记录下来 参考文献 现代软件工程讲义 三个问题 问题一:软件工程究竟是什么? 在现代软件工程讲义一书中给出 ...

  8. 【Scala】什么是隐式转换？它又能用来干嘛？该怎么用

    文章目录 定义 隐式参数 隐式转换 隐式值:给方法提供参数 隐式视图 将Int和Double类型转换为String 狗狗学技能(使用别的类中的方法) 使用规则 定义 隐式参数 隐式参数指在函数或者方法 ...

  9. 排序算法整理（Python实现）

    目录 1. 冒泡排序 2. 选择排序 3. 插入排序 4. 归并排序 5. 快速排序 1. 冒泡排序   冒泡排序(Bubble Sort)是稳定排序,其基本思想是:遍历待排序列,依次两两比较,如果顺 ...

  10. [hdu5340]二分，枚举，二进制压位加速

    题意:判断一个字符串能否划成三段非空回文串. 思路:先用二分+hash在nlogn的时间内求出以每条对称轴为中心的回文串的最大半径r[i](可以用对称的两个下标之和来表示 ),然后利用r[i]求出pr ...