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. 清北学堂—2020.3NOIP数学精讲营—Day 1 morning 重点笔记

    qbxt Day 1 morning 重点笔记 --2020.3.8 济南 主讲:钟皓曦 1 正数%负数==正数 负数%正数==负数 负数%负数==负数 a%b的答案的符号取决于a的符号. 2 快速幂 ...

  2. 绕WAF文章收集

    在看了bypassword的<在HTTP协议层面绕过WAF>之后,想起了之前做过的一些研究,所以写个简单的短文来补充一下文章里“分块传输”部分没提到的两个技巧. 技巧1 使用注释扰乱分块数 ...

  3. 折腾了好久的vscode配置c/c++语言环境（Windows环境下）

    最近有c语言相关的作业,但是突然再次拿起大一的时候那些c语言编辑器的时候,总觉得不智能,于是下了一个vscode,准备配一个c语言的环境 步骤如下: 1.vs官网下载好vscode,安装好以后再下载一 ...

  4. 【蓝桥杯C组】备赛基础篇之高精度算法

    一.高精度加法 思路: 运用vector数组(c选手可用len来记录数组长度,数组去保存数字)将存入字符串里面的数字符倒叙保存,按照小学的加法列式,相加保存进位即可.具体参考代码. 详细代码解析: # ...

  5. Mysql 常用函数（15）- upper 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html upper 的作用 将所有字符串更改为大写,然后返 ...

  6. HDU 2011 （水）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2011 题目大意:给你 m 个数,对于每个数,求前 n 项和,数列:1 - 1/2 + 1/3 - 1/ ...

  7. 使用GitHub的API实现文件上传--李渣渣（lizaza.cn）

    最近搭建了一个自己的博客网站和一个在线图片格式转换工具,经常写博客的时候需要上传图片,在线转换工具也需要一定的空间来临时存放图片文件.服务器的存储空间又比较有限,于是就想着将图片存储的GitHub上, ...

  8. 1005 Spell It Right (20分)

    1005 Spell It Right (20分) 题目: Given a non-negative integer N, your task is to compute the sum of all ...

  9. 豹子安全-注入工具-疑问_MySQL_基于联合查询_按钮【获取基本信息】不能成功的解决方法。

    豹子安全-注入工具-疑问_MySQL_基于联合查询_按钮[获取基本信息]不能成功的解决方法. 网站: http://www.leosec.net 如下GIF影片所示:

  10. python--遇到SyntaxError: Non-UTF-8 code starting with '\xb8' in file

    在运行python中因为添加了中文注释,遇到SyntaxError: Non-UTF-8 code starting with '\xb8' in file 经过百度,说是Python的默认编码格式是 ...