H5——CSS选择器

最新推荐文章于 2024-09-04 10:11:48 发布

mapanpan0502

最新推荐文章于 2024-09-04 10:11:48 发布

阅读量334

点赞数

分类专栏： html 文章标签： css html5

本文链接：https://blog.csdn.net/mapanpan0502/article/details/110871359

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML和XHTML的历史与区别，强调了CSS在网页设计中的重要性，包括CSS规则构造、继承性和层叠特性。学习内容涵盖了CSS的选择器类型、引入方式以及浏览器兼容性问题。此外，还探讨了CSS在HTML中的使用方法，如内联样式、内嵌样式和外部样式表，并总结了不同引入方式的优先级。文章最后讨论了CSS选择器的优先级和在HTML中的实践应用。

摘要由CSDN通过智能技术生成

学习目标：

知识目标：
 1. HTML与XHTML
 2. (X)HTML与CSS
 3. 构造CSS规则
 4. CSS的继承性
 5. CSS的层叠特性
 6. 基本CSS选择器
 7. 在HTML中使用CSS方法

学习内容：

1. HTML与XHTML追根溯源
  概念：（1）(X)HTML是所有上网的人每天都离不开的基地，所有网页都是使用(X)HTML编写的。随着网络技术日新月异的发展，HTML也经历不断改进，因此可以认为XHTML是HTML的“严谨版”。
             （2）HTML在初期，为了能更广泛地被接受，因此大幅度放宽了标准的严格性，例如标记可以不封闭，属性可以加引号，也可以不加引号等等。这导致出现了很多混乱和不规范的代码，这不符合标准化的发展趋势，影响了互联网的进一步发展。

2. 追根溯源
   为此，相关规定的制定者——W3C组织。一直在不断地努力，逐步退出新的版本
   HTML2.0 ：于1995年11月发布。
   HTML3.2 ： 于1996年1月14日发布。
   HTML4.0 ： 于1997年12月18日发布。
   HTML4.01（微小改进）：于1999年12月24日发布。
   XHTML1.0：于2000年1月发布，后又经过修订于2002年8月1日重新发布。
   XHTML1.1：于2001年5月31日发布。
   XHTML2.0：正在制定中。

3. DOCTYPE
   （1）由于同时存在不同的规范和版本，因此为了使浏览器能够兼容多种规范，规范中规定可以使用DOCTYPE指令来声明使用哪种规范解释该文档。
   （2）<!doctype html>声明方式：html5版  <!doctype>是要强制使用的
   （3）版本类型声明：告诉浏览器写页面所用的标记的版本

4. XHTML与HTML的重要区别  有以下区别：
   （1）在XHTML中标记名称必须小写；在HTML中，标记名称可以大写或者小写
   （2）在XHTML中标记必须严格嵌套
   （3）在XHTML中标记必须封闭
   （4）在XHTML中即使是空元素的标记也必须封闭
   （5）在XHTML中属性值用双引号括起来

5. 如何编辑css
   css的语言是内嵌在HTML中，所以编写css的方法和编写HTML文档的方法是一样。你可以用任何一种文本编辑工具来编写。
   例如：window下的记事本和写字板，专门的HTML文本编辑软件。比如：editplus、sublime、Hbuilder、DW等。

6. 浏览器与css
   浏览器与css的兼容问题一直是一个很头疼的问题，在网页完成后做测试的时候，一般都会出现很多的兼容性问题，这是每一个开发者都会面临的问题。下面我们介绍一下常见的兼容问题：
   （1）图片默认有间距；解决：对img进行float
   （2）不同浏览器的margin和padding差异较大
   （3）css控制透明度问题：一般就直接 opacity:0.6; IE, filter:alpha(opacity=60)
   （4）IE6双边距bug：块属性添加浮动float之后，若在浮动方向上也有margin值，则margin值会加倍。解决：display:inline;
   （5）IE6中有链接的图片默认有边距；解决：border:none; border:0;

7. 传统HTML的缺点：有以下缺点：
  （1）维护困难。为了修改某个特殊标记（<h2>标签）的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。
  （2）标记不足。HTML本身的标签很少，很多标记都是为网站内容服务的，而关于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。
  （3）网页过“胖”。由于没有统一对各种风格样式进行控制，因此HTML的页面往往体积过大，占用了很多宝贵的宽带。
  （4）定位困难。在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的其它标记也导致页面的复杂和后期维护的困难。

8. CSS标准
   CSS（cascading Style Sheet的缩写），可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制web页面的外观。

9. 构造CSS规则
   （1）css基础语法
   （2）选择器{属性：值；属性：值}
   （3）选择器通常是您需要改变样式的html元素。
   （4）每条声明由一个属性和一个值组成，每个属性有一个值。属性和值用冒号分开，分号结束。
   （5）p {color:red; border:1px solid black;}  

10. CSS继承性
   css的某些样式是具有继承性的，那么什么是继承呢？
   继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。所有的css语句都是基于各个标签的继承关系的，如下：
   <style>
        p { border:1px solid red;
             color:blue;
             font-size:20px;
             text-align:center;
         }
   </style>
   <body>
          <p>
              我是父元素
              <span>我是子元素<em>我是孙子元素</em></span>
         </p>
   </body>

字体大小颜色都继承了，但是边框属性没有继承。不能继承的不仅仅是边框属性。

11. CSS继承性-继承关系
             ↗ 爸爸  → 自己  → 儿子
   爷爷
            ↘  大伯  →  堂哥
            ↗  body  →  p  →  em
  html 
           ↘  head  →  title

12. CSS继承的运用
   <!DOCTYPE html>
   <html>
           <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style>
                            p { color:red;}
                            em {background:#ccc;}
                    </style>
           </head>
           <body>
                   <p>
                       我是父元素
                       <em>我是子元素</em>
                   </p>
           </body>
     </html>
     注意：孩子能继承父元素的属性，但是父元素不能继承孩子的属性。

13. 基本CSS选择器
（1）标记选择器
   标签名选择器 给body里面的所有p标签设置border属性
   p { border:1px solid black; }
   <div>
         <p>css入门</p>
         <span>css选择器</span>
         <p>css优先级</p>
  </div>

（2）类别选择器
写法：.后跟类名

css入门

css选择器

（3）ID选择器
写法：#后跟ID名
ID选择器的优先级最高，页面中不能出现同名的ID，css样式的语法是

css入门

（4）通用选择器
写法：{ }
“”作为通用的选择器它的优先级是最低的，所以如果有css定义了指定的元素的样式的时候，那么它就会失去对于指定了css样式的元素的样式的控制了。

（5）伪类选择器
利用CSS的伪类别属性制作特效：
① :hover 鼠标经过超链接时的样式
② :active 鼠标在超链接上点击时的样式
③ cursor: pointer 小手
伪类选择器css编写：hover 导航

（6）后代选择器
① 在css选择器中，还可以通过嵌套的方式，对特殊位置的html元素进行控制，后代选择器对应用对象内的所有相应子节点都有效。包含选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。其选择范围如：

我是div标签里面的p标签

② 写法：div p {background:red; color:white; }

（7）子选择器
① 子选择器只对应用对象的直接相应子节点有效。
② css的编写如：

儿子

孙子

（8）群组选择器
定义：群组选择器是多个选择器通过逗号连接而成的，在声明各种css选择器时，如果某些选择器的风格是完全相同的或者部分相同，这时便可以利用并集选择器同时声明风格相同的css选择器。

我是h1

我是p

我是div

（9）交叉选择器
① 定义：“交叉”复合选择器是由两个选择器直接连接构成，其结果是选中二者元素范围的交集。其中第一个必须是标记选择器，第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格，必须连续书写。
② 注意!其中第一个必须是标记选择器，如p.class1,但有时候会看到.class1.class2,即两个都是类选择器，在其他浏览器中是允许出现这种情况的，但IE6不兼容。
③ 如：div.box { width:200px; }
④

Document

14. 子代选择器与后代选择器的区别
   （1）注意理解：子代选择器与后代选择器的区别
   （2）后代选择器：就是对象当中所有的子元素，孙子元素以及最底层的元素
   （3）子选择器：就单单是子元素，子元素的子元素就不算了

15. CSS的层叠特性
   （1）层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
   （2）层叠特性代码如：
      <style>
          p { color:#000; }
          .red { color:red; }
          #blue { color:blue; }
          .pink { color:pink !important; }
     </style>
     <body>
         <p>我是第一个</p>
         <p class="red">我是第二个</p>
         <p class="red" id="blue">我是第三个</p>
         <p style="color:orange" class="red" id="blue">我是第四个</p>
         <p class="pink" style="color:orange;" class="red"; id="blue";>我是第五个</p>
   </body>

16. 使用CSS选择器的优点
   （1）准确的控制内容的样式
   （2）代码简化，争取最少的代码量
   （3）代码美观易读
   （4）利用样式优先级的区别实现样式的覆盖

17. 选择器优先级总结
   优先级别：行内 > ID选择器 > 类选择器 > 标记选择器

18. 在HTML中使用CSS
   （1）标签内引入式
       直接在标签里面加style样式
       <body>
            <h2>css入门</h2>
            <p style="color:red">用于控制web页面的外观</p>
       </body>
   （2）内嵌式引入
       在head部分加入<style>标签
       <head>
            <title>css入门</title>
            <style>
                 p { font-size:14px;
                       color:black;
                    }
           </style>
        </head>
   （3）链接式
       在head部分加入link标签，引入外部css文件
       <head>
             <title>css入门</title>
             <link rel="stylesheet" type="text/css" href="my.css" />
      </head>
  （4）@import引入式
       @import是在style标签内写，引入css文件的
       <style type="text/css"> @import url(my.css); </style>

19. link和import的区别： 一般使用link较多，推荐使用link
  两者都是外部引用css的方式，但是存在一定的区别：
  （1）区别1：link是XHTML标签，除了加载css外，还可以定义RSS等其他事物；@import属于css范畴，只能加载css。
  （2）区别2：link引用css时，在页面载入时同时加载；@import需要页面完全载入以后加载。
  （3）区别3：link是XHTML标签，无兼容问题；@import是在css2.1提出的，低版本的浏览器不支持。
  （4）区别4：link支持使用Javascript控制DOM区改变样式；而@import不支持。

20. 在HTML中使用CSS方法-各种方式的优先级问题
   行内样式 > 内嵌式 > 链接式 > @import

学习产出：

1. CSS有几种引入方式，各自的特点是什么
2. CSS常用的选择器有哪些，如何书写

mapanpan0502

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录