CSS简述
CSS被称为级联样式表或者CSS样式表。CSS也是一种标记语言。
CSS主要用于设置HTML页面中的:
1.文本内容（字体，大小，对齐方式等），
2.图片的外形（宽高，边框样式，边距等）,
3.版面的布局和外观显示样式。
 
它的使用分两步
1.定义： .red {color: red}
2.调用:

<div class="red">
CSS语法规范
CSS既然是一种编程语言，则就有它自己的编程规范。
CSS规则由两个主要的部分构成：选择器+一条或多条声明。
选择器用于指定CSS样式的HTML标题，花括号内是对该对象设置的具体样式。
选择器 {样式}
属性和属性值以“键值对”的形式出现，并使用分号";"结束。
 
CSS选择器的作用
选择器就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。
上面截图的CSS做2件事：
1.找到所有的h1标签
2.设置这些标签的样式，比如把颜色设置成红色
 
选择器的分类
选择器分为基础选择器和复合选择器两大类。
基础选择器是由单个选择器组成的。
基础选择器包括：标签选择器，类选择器，id选择器，通配符选择器。
 
基础选择器
标签选择器
标签选择器是指使用html标签作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。作用是标签选择器可以把某一类标签全部选择出来，比如所有的p标签和所有的div标签。
优点：能快速为页面中同一类标签统一设置样式。
缺点：不能差异化样式，只能选择全部的标签类型。
 
类选择器
类选择器（开发最常用）是指差异化选择不同的标签，单独选一个或某几个标签，有某种意义的一组标签。
选择器在html中以class属性表示，在CSS中，类选择器一个点“.”号显示。
<style type="text/css">

        /* 样式点定义，结构类定义，一个或多个，开发最常用 */

        .red {

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .green {

            width: 100px;

            height: 100px;

            background-color: green;

        }

</style>

<body>

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

    <div class="green"></div>

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

</body>
类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选择出这些标签。
标签属性中写多个类名，多个类名用空格分开。
给一个标签写多个类名，那么这标签就分别有多个类名的样式，从而节约CSS代码，方便统一修改。
<style>

        .red {

            width: 100px;

            height: 100px;

            background-color: red;

        }

        .font20 {

            font-size: 20px;

        }

</style>

<div class="red font20">红色</div>
id选择器
id选择器可以为特定id的html元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
/* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */ #pink { color: pink; } <div id="pink">迈克尔*杰克逊</div>
id选择器与类选择器的区别
拿身份证来举例子
类选择器好比人的名字，一个标签可以有多个名字，一个名字又能被多个标签使用。
id选择器好比人的身份证号，全国唯一，不得重复。
id选择器与类选择器最大的区别是使用次数上，id选择器只能被使用一次，类选择器可以被使用多次。
类选择器在修改样式时用的最多。
id选择器一般用于页面唯一元素，经常和JS搭配使用。
 
通配符选择器
*表示页面里所有的标签， 只需要定义，不用调用就会自动添加到页面中的所有标签上
标签包括：html, body, ul, li等。
* { font-weight: 800; }
 
复合选择器
CSS中，可以把选择器分为两类：基础选择器和复合选择器。
复合选择器是建立在基础选择器之上的，是多个基础选择器的组合。
通过复合选择器可以更准确的选择目标元素。
常有的复合选择器：后代选择器，子选择器，并集选择器，伪类选择器等。
 
后代选择器
后代选择器的定义： 元素1 元素2 { 样式声明 }
元素1和元素2中间用空格隔开
元素1，元素2可以是任意基础选择器，如：标签选择器，id选择器，class选择器等。
元素1是父级，元素2是子级，最终选择的是子级
元素2可以表示是儿子，孙子..., 如：ul a {} 会把ul标签下的 子元素a/ 孙子元素a都选中。建议将完整的父子关系元素写全，不用省略中间元素，便于阅读。
<head>

  <style>

    ol li {

      color: red;

    }

    ul li a {

      color: blue;

    }

    ul li .a0 {

      color: cadetblue;

    }

  </style>

</head>

<body>

  <ul>

    <li>孩子标签</li>

    <li>孩子标签</li>

    <li>

      孩子标签

      <a href="">孙子标签</a>

    </li>

    <li>

      孩子标签

      <a href="" class="a0">孙子标签</a>

    </li>

  </ul>

  <ol>

    <li>孩子标签</li>

  </ol>

</body>
子选择器
只选择父元素最近一级的子元素，不包含孙子，重孙子元素。
语法表示为：元素1>元素2 { 样式声明 }
如下：只会选择“子元素链接”
<style>

    div>a {

      color: darkkhaki;

    }

</style>

<body>

  <div>

    <a href="">子元素链接</a>

    <p>

      段落内容

      <a href="">孙子元素链接</a>

    </p>

  </div>

</body>
并集选择器
并集选择器可以同时选中多组标签，同时为它们定义相同的样式。用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接，任意形式的选择器都可以作为并集选择器的一部分，包含（基础选择器，复合选择器），并集选择器约定竖着写
语法：元素1, 元素2 { 样式声明 }
元素1和元素2中间用英文逗号隔开
逗号可以理解成和的意思
并集选择器用于集体声明。
  <style>

    p,

    div,

    span,

    .pig>li {

      color: darkslategrey;

    }

  </style>

<body>

      <div>熊大</div>

      <p>熊二</p>

      <span>光头强</span>

      <ul class="pig">

        <li>佩奇</li>

        <li>乔治</li>

      </ul>

</body>
伪类选择器
伪类选择器用于向某些选择器添加特殊的状态，通俗讲：为某一状态的元素添加样式。如鼠标悬停时的a元素，或第1个，第n个元素。
伪类选择器最大的特点是用冒号（:）表示，比如：:hover, :first-child。
伪类选择器比类选择器厉害，厉害在伪类有两个点，类只有一个点。
<style>

    /* 伪类选择器 */

    /* a:hover:鼠标悬停时 */

    div p a:hover {

      color: red;

      text-decoration: none;

    }

    /* a:hover:鼠标按下时 */

    div p a:active {

      color: blue;

      text-decoration: none;

    }

  </style>

<body>

    <div>

    <a href="">子元素链接</a>

    <p>

      段落内容

      <a href="">孙子元素链接</a>

    </p>

  </div>

  </body>
链接伪类选择器工作中常见用法
   /* a伪类选择器工作中常见用法 */

    a {

      color: gray;

    }

    a:hover {

      color: red;

    }

a伪类选择器使用注意

1.为了确保生效，按照lvha的顺序声明，:link, :visited, :hover, :active。记忆方法：LV包包就是hao
2.因为a链接浏览器中有默认样式，所以实际工作中单独给a指定样式，如：body{color:red}这样无法改变a样式。
 
input伪类选择器
input:focus用于选中form表单中光标选中的输入框，可以突出用户操作的输入框
<style>

    input:focus {

      background-color: rebeccapurple;

    }

</style>

<body>

  <input type="text">

  <input type="text">

  <input type="text">

</body>
CSS引入方式
内部样式表
将页面标签中的样式全部抽出来，放在一个style标签中，可以方便的控制整个页面中的元素样式设置。
但是布局和样式并没有完全分离。
<head>

  <style>

    div {

      color: red;

    }

  </style>

</head>

<body>

  <div>Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。</div>

</body>

行内样式表

用于少量修改的场景使用。
<body>

  <div style="color: blue; font-weight: 700; font-size: 20px;">给我一个粉红色的回忆。</div>

</body>

外部样式表

把css样式定义在一个单独的文件中，在html的head标签中使用link引入，使用的频率最多
<head>

  <link rel="stylesheet" href="mystyle.css">

</head>
 
 

CSS概念与CSS选择器的更多相关文章

  1. CSS系列：CSS选择器

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记样式都是通过不同的CSS选择器来控制的.用户只需要通过选择对不同的HTML标签进行选择,并赋予各种样式声明,即可实现各种效果. ...

  2. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  3. CSS概念【记录】

    1.CSS语法 2.@规则 3.注释 4.层叠 5.优先级 6.继承 7.值 8.块格式化上下文 9.盒模型 10.层叠上下文 11.可替换元素 12.外边距合并 13.包含块 14.视觉格式化模型 ...

  4. 从零开始学 Web 之 CSS（一）选择器

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

  5. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  6. 朝花夕拾《精通CSS》二、选择器 & 层叠

    一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...

  7. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

  8. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  9. CSS 概念 & 作用

    http://www.cnblogs.com/moveofgod/archive/2012/09/18/2691101.html 式样定义   如何显示 HTML内容 通常存储在式样表中 作用 : 解 ...

  10. Html 之div+css布局之css选择器

    CSS选择器 什么叫选择器?通俗的来说就是 我想改变html 中某个地方的  字体大小 或者背景色 或者其它属性 内边距 外边距,宽度高度 等等 一些Css 样式. 那么我们如何找到对应的 元素呢? ...

随机推荐

  1. java 将字符串变成小写 单引号内的字符串大小写不变

    public static void main(String[] args) { String str = "asdfFFFSSDAF'aaaaAAA','132213'"; Sy ...

  2. 【驱动】ifconfig up后内核网络驱动做了什么.md

    背景 最近在排查一个网络问题,ifconfig eth0 up 后,网卡link up比较慢.因此,分析了下从ifconfig up 到网络驱动的调用流程.这里顺便作个记录. ifconfig eth ...

  3. java进阶(16)--System常用方法总结

    一.Systen.out静态变量 静态变量,用的最多的是调用print方法   二.System.out.println() println()其实是printStream类的方法   三.Sytem ...

  4. 玩转 Helm

    0. 前言 在 kubernetes 的系列文章中,我们介绍了 kubernetes 的种种概念,特性.不过对于如何部署并没有介绍,想象下如果 kubernetes 中 pod 的数量达到成百,上千, ...

  5. Guava缓存工具类封装和使用

    本文为博主原创,未经允许不得转载: Guava是谷歌提供的一款强大的java工具库,里面包含了很多方便且高效的工具,在项目开发中有业务场景需要保存数据到内存当中, 且只需要保存固定时间就可以,该数据只 ...

  6. 解决 idea maven plugins 报红波浪线

    导入新项目到 idea 的时候,由于依赖的环境以及项目中 maven 编译所依赖的pom的版本不同,很多时候导入到idea的时候 maven Plugins 会出现报红的情况,这是由于maven仓库中 ...

  7. Go-获取指定长度随机字符串

    // GetCode 获取一个随机用户唯一编号 func GetCode(codeLen int) string { // 1. 定义原始字符串 rawStr := "abcdefghijk ...

  8. linux环境C语言实现：h264与pcm封装成AVI格式

    ​ 前言 拖了很久的AVI音视频封装实例,花了一天时间终于调完了,兼容性不是太好,但作为参考学习使用应该没有问题. RIFF和AVI以及WAV格式,可以参考前面的一些文章.这里详细介绍将一个H264视 ...

  9. [转帖]PostgreSQL 慢查询SQL跟踪

    https://www.cnblogs.com/VicLiu/p/12017704.html PostgreSQL 开启慢SQL捕获在排查问题时是个很有效的手段.根据慢SQL让我在工作中真正解决了实际 ...

  10. [转帖]调试springboot数据库系统应用时常用debug日志配置, 解决问题缩小范围时常用

    https://www.yihaomen.com/article/1853.html 摘要: 用 spring boot 开发应用时,在遇到麻烦问题时,经常会打开debug日志,下面记录一个通用的思路 ...