一、CSS常用选择器

前言：

页面中，所有的CSS代码，需要写入到<style></style>标签中。

style标签的type属性应该选择"text/css"，但是type属性可以省略。

CSS修改页面中的所有标签，必须借助选择器选中。

选择器中，可以写多对CSS属性，用{}包裹。每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。

写法：

选择器{

属性1:属性值1;

}

(1)通用选择器：

     1. 写法：*{ }
     2.作用：选中页面中的所有标签
     3.优先级：最低

(2)标签选择器：

     1.写法：标签名{ }
     2.作用：根据选择器名 称，选中页面中的所有html标签。

(3)类选择器：(class选择器):

   1. 写法：.class名（注意：一定不能忘记前面的点.）
       调用：在html标签中，使用class="class名"调用选择器。
   2.优先级：class选择器>标签选择器

(4)ID选择器：

    1. 写法：#ID名{ }
        调用：在html标签中，使用id="id名"调用选择器。
    2.优先级：id选择器大于class选择器

(5)交集选择器:

    1. 写法：选择器1选择器2选择器3……{ }
                  多个选择器之间紧挨着，没有任何分隔；
    2. 作用效果：一个标签要满足交集选择器，则必须满足交集选择器中出现的所有选择器；

(6)并集选择器

    1. 写法：选择器1，选择器2，……选择器N{}。多个选择器之间用逗号分隔。
    2. 生效规则：只要满足并集选择器中的一个，即可生效。

(7)后代选择器

     1. 写法：选择器1选择器2……选择器N{}。选择器之间用空格分隔
     2.生效规则：必须满足，后一个选择器，是前一个选择器的后代（子代、孙代、），才会生效。

(8)子代选择器

     1.写法：选择器1>选择器2>……选择器N{}。选择器之间用>分隔
     2.生效规则：必须满足，后一个选择器，是前一个选择器的直接子代才会生效。隔代，即中间包含其他标签，则不会生效。

(9)伪类选择器（后续讲解）

二、CSS导入方式和优先级

【选择器的注意事项】

1 .id选择器与class选择器的区别？

   ①写法不同：class选择器使用.声明，而ID选择器使用#声明。
   ②优先级不同：当作用于同一标签时，id选择器高于class选择器
   ③在同一HTML文件中，ID是唯一的，所以ID选择器只能作用于一个标签上，但是，class选择器可以作用于N个标签。

2.选择器的命名规则：

   只能有：字母、数字、下划线、减号组成。开头不能是数字。

3.选择器的优先级排序：

   ①首先遵循近者优先原则。哪个选择器，作用于最里层标签，则哪个选择器生效。
   ②当作用于同一层标签时，优先级排序如下：
       id选择器大于class选择器大于标签选择器大于通用选择器。

【选择器的优先级】

1.第一原则：
                    近者优先。作用于最里层的选择器生效。
2.当作用于同一层时：
         每种选择器所占优先级，可以进行运算获得：
                 标签选择器占权重1
                 class选择器占权重10
                 id选择器占权重100
                 行级样式表style=""占权重1000
     注意：只有交集、后代、子代选择器，才参与优先级的累加！！而，并集选择器相当于写了两个选择器，没有总优先级。
3.如果计算出的优先级权重完全相同，则后写的选择器生效。

【引入CSS的三种方式】

1、行级样式表：在HTML标签中，使用style=""的形式引用；
                  <div style="height:100px"></div>
     优点：使用灵活，优先级权重最高。
     缺点：不符合W3c关于内容和表现分离的要求。不利于样式复用。代码杂乱，不利于后期维护。
2、内部样式表：在head标签中，使用style标签包裹CSS代码。
     特点：一定程度的实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面公用样式。
          <head>
                <style type="text/css">
                <style/>
          </head>
3、外部样式表：将CSS代码,全部写到一个CSS文件中，使用link标签，将html文件与css文件关联。
           rel:选择stylesheet
          type选择"text/css"，可以省略。
          href选择CSS文件地址。
             <link rel="stylesheet" type="text/css" href="css/01-css.css"/>
      优点：彻底实现CSS与HTML的分离，符合W3C规范，有利于多页面复用统一样式。

[导入CSS文件的两种方式]

     ①在<head>标签中，使用link链接：
          <link rel="stylesheet" type="text/css" href="css/01-css.css"/>
     ②在style标签中，使用@import导入；
          @import url("css/01-css.css");

【两种导入方式的区别】

　　①link术语标准的HTML标签，而@import url不是标准的标签；
　　②link可以兼容所有低版本的浏览器，而@import url只在CSS2之后可用；
　　③link是将两个文件链接起来，起桥梁作用，而@import相当于将CSS文件复制到HTML文件中；
　　④link会在HTML文件边加载的过程当中，边加载CSS文件；@import会在HTML文件加载完之后，再导入CSS文件；
        综上所述，我们使用link连接的方式加载CSS文件.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

CSS基础语法的更多相关文章

  1. CSS基础语法与选择器

    CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...

  2. CSS基础语法（一）

    目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...

  3. css基础-语法篇

    CSS基础 1.css简介 cascading style sheets    汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...

  4. html标签和css基础语法与浏览器兼容性等相关基础学习

    <!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...

  5. (二)CSS基础语法

    CSS语法规则由两个主要的部分构成:选择器,以及一条或者多条声明. 下面的示意图为您展示了CSS语法结构: 例如: h1{color:red;font-size:14px;} 值得不同写法和单位 其中 ...

  6. CSS从零开始(1)--CSS基础语法

    1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...

  7. HTML 网页开发、CSS 基础语法——十二.CSS选择器

    选择器 基础选择器:标签选择器,id选择器,类选择器,通配符选择器 高级选择器:后代选择器,交集选择器,并集选择器 1. 标签选择器: • 优点:可以选中所有的同名标签,设置所有同名标签的公共样式. ...

  8. HTML 网页开发、CSS 基础语法——八.HTML基本语法

    表格制作 1.表格基础 创建一个简单的表格至少有三个标签组成,分别是<table>,<tr>,<td>标签. table:表格,定义的是整个的表格大结构. tr:t ...

  9. HTML 网页开发、CSS 基础语法——三. HTML概念

    1.纯文本格式 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号,或者特殊字符,及特殊打印格式的文本,只保存文本,不保存其格式设置. ①格式对比 纯文本格式 富文本格式 最常 ...

  10. CSS 基础语法

    注:CSS对大小写不敏感,但是如果涉及到与HTML文档一起工作的时候,class和id名称对大小写是敏感的 一.color color:#ff0000; color:#f00; //缩写 color: ...

随机推荐

  1. python机器学习实战（一）

    python机器学习实战(一) 版权声明:本文为博主原创文章,转载请指明转载地址 www.cnblogs.com/fydeblog/p/7140974.html  前言 这篇notebook是关于机器 ...

  2. 浅入深出之Java集合框架（中）

    Java中的集合框架(中) 由于Java中的集合框架的内容比较多,在这里分为三个部分介绍Java的集合框架,内容是从浅到深,如果已经有java基础的小伙伴可以直接跳到<浅入深出之Java集合框架 ...

  3. 深度理解Node.js单线程模型

    Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...

  4. Java编程练习（四）——集合框架应用

    Java集合框架小应用之扑克牌小游戏 学习了Java集合框架之后,我写了一个扑克牌小游戏来巩固知识.学习之余的练习之作,有不足之处还得多多指教了~(*/ω＼*) 扑克牌小游戏背景: 1. 创建一副扑克 ...

  5. centos7使用cobbler（2.8）批量部署操作系统之一

    一.    批量部署操作系统的前提 要想批量部署操作系统,得具备以下条件: 客户机支持pxe网络引导 服务器端和客户端建立网络通信(DHCP) 服务器端要有可供客户机开机引导的引导文件 服务器端的可引 ...

  6. Chrome浏览器扩展开发系列之十二：Content Scripts

    Content Scripts是运行在Web页面的上下文的JavaScript文件.通过标准的DOM,Content Scripts 可以操作(读取并修改)浏览器当前访问的Web页面的内容. Cont ...

  7. 针对双系统ubuntu16.04卡死及系统没有声音解决方法

    楼主电脑系统状况:win10主系统,128固态为ubuntu系统       安装一共为两次. 第一次出现ubuntu安装成功后没有声音,主系统win10有声音,Ubuntu上检测不到声卡,说明ubu ...

  8. Java编程代码性能优化总结

    如果有足够的时间开发.维护代码,这时候就必须考虑每个可以优化的细节了,一个一个细小的优化点累积起来,对于代码的运行效率绝对是有提升的. 代码优化的目标是: 1.减小代码的体积 2.提高代码运行的效率 ...

  9. webgl自学笔记——光照

    在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型.着色器允许我们使用数学模型来控制如何照亮我们的场景. 最好有线性代数的相关知识. 本章中: 光源.法线.材料 光照和着色的区别 ...

  10. Iterator、for..of，for...in和自定义遍历器**

    Iterator.for..of,for...in和自定义遍历器 Iterator: var arr = [1,2,3,4,5]; var ite = arr[Symbol.iterator](); ...