一、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. Sass控制命令及函数知识整理

    2017-07-07  20:17:17 最底部附结构图(实在是结构图太长了没办法) 2017-06-22  09:11:43 一.Sass的控制命令 1.@if语句 @if 指令是一个 SassSc ...

  2. 网络流入门—用于最大流的Dinic算法

    "网络流博大精深"-sideman语 一个基本的网络流问题 最早知道网络流的内容便是最大流问题,最大流问题很好理解: 解释一定要通俗! 如右图所示,有一个管道系统,节点{1,2,3 ...

  3. jquery中append与appendTo方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  4. string.trim().length()的用法

    public class Test{ public static void main(String args[]){ String data = " a bc "; //调用str ...

  5. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  6. POJ 2152 fire / SCU 2977 fire（树型动态规划）

    POJ 2152 fire / SCU 2977 fire(树型动态规划) Description Country Z has N cities, which are numbered from 1 ...

  7. 基于 WebRTC 技术的实时通信服务开发实践

    随着直播的发展,直播实时互动性变得日益重要.又拍云在 WebRTC 的基础上,凭借多年的开发经验,结合当下实际情况,开发 UPRTC 系统,解决了网络延时.并发量大.客户端解码能力差等问题. WebR ...

  8. 记一次 联想杨天A4600K 安装操作系统遇到的尴尬

    故事的开始: 某日,有一台联想扬天A4600K台式机,该机器原来使用的系统为windowsXP,先需要安装win7系统. 准备好gho镜像,准备ghost安装系统.不料,提示镜像文件损坏,无法安装.起 ...

  9. NOIP模拟:能源(二分答案)

    题目描述 小美为了拯救世界能源危机,她准备了 n 台蓄电池.一开始每台蓄电池有 ai 个单位的能量. 现在她想把 n 台蓄电池调整到能量相同.对于每台蓄电池可以给另一台蓄电池传递能量.但是会有能量损耗 ...

  10. saveOrupdate和 merge的区别

    merge和saveOrUpdate方法区别在于:merge方法是把我们提供的对象转变为托管状态的对象:而saveOrUpdate则是把我们提供的对象变成一个持久化对象:说的通俗一点就是:saveOr ...