一、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. 多个Tomcat 配置多个JDK

  2. 使用Cain&Abel进行网络嗅探

    启动Cain&Abel并切换到"sniffer(嗅探)"标签. 第一步:需要对Cain&Abel进行配置,先单击最上面的"Configure(配置)&qu ...

  3. javascript之原型（prototype）

    今天是第一次写博客,写点在javascript中重要的一个概念----原型(prototype): 原型,顾名思义,就是一切事物的模板. 柏拉图在<理想国>卷10中说:"床不是有 ...

  4. 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  5. lsdslam代码笔记

    0.1. question 0.2. 算法框架 0.3. 代码解析 0.3.1. 数据结构 0.3.1.1. Frame 0.3.1.2. FrameMemory 0.3.1.3. FramePose ...

  6. Bootstrap按钮插件

    前面的话 按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态.正在加载状态.正常状态等.本文将详细介绍Bootstrap按钮插件 加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示 ...

  7. 解决QZ-SDK静态库libRPToolLib.a中avfoundation.o文件和kxMovie依赖的ffmpeg静态库libavdevice.a函数重复定义的问题

    解决QZ-SDK静态库libRPToolLib.a中avfoundation.o文件和kxMovie依赖的ffmpeg静态库libavdevice.a函数重复定义的问题 在原来项目中导入全志v3相机的 ...

  8. Django学习（一）---基本配置及创建项目、应用

    安装:在Django官网下载最新版Django然后通过pip安装即可 一.创建项目 进入文件夹,打开cmd窗口,输入django-admin startproject myblog(项目名) 二.创建 ...

  9. Intellij Idea配置说明（从Eclipse转Idea）

      1.idea的字体大小设置 字体大小设置的方法: 进入Settings>>Editor>>Colors&Fonts>>Font,改变Size大小. 2. ...

  10. Android开发相关操作

    命令行启动DDMS工具,前提是有这个工具 ~/rustsoftware/adt-bundle-linux-x86_64-20140702/sdk/tools$ ./ddms 查看机器内存情况: adb ...