样式来源

1.内联样式

l59oudwp.png

  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>1.内联样式</title>
  8. </head>
  9. <body>
  10. <h1 style="color: red">iteme1</h1>
  11. </body>
  12. </html>

2.内部样式/文档样式

l59oxys9.png

  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>2.内部样式</title>
  8. <style>
  9. h1 {
  10. color: red;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <h1>Hello world</h1>
  16. </body>
  17. </html>

3.外部样式

l59p1euy.png

  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>3.外部样式</title>
  8. <link rel="stylesheet" href="css/demo3.css" />
  9. </head>
  10. <body>
  11. <!-- HTML代码部分 -->
  12. <h1>外部样式</h1>
  13. </body>
  14. </html>
  1. /*demo3.css文件内容*/
  2. h1 {
  3. color: red;
  4. }

样式优先级

l59p7l1q.png

  • HTML部分代码
  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. <link rel="stylesheet" href="css/demo4.css" />
  9. <style>
  10. h1 {
  11. color: aqua;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h1 style="color: red">样式来源与优先级:内联样式>内部样式>外部样式</h1>
  17. </body>
  18. </html>
  • css部分代码
  1. h1 {
  2. color: blue;
  3. }

常用选择器

l59r24ww.png

  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. <style>
  9. /*1.标签选择器:将所有p标签文字颜色设置为红色 使用标签进行选择*/
  10. p {
  11. color: red;
  12. }
  13. /* 2.属性选择器:将带有title属性的p标签文字颜色更改颜色 使用标签内的属性特征选择*/
  14. p[title="属性选择器"] {
  15. color: aqua;
  16. }
  17. /* 3.class选择器:将class为one的p标签文字颜色更换 使用.加上对应的class名称选择 */
  18. .one {
  19. color: yellow;
  20. }
  21. /* 4.id选择器:将id为two的p标签文字颜色更换 使用#加上对应的ID名称选择*/
  22. #two {
  23. color: blue;
  24. }
  25. /* 5. 群组选择器:同时选中第二个和第三个P标签 使用,号隔开 */
  26. p[title="属性选择器"],
  27. .one {
  28. background-color: cadetblue;
  29. }
  30. /* 上下文选择器---- */
  31. /* 子元素选择器: >*/
  32. .a > .b {
  33. border: 1px solid #000;
  34. }
  35. /* 后代选择器: 空格 */
  36. .a .b {
  37. background-color: violet;
  38. }
  39. /* 兄弟选择器: + 通过第三个选择第四个*/
  40. .b:nth-of-type(3) {
  41. background-color: lawngreen;
  42. }
  43. /* 通配选择器:* */
  44. .b:nth-of-type(3) + * {
  45. background-color: yellow;
  46. }
  47. /* 选择所有兄弟:~ */
  48. .b:nth-of-type(3) ~ * {
  49. background-color: yellow;
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <p>标签选择器</p>
  55. <p title="属性选择器">属性选择器</p>
  56. <p class="one">class选择器</p>
  57. <p id="two">id选择器</p>
  58. <ul class="a">
  59. <li class="b">item1</li>
  60. <li class="b">item2</li>
  61. <li class="b">item3</li>
  62. <li class="b">item4</li>
  63. <li class="b">item5</li>
  64. </ul>
  65. </body>
  66. </html>

选择器权重

众所周知css代码默认是受书写顺序影响的例如:

l59qjf35.png

  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. <link rel="stylesheet" href="css/demo6.css" />
  9. <style></style>
  10. </head>
  11. <body>
  12. <div>
  13. <h1 id="a" class="b">选择器权重分析</h1>
  14. </div>
  15. </body>
  16. </html>
  1. /*
  2. 选择器权重(重点!)
  3. 选择器权重通畅可以看为三个整数 百位 十位 各位
  4. 分别对应了id class tag标签
  5. 例如
  6. h1{
  7. color:red;
  8. }
  9. 权重就是0, 0 ,1:也就是0个id 0个class 1个标签
  10. h1 .a{
  11. color:red;
  12. }
  13. 权重就是0, 1 ,1:也就是0个id 1个class 1个标签
  14. 选择器尽量避免使用ID进行选择,因为id权重太高一旦使用后面修改可能会带来麻烦
  15. 下面是选择器权重的详细代码介绍
  16. */
  17. h1 {
  18. color: red;
  19. }
  20. h1 {
  21. color: yellow;
  22. }
  • 那么字体颜色红色将会被黄色覆盖那么我们如何让红色在不改变位置的情况下显示出来呢
  1. /* 方法1:改变后权重为0 , 0, 2 */
  2. body h1 {
  3. color: red;
  4. }
  5. /*0, 0, 1*/
  6. h1 {
  7. color: yellow;
  8. }
  9. /* 方法2: */
  10. /* 此时权重为 0 , 1 , 1 */
  11. h1.b {
  12. color: red;
  13. }
  14. /* 0 , 0 ,1 */
  15. h1 {
  16. color: yellow;
  17. }
  18. /* 方法3: */
  19. /* 1 , 0 , 1 */
  20. h1#a {
  21. color: red;
  22. }
  23. /* 0 , 0 , 1 */
  24. h1 {
  25. color: yellow;
  26. }

方法1:l59qveqt.png

方法2:l59qvyk7.png

方法3:l59qsx9z.png

更多相关文章

  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. 天猫双11数据过于完美?我们用python来看看
  2. 说点掏心窝子的话。
  3. 我被创业导师 PUA 了!
  4. 别再问如何用Python提取PDF内容了!
  5. 入职工作之后,我才明白的事。
  6. Python数据分析实战:缺失值处理
  7. 数据分析实战:母婴商品分析
  8. pandas数据处理
  9. 给女朋友讲了讲 V8 引擎的“回调函数”!
  10. Android解决ViewPager嵌套ViewPager中多