页面中，所有的CSS代码，需要写入到<style></style>标签中。style标签的type属性应该选择text/css，但是type属性可以省略。

CSS修改页面中的所有标签，必须借助选择器选中。选择器中，可以写多对CSS属性，用{}包裹： 每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。

        选择器{
                    属性1:属性值1;
                    属性2:属性值2;
                  }

【CSS常用选择器】

1、标签选择器
       写法： HTML标签名{}
       作用： 可以选中页面中，所有与选择器同名的HTML标签。

2、 类选择器(class选择器)
         写法： .class名{}
        调用： 在需要调用选择器样式的标签上，使用class="class名"调用选择器
        优先级： >标签选择器

3、ID 选择器
       写法： #ID名{}
       调用： 需要调用样式的标签，起一个id="ID名"
       优先级： ID选择器>class选择器
       注意： 一个页面中，不能出现同名ID

【Class选择器与ID选择器的区别】
  1、 写法不同:class选择器用.声明，ID选择器用#声明；
  2、 优先级不同： ID选择器>class选择器
  3、 作用范围不同： class选择器可以多次调用，ID选择器只能使用一次。

【选择器的命名规范】
 1、只能有字母、数字、下划线、减号组成；
 2、 开头不能是数字。也不能是只有一个减号。
    一般，起名要求有语义，使用英文单词与数字的组合。

4、通用选择器
       写法： *{}
      作用： 可以选中页面中所有的HTML标签。
      优先级： 最低！！！

5、并集选择器
      写法： 选择器1,选择器2,……,选择器n{}
      生效规则： 多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。

6、交集选择器
     写法： 选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔
     生效规则： 多个选择器取交集，则必须满足所有选择器的要求，才能生效

7、后代选择器
     写法： 选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔
     生效规则： 只要满足，后一选择器是前一个选择器的后代，即可成效。（后代包括子代、孙代、重孙代。。。）
     通俗的讲：只要后一个选择器，在前一个选择器里面即可。

8、子代选择器
     写法： 选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
     生效规则： 必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能间隔任何标签）

【优先级的权重问题】

1、CSS生效的第一原则是“近者优先”！即，哪个选择器作用于最里层标签，则这个选择器生效；
2、当选择器作用于同一层时，可以根据优先级权重，进行累加计算：
     ID选择器*100 > class选择器*10 > 标签选择器*1
     注意： 并集选择器，相当于多个选择器拆开写，所以，并集选择器的优先级不能累加。
3、 当选择器作用于同一层，且优先级权重相等时。则，写在最后的选择器生效。

【引入CSS的三种方式】

1、 行内样式表：直接在HTML标签中，使用style=""的方式引用；
    <div style="height: 100px;"></div>
    优点： 使用灵活，优先级权重最高？
    缺点：不符合W3C关于“内容与表现分离”的要求；不利于样式复用；
 2、 内部样式表： 在<head></head>标签中，使用<style>标签包裹CSS代码；
       特点： 一定程度的实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面共用样式。
 3、 外部样式表： 将CSS单独写入CSS文件中，并与HTML文件关联。
       优点： 彻底实现HTML与CSS的分离，符合W3C规范，有利于多页面复用统一样式；
 【 导入CSS文件的两种方式】
① 在<head>标签中，使用link链接：
    <link rel="stylesheet" type="text/css"href="css/02-CSS.css" /> 
 ② 在<style>标签中，使用@import导入：
      @import url("css/02-CSS.css");

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

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. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  4. HTML&CSS基础-伪类选择器

    HTML&CSS基础-伪类选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  5. css基础-语法篇

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

  6. CSS 基础知识点 样式 选择器 伪类

    CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...

  7. HTML5——css基础语法

    1.了解CSS CSS是一种用来表现HTML等文件样式的计算机语言,是对HTMl文件中设置的各种标签添加各种各样的样式与表达方式,让网页更生动,更美观. 2.导入CSS的三种方式 1.行内样式表:直接 ...

  8. CSS基础语法

    一.CSS常用选择器 前言: 页面中,所有的CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择"text/css&qu ...

  9. H5取经之路——CSS基础语法

    一.CSS常用选择器 [选择器的命名规则] * 1.只能有字母数字下划线组成,不能有其他任何字符 * 2.开头不能是数字 [通用选择器] * 1.写法:*{} * 2.选中页面中的所有标签 * 3.优 ...

随机推荐

  1. Javascript中的noscript

    引言: 在浏览器日常火爆的时代,个大浏览器几乎都想占主导地位,争个你死我活,所以现在的各大浏览器都支持javascript脚本语言,但是在童鞋们,我们假设一下,万一哪个用户出于安全,把浏览器的java ...

  2. UNREFERENCED_PARAMETER

    作用:告诉编译器,已经使用了该变量,不必检测警告! 在VC编译器下,如果您用最高级别进行编译,编译器就会很苛刻地指出您的非常细小的警告.当你生命了一个变量,而没有使用时,编译器就会报警告:" ...

  3. 通过SQL脚本导入数据到不同数据库避免重复导入三种方式

    前言 无论何种语言,一旦看见代码中有重复性的代码则想到封装来复用,在SQL同样如此,若我们没有界面来维护而且需要经常进行的操作,我们会写脚本避免下次又得重新写一遍,但是这其中就涉及到一个问题,这个问题 ...

  4. .Neter玩转Linux系列之五：crontab使用详解和Linux的进程管理以及网络状态监控

    一.crontab使用详解 概述:任务调度:是指系统在某个时间执行的特定的命令或程序. 任务调度分类: (1)系统工作:有些重要的工作必须周而 复始地执行. (2)个别用户工作:个别用户可能希望执 行 ...

  5. JavaWeb（三）JSP之3个指令、6个动作、9个内置对象和4大作用域

    前言 前面大概介绍了什么是JSP,今天我给大家介绍一下JSP的三个指令.6个动作以及它的9大内置对象.接下来我们就直接进入正题 一.JSP的3个指令 JSP指令(directive)是为JSP引擎而设 ...

  6. Request.QueryString("id"）与Request("id")区别

    Request从几个集合取数据是有顺序的,从前到后的顺序依次是 QueryString,Form,最后是ServerVariables.Request对象按照这样的顺序依次搜索这几个集合中的变量,如果 ...

  7. 【京东个人中心】——Nodejs/Ajax/HTML5/Mysql爬坑之注册与登录监听

    一.引言 在数据库和静态页面都创建好之后,下面就该接着完成后台Node.js监听注册和登录的部分了.这个部分主要使用的技术是:Node.js的Express框架和ajax异步请求.登录和注册的代码实现 ...

  8. java远程备份mysql数据库关键问题（限windows环境，亲测解决）

    其它环境同理也可解决. 条件:为了使用mysql命令,本机要安装mysql ,我本机安装的是mysql 5.5. 错误1:使用命令 mysqldump -h192.168.1.50 -u root - ...

  9. M-移动端的webapp页面布局教程和webapp实战分析

    http://www.25xt.com/html5css3/8092.html 响应式设计 1 媒体查询 适用于不同固定宽度设计 媒体类型 : screen 屏幕 print 打印机 handheld ...

  10. vue2购物车ch2-(商品列表显示)

    1 index.html <!DOCTYPE html><html lang="en"><head> <meta charset=&quo ...