一、链接形式

1、行内样式
写法:在网页元素上通过style=””属性

  1. <div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>

2、内部样式表
写法:在网页创建嵌入的样式表,写在里面

  1. <head>
  2. <style>
  3. p{
  4. color:pink;
  5. border:blue 1px solid;
  6. }
  7. </style>
  8. </head>

3、链入外部样式表
写法:网页引入外部样式表,外部创建一个css文件,在html中通过连接这个css文件,一般写在css前面

  1. <link rel="stylesheet" type="text/css" herf="1.css">

二、各种选择器

css样式

  1. /* 1、元素选择器 */
  2. p {
  3. background-color: #ccc;
  4. }
  5. span {
  6. font-size: 24px;
  7. }
  8. a {
  9. color: red;
  10. }
  11. /* 2、类选择器 */
  12. .title_0 {
  13. font-weight: bold;
  14. }
  15. .title_1 {
  16. color: green;
  17. }
  18. p.title_1 {
  19. color: red;
  20. }
  21. .title_2 {
  22. color: violet;
  23. }
  24. .title_3.title_4 {
  25. font-style: italic;
  26. font-size: 20px;
  27. }
  28. .title_5.title_6.title7 {
  29. font-style: italic;
  30. font-size: 20px;
  31. background-color: aqua;
  32. }
  33. /* 3、ID选择器 */
  34. #title_8 {
  35. color: orange;
  36. font-weight: bold;
  37. }
  38. /* 4、分组选择器 */
  39. .t1,
  40. .t2,
  41. .t3 {
  42. background-color: gray;
  43. color: #fff;
  44. }
  45. /* 下面这个是多类选择器,代表只要class=t1 t2 t3中的任意一个元素,
  46. 则class生效,与上面的分组选择要区分开。
  47. .t1.t2.t3{
  48. background-color: gray;
  49. color: #fff;
  50. }
  51. */
  52. h1,
  53. h2,
  54. h3 {
  55. color: chocolate;
  56. }
  57. /* 5、属性选择器 */
  58. *[title="aaaa"] {
  59. font-weight: bold;
  60. color: red;
  61. }
  62. span[title="aaaa"] {
  63. font-weight: bold;
  64. color: green;
  65. }
  66. div,
  67. h3[title="hhhh"] {
  68. color: blue;
  69. }
  70. a[href][title="a"] {
  71. background-color: gray;
  72. }
  73. img[alt] {
  74. border: 5px solid red;
  75. }
  76. /* 6、后代选择器 */
  77. h3 em{
  78. color: aqua;
  79. }
  80. ul em{
  81. background-color: aquamarine;
  82. }
  83. .left a:link{
  84. background-color: gray;
  85. color: white;
  86. }
  87. /* 7、子元素选择器 */
  88. h4 > em{
  89. color: goldenrod;
  90. }
  91. /* 8、兄弟选择器 */
  92. li + li {
  93. color:#ccc;
  94. font-weight: bold;
  95. }

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>Document</title>
  8. <link rel="stylesheet" href="0706.css" />
  9. </head>
  10. <body>
  11. <!-- 1、元素选择器 -->
  12. <p>p element selector - text content</p>
  13. <span>span element selector - text content</span>
  14. <br />
  15. <a href="#">a link element selector - text link</a>
  16. <hr />
  17. <!-- 2、类选择器 -->
  18. <div class="title_1">div title_1</div>
  19. <!-- 结合元素的类选择器 -->
  20. <p class="title_1">p title_1</p>
  21. <div class="title_2">div title_2</div>
  22. <!-- 多类选择器 -->
  23. <!-- 同时执行title_0 和 title_2样式 -->
  24. <div class="title_0 title_2">title_0 title_2</div>
  25. <!-- .title_3.title_4连接可执行样式,
  26. 但是title_5与title_6.title7连接,而class中没有 title_6.title7 ,
  27. 所以无法执行title_5样式 -->
  28. <div class="title_3 title_4 title_5">title_3 title_4 title_5</div>
  29. <hr />
  30. <!-- 3、ID选择器 -->
  31. <!-- ID选择器名称区分大小写,不能以数字开头 -->
  32. <div id="title_8">ID selector生效</div>
  33. <div id="Title_8">ID selector不生效</div>
  34. <hr />
  35. <!-- 4、分组选择器 -->
  36. <!-- 将多个具有相同规则的选择器放在一起,用逗号,隔开 -->
  37. <p class="t1">This is t1</p>
  38. <p class="t2">This is t2</p>
  39. <p class="t3">This is t3</p>
  40. <hr />
  41. <!-- 5、属性选择器 -->
  42. <!-- 元素中的任何属性都可以使用属性选择器,包含但不限于title\href\alt\src\url... -->
  43. <p title="aaaa">p aaaa</p>
  44. <span title="aaaa">span aaaa</span>
  45. <div title="hhhh">div hhhh</div>
  46. <h3 title="hhhh">h3 hhhh</h3>
  47. <a href="#" title="a">link text</a>
  48. <br />
  49. <a href="qq.com" title="hhhh">link text title=hhhh</a>
  50. <br />
  51. <img src="https://www.php.cn/static/images/logos.png" alt="aaaa" />
  52. <br />
  53. <img src="https://www.php.cn/static/images/logos.png" />
  54. <hr />
  55. <!-- 6、后代选择器 -->
  56. <!-- 后代选择器可以作为某元素后代的元素 -->
  57. <h3>this is a cup of<em>TEA</em></h3>
  58. <h2>this is a cup of<em>TEA</em></h2>
  59. <!-- 两个元素层次间隔是无限的,即继承的元素所在的嵌套深度可以是无限的 -->
  60. <ul>
  61. <li>
  62. <ol>
  63. <li>q</li>
  64. <li>q</li>
  65. </ol>
  66. <ol>
  67. <li><em>121212</em></li>
  68. <li>w</li>
  69. </ol>
  70. <ol>
  71. <li>w</li>
  72. <li><em>343434</em></li>
  73. </ol>
  74. </li>
  75. </ul>
  76. <div class="main">
  77. <div class="left">
  78. <a href="#">link link link link</a>
  79. </div>
  80. </div>
  81. <hr>
  82. <!-- 7、子元素选择器 -->
  83. <!-- 缩小后代元素的范围,只选择某个元素的子元素 -->
  84. <!-- 下面的示例显示证明,第三个h4里面有span,而span才包含em,所以不生效 -->
  85. <h4><em>itema1</em></h4>
  86. <h4><em>itema2</em> <em>itema2</em></h4>
  87. <h4>
  88. <span><em>itema3</em></span>
  89. </h4>
  90. <hr>
  91. <!-- 8、兄弟选择器 -->
  92. <!-- 选择紧接在另一元素后的元素,且二者有相同的父元素 -->
  93. <div>
  94. <ul>
  95. <li>List item 1</li>
  96. <li>List item 2</li>
  97. <li>List item 3</li>
  98. </ul>
  99. <ol>
  100. <li>List item 1</li>
  101. <li>List item 2</li>
  102. <li>List item 3</li>
  103. <li>List item 4</li>
  104. </ol>
  105. </div>
  106. </body>
  107. </html>

效果图

更多相关文章

  1. 爆肝之我在html学导航表格
  2. html基础:表单元素及多媒体标签学习及实战
  3. 简单的后台管理页面
  4. html表单元素以及多媒体标签
  5. 实例用户注册及内联框架常用元素代码
  6. 使用表格元素制作课程表
  7. Android中的使用
  8. android string.setSpan
  9. Android常用布局类整理(一)

随机推荐

  1. Android有用代码(二)
  2. (android)应用基础
  3. xamarin android实现Toolbar+DrawerLayou
  4. Android(安卓)ViewPager图片滑动
  5. 配置android app 方法数超过65k问题
  6. 在android tegra2中添加一个camera
  7. Android Installation error: INSTALL_FA
  8. TextView的一些属性
  9. Android P应用显示宽高比maxAspectRatio
  10. Android调试神器stetho使用详解和改造