1.自定义样式

  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. </head>
  9. <body>
  10. <!-- 自定义样式是程序员自己编写用来覆盖浏览器的默认样式 ,自定义样式是可以继承仅限于背景和颜色字体-->
  11. <div>
  12. <h1 style="color: red; color: brown">php中文网</h1>
  13. <!-- 自定义样式和页面解析从上到下解析和书写的顺序有关 /此处是先解析了red红色到后面的brown橘色 所以后面的元素会覆盖前面的 -->
  14. </div>
  15. </body>
  16. </html>

2.内部样式

  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>Document</title>
  8. </head>
  9. <body>
  10. <style>
  11. h1{
  12. color: blue;
  13. }
  14. </style>
  15. <!-- 内部样式把h1标签写到style属性中 内部样式仅限于使用当前html页面使用-->
  16. <h1 >php中文网</h1>
  17. <h1 >php培训</h1>
  18. <h1 >php博客</h1>
  19. </body>
  20. </html>

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. <title>Document</title>
  8. <link rel="stylesheet" href="/0705/dem6.css">
  9. </head>
  10. <body>
  11. <h1 >php中文网</h1>
  12. <h1 >php培训</h1>
  13. <h1 >php博客</h1>
  14. </body>
  15. </html>

4. 选择器分类和使用方式

1.选择器分为标签选择器,属性选择器,群组选择器,通配选择器 代码如下,

  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="/0705/dem6.css">
  8. <title>选择器的权重和分析</title>
  9. </head>
  10. <body>
  11. <!-- 1.标签选择器是选用标签中的h1进行描述 代码如下 -->
  12. <style>
  13. /*标签选择器*/ h1{
  14. color: aquamarine;
  15. }
  16. </style>
  17. <h1>php中文网</h1>
  18. <h2 id="hello">php中文网</h2>
  19. <h3 class="em">php中文网</h3>
  20. <h4 class="am">php中文网</h4>
  21. <h5>php中文网</h5>
  22. <h6>php中文网</h6>
  23. <!-- 2.属性选择器
  24. 属性选择器的使用在当前标签里面需增加单独的一个属性、h2标签中使用了id="hello" -->
  25. <style>
  26. h2[id="hello"]{
  27. color: blueviolet;
  28. }
  29. </style>
  30. <!-- 3.群组选择器使用的是, 下面我们需要把h3标签和h4标签一起选择添加背景颜色需要使用, -->
  31. <style>
  32. h3.em,
  33. h4.am{
  34. background-color: aqua;
  35. }
  36. </style>
  37. <!-- 4.通配选择器使用的是* !important是可以 把权重调到最高级别 多个不同的标签需要在选中父级 (body)+* -->
  38. <style>
  39. body *{
  40. background-color: blue !important;
  41. }
  42. </style>
  43. </body>
  44. </html>

5.上下文选择器

  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="/0705/dem6.css" />
  8. <title>上下文选择器</title>
  9. </head>
  10. <!-- 1.子元素使用的> -->
  11. <style>
  12. .list > .item {
  13. border: 2px solid;
  14. }
  15. </style>
  16. <body>
  17. <ul class="list">
  18. <li class="item">item1</li>
  19. <li class="item">item2</li>
  20. <li class="item">
  21. item3
  22. <!-- 2.后代元素使用的是 空格 -->
  23. <style>
  24. .list .item {
  25. border: 2px solid;
  26. }
  27. </style>
  28. <ul>
  29. <li class="item">item3-1</li>
  30. <li class="item">item3-2</li>
  31. <li class="item">item3-3</li>
  32. </ul>
  33. </li>
  34. <li class="item">item4</li>
  35. <!-- 3.相邻兄弟使用的是+ 需要在标签里面添加一个属性 下面添加的是five
  36. 使用方法 -->
  37. <style>
  38. .list > .item.five{
  39. background-color: blue;
  40. }
  41. .list > .item.five + li{ /* 相邻兄弟使用的是 + */
  42. background-color: blue;
  43. }
  44. .list > .item.five ~ *{ /* 所有兄弟使用的是 ~ * */
  45. background-color: blue;
  46. }
  47. </style>
  48. <li class="item five">item5</li>
  49. <li class="item">item6</li>
  50. <li class="item">item7</li>
  51. <li class="item">item8</li>
  52. </ul>
  53. </body>
  54. </html>

6.选择器权重

  1. 选择器权重分为个十百 三位数 分别对应的是 标签代表个位数 class代表十位数 id代表百位数
  2. 举例:h1{
  3. color: blue;
  4. }
  5. 这里的h1就是一个标签属个位数 所以他的权重应该是001
  6. 举例2
  7. h1.title{
  8. color: blueviolet;
  9. }
  10. 这里有一个h1个位数和一个class一个十位数 权重应是011
  11. 举例3.
  12. h1.title#acitve{
  13. color: red;
  14. }
  15. 这里有一个h1标签 和一个class 和一个id 代表的权重是1 1 1
  16. 页面解析首选权重是最高的所以这里解析的是红色颜色 因为111的权重比 0 0 1 和 0 1 1 都要高

更多相关文章

  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. 国内哪些公司用go语言
  2. go语言的多行注释是什么
  3. go语言如何判断变量是slice还是array
  4. ubuntu怎么安装配置go语言环境
  5. 两个Golang超大文件读取的方案
  6. go语言如何删除链表节点
  7. 详解Golang编译成DLL文件
  8. go语言如何升级版本
  9. go语言如何删除切片
  10. go语言环境如何配置