题目一:自定义样式的来源与优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>自定义样式来源与优先级</title>
  8. <!-- *第一种外部导入方式 -->
  9. <!--* <link rel="stylesheet" href="../static/style.css"> -->
  10. <!-- *第二种外部导入方式 -->
  11. <style>
  12. @import url("../static/style.css");
  13. </style>
  14. </head>
  15. <body>
  16. <!-- *1.默认样式继承自html -->
  17. <h1>晚上好</h1>
  18. <!-- *2.自定义的行内样式 覆盖默认样式-->
  19. <h2 style="color: red;">晚上好</h2>
  20. <!-- *3.自定义的行内样式,而在自定义的样式中,如有同名属性中则后面的会覆盖前面的-->
  21. <h2 style="color: red; color: green;">晚上好</h2>
  22. <!-- *4.自定义的文档样式/内部样式 -->
  23. <h3>晚上好</h3>
  24. <style>
  25. /* 分两步
  26. 1.找到它:选择器
  27. 2.设置它;样式声明 */
  28. h3{
  29. color: blue;
  30. }
  31. h3{
  32. color: green;
  33. }
  34. </style>
  35. <!-- *5.有两种导入方式,即<link...>与@import ... -->
  36. <h4>晚上好</h4>
  37. </body>
  38. </html>

外部样式文件:style.css

  1. h4 {
  2. color: green;
  3. }

效果图:

题目二:选择器与权重分析示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <link rel="stylesheet" href="../static/4-3.css"
  8. <title>选择器与权重</title>
  9. </head>
  10. <body>
  11. <div><h1 class="title" id="a1">Hello</h1></div>
  12. </body>
  13. </html>

对应的css文件为:

  1. /* *h1.title权重(0,1,1) */
  2. h1.title{
  3. color: red;
  4. }
  5. /* *div h1#a1.title权重(1,1,2) */
  6. div>h1#a1.title{
  7. color: green;
  8. }
  9. /* *忽略权重为最大 */
  10. h1{
  11. color:rosybrown !important;
  12. }
  13. /* *h1权重(0,0,1) */
  14. h1{
  15. color:chartreuse;
  16. }
  17. /* *h1#a1.title权重(1,1,1) */
  18. h1#a1.title{
  19. color: blue;
  20. }

效果图:

1.首先显示的是!important,因它忽略权重为最大:

2.然后删去上面最大的权重,依次显示的分别为:



更多相关文章

  1. Android主题与Toolbar样式之间的关系
  2. android string.setSpan
  3. [导入]2010-03-06 传智播客—Android(六)通知、样式、主题、HTML
  4. 【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念
  5. Android字体多样式和动画TextDrawable
  6. android中的样式主题和国际化
  7. Android中自定义Dialog
  8. android 自定义带关闭按钮的dialog
  9. Android中实现全屏、无标题栏的两种办法(另附Android系统自带样式

随机推荐

  1. py2exe使用相对路径的当前目录问题
  2. Python里如何取得第一个光驱的盘符???
  3. Python进阶----类的结构(公有成员 , 私有
  4. Python中的装饰器——11
  5. 学习笔记(11月02日)--高阶函数
  6. 变量和数据类型
  7. 第一个简单的flask程序(有问题,求大神帮忙
  8. One-Hot Encoding 及其使用原因
  9. 怎样用Python3 写一个爬图片的程序?
  10. Python-select详解(select、epoll)