一、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. 前端需要注意的seo

    1 合理的title ,description ,keyswords 搜索引擎对这三项的权重逐渐减小,title 强调重点即可 ,重要的关键字不要超过两次,而且要靠前. 2 不同的tilte要有所不同 ...

  2. java基础之集合框架（1）

    一.介绍Collection 1.概念:Collection是最基本的集合接口,一个Collection代表一组Object,即Collection的元素(Elements).一些Collection ...

  3. HTML5性能优化[转]

    在看完这两章内容之后,我意犹未尽,于是乎从网上搜索关键字“Java Web高性能”,在IBM社区找到两篇不错的文章,而让人更意外的是我发现那两篇文章的内容跟<高性能HTML5>前两章高度相 ...

  4. 【使用WCF，发布服务端浏览报错】未能从程序集“System.ServiceModel, Version=3.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089” 中加载类型 “System.ServiceModel.Activation.HttpModule”。

    问题: 在WIN7中的IIS服务器中部署WCF服务程序时,通过浏览器访问报出如下错误: 未能从程序集"System.ServiceModel, Version=3.0.0.0, Cultur ...

  5. H5读取本地文件操作

    H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php. ...

  6. C语言代码训练（一）

    今天我们先来讲解一道C语言的经典例题,也是从零开始系列中的一道课后练习题. 请用控制台程序绘制如下图案. 循环经典例题 分析情况 这个题目是要求打印30行"*",每行打印的个数不同 ...

  7. InnoDB关键特性之change buffer

    一.关于IOT:索引组织表 表在存储的时候按照主键排序进行存储,同时在主键上建立一棵树,这样就形成了一个索引组织表,一个表的存储方式以索引的方式来组织存储的. 所以,MySQL表一定要加上主键,通过主 ...

  8. Java栈与堆 （转）

    1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取速度比堆要快,仅次于直接位于C ...

  9. rabbitmq重装之后无法加入原有cluster的bug解析

    背景: 一台controller node,一台compute1节点 两台机器的host文件均已经进行hostname解析 两节点本已经加入了同一rabbitmq cluster 但controlle ...

  10. [补档][Jxoi2012] 奇怪的道路

    [Jxoi2012] 奇怪的道路 题目 传送门 :http://www.lydsy.com/JudgeOnline/problem.php?id=3195 小宇从历史书上了解到一个古老的文明.这个文明 ...