一、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. 基于JAX-WS的WebService实现

    JAX-WS是一套Java用于开发XML Web Services的技术规范,它的实现一般有CXF.AXIS和JDK(version>=1.6),借助这些我们可以进行SOAP服务开发. CXF和 ...

  2. python编程快速上手之第9章实践项目参考答案

    本章介介绍了shutil,zipfile模块的使用,我们先来认识一下这2个模块吧. 一.shutil模块 shutil模块主要用于对文件或文件夹进行处理,包括:复制,移动,改名和删除文件,在shuti ...

  3. 005.Getting started with ASP.NET Core MVC and Visual Studio -- 【VS开发asp.net core mvc 入门】

    Getting started with ASP.NET Core MVC and Visual Studio VS开发asp.net core mvc 入门 2017-3-7 2 分钟阅读时长 本文 ...

  4. Django学习（八）---修改文章和添加文章

    博客页面的修改文章和添加新文章 从主页点击不同文章的超链接进入文章页面,就是传递了一个id作为参数,然后后台代码根据这个参数从数据库中取出来对应的文章,并把它传递到前端页面 修改文章和添加新文章,是要 ...

  5. 【TensorFlow入门完全指南】模型篇·逻辑斯蒂回归模型

    import库,加载mnist数据集. 设置学习率,迭代次数,batch并行计算数量,以及log显示. 这里设置了占位符,输入是batch * 784的矩阵,由于是并行计算,所以None实际上代表并行 ...

  6. Longest Palindromic Substring - 字符串中最长的回文字段

    需求:Given a string S, find the longest palindromic substring in S. You may assume that the maximum le ...

  7. nopCommerce 3.9 大波浪系列 之 路由注册

    在Global.asax,Application_Start()方法中会进行路由注册,代码如下. public static void RegisterRoutes(RouteCollection r ...

  8. SVN分支/合并操作小记

    一.前言 说来惭愧,鄙人从事开发多年,使用svn已经好几个年头了,但是却仅限于update.commit.compare之类的操作,最近想到github上学习别人写的NIO源码,顺便去熟悉git的使用 ...

  9. Java 学习内容总结

    最近对Core Java基础做了一些学习.有自己的见解,也有别人的总结,供大家参考. 1 实现多线程的方式有几种? 其实这个问题并不难,只是在这里做一个总结.一共有三种. 实现Runnable接口,并 ...

  10. 九度OJ1000

    题目描述: 求整数a,b的和. 输入: 测试案例有多行,每行为a,b的值. 输出: 输出多行,对应a+b的结果. 样例输入: 1 2 4 5 6 9 样例输出: 3 9 15 代码实现: #inclu ...