search

博客列表 >css的引用和css选择器

css的引用和css选择器

后网络时代
后网络时代原创
2021年01月25日 18:16:07657浏览

1. 实例演示css规则的三种引入到html文档中的方式;

答：
行内样式：通过选择器的style属性来设置：

  1. <h3   style="color:red;background-color:cyan;">通过选择器的style属性来设置</h3>

内部样式（嵌入样式）：写在head标签间的style标签中，仅对当前页面有效：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style type="text/css">
  8.     h3{
  9.         background-color:linen;
  10.         color:navy;
  11.         font-size: 24px;
  12.         line-height: 35px;
  13.         text-decoration:line-through;
  14.     }
  15.     </style>
  16. </head>
  17. <body>
  18. <h3>此价格已经取消</h3>
  20. </body>
  21. </html>

效果:

引入外部样式：这样样式可以共享；
css.css:

  1. *{
  2. margin:0;
  3. padding:0;
  4. box-sizing: border-box;
  5. }
  6. body{
  7.     background-color:steelblue
  8. }
  9. .login{
  10.     position:absolute;
  11.     width:300px;
  12.     border:1px  solid  #ccc;
  13.     top:50%;
  14.     margin-top:-71px;
  15.     left:50%;
  16.     margin-left:-150px;
  17.     font-size: 14px;
  18.     text-align: left;
  19.     text-indent:40px;
  20.     height: 142px;
  21.     border-radius: 6px;
  22.     box-shadow:1px 1px  15px #ccc;
  23.     background-color: #fff;
  24. }
  25. .login   form p{
  26.     line-height:35px;
  27.     word-spacing:10px;
  28. }
  29. .login   form  p  input{
  30.     width:150px;
  31. }
  32. .login   form  p  input[name="useryzm"]{
  33.     width:50px;
  34. }
  35. .login   form  p:nth-of-type(4){
  36.     text-indent:120px;
  37. }
  39. .login   form  p  button{
  40.  width:80px;
  41. }
  42. .login   form  p  span{
  43.     line-height:25px;
  44.     background-color: #ccc;
  45.     margin-left: 3px;
  46.     vertical-align:1px;
  47.     word-spacing: 20px;
  48.    }

outcss.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="css/css.css"    />
  8. </head>
  9. <body>
  10. <div  class="login">
  11. <form action="">
  12. <p><label for="username">用户名：</label><input type="text" name="username"   id="username"    value=""   /></p>
  13. <p><label for="userpwd">密&nbsp;码：</label><input type="password" name="userpwd"   id="userpwd"    value=""   /></p>
  14. <p><label for="useryzm">验证码：</label><input type="text" name="useryzm"   id="useryzm"    value=""   /><span>123456</span></p>
  15. <p><button>登陆</button></p>
  16. </form>
  18. </div
  20. </body>
  21. </html>

效果：

在style标签或者css文件中使用inmport引用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style  type="text/css">
  8.     @import url(css/css.css);
  9.     </style>
  10. </head>
  11. <body>
  12. <div  class="login">
  13. <form action="">
  14. <p><label for="username">用户名：</label><input type="text" name="username"   id="username"    value=""   /></p>
  15. <p><label for="userpwd">密&nbsp;码：</label><input type="password" name="userpwd"   id="userpwd"    value=""   /></p>
  16. <p><label for="useryzm">验证码：</label><input type="text" name="useryzm"   id="useryzm"    value=""   /><span>123456</span></p>
  17. <p><button>登陆</button></p>
  18. </form>
  20. </div
  22. </body>
  23. </html>

效果：

2. 实例演示标签选择器，class选择器,id选择器,上下文选择器， 结构伪类选择器，重点是结构伪类选择器

答案：

标签选择器，class选择器,id选择器：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9. /* 标签选择器： */
  10. p{
  11.     font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  12. height:35px;
  13. line-height: 35px;
  14. border:1px  solid red;
  15. box-sizing: border-box;
  16. }
  17. a{
  18.     color:red;
  19. }
  20. a:link{
  21.     color:blueviolet;
  22. }
  24. a:visited{
  26. color:chartreuse;
  28. }
  29. a:hover{
  30.     color:mediumblue;
  31. }
  32. a:active{
  33.     color:teal;
  34. }
  36. .title{
  37.     color:red;
  38. }
  40. /* id主要是为js服务的，故需要人为保持唯一性 */
  41. #id1{
  42.     color:cyan
  43. }
  46. </style>
  47. <body>
  48. <P>p标签选择器</P>
  49. <a   href="">百度</a>
  50. <h3   class="title">h3.title文章标题</h3>
  51. <p id="id1">id选择器</p>
  52. <script>
  53. document.querySelector("a").addEventListener('click',show);
  54. function show(ev){
  56.     ev.preventDefault();
  58. }
  59. </script>
  60. </body>
  61. </html>

效果：

标签选择器，class选择器,id选择器：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>上下文选择器</title>
  7. </head>
  8. <style>
  9.  /* 只是直系子元素 */
  10.  div.ft div{
  11.     width:300px;
  12.     float: left;
  13.     margin-left: 12px;
  14.     background-color: oldlace;
  15. }
  16. div>ul>li{
  17.     width:100%;
  18.     border-bottom:1px  solid red;
  19.     list-style: none;
  20.     font-size:14px;
  21.     line-height: 30px;
  22. }
  23. /* 后台选择器： */
  24. div  ul  li{
  25.     width:100%;
  26.     border-bottom:1px  solid red;
  27.     list-style: none;
  28.     font-size:14px;
  29.     line-height: 30px;
  30. }
  31. div.add{
  32. width:300px;
  34. }
  35. div.add p+p{
  36.     background-color: orangered;
  38. }
  39. div.ft{
  40.     overflow:hidden;
  41. }
  42. div.test{
  43.     width:500px;
  44.     background-color:orangered;
  45. }
  47. div.test   h3 ~ p{
  48.     background-color:navy;
  49.     color:orangered;
  50. }
  51. </style>
  52. <body>
  53. <div  class="ft">
  54.     <div>
  55.         <h3>div>ul>li:</h3>
  56.         <ul>
  57.             <li>测试信息1子元素</li>
  58.             <li>测试信息2子元素</li>
  59.             <li>测试信息3子元素</li>
  60.         <ul>
  61.             <li>测试信息孙子元素</li>
  62.         </ul>
  63.         </ul>
  64.     </div>
  65.     <div>
  66.     <h3>div  ul  li:</h3>
  67.     <ul>
  68.         <li>测试信息1子元素</li>
  69.         <li>测试信息2子元素</li>
  70.         <li>测试信息3子元素</li>
  71.     <ul>
  72.         <li>测试信息孙子元素</li>
  73.     </ul>
  74.     </ul>
  75. </div>
  77. <div  class="add">
  78. <h3>相邻选择符号E+F:选择紧贴在E元素之后F元素</h3>
  79. <p>选择符号一</p><p>选择符号</p><h4>间隔一个</h4><p>间隔一个元素的p</p>
  81. </div>
  82. </div>
  83. <div  class="test">
  84.  <h3>兄弟选择符(E~F):选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。</h3>
  85.  <p>p兄弟选择符(E~F)</p>
  86.  <h3>h4兄弟选择符(E~F)</h3> 
  87.  <p>p兄弟选择符(E~F)</p> 
  88.  <p>p兄弟选择符(E~F)</p> 
  89. </div>
  93. </body>
  94. </html>

效果：

结构伪类选择器：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style  type="text/css">
  9. /* 常用伪类 */
  10. /* 所有的子元素li */
  11. ul  li{
  12.     list-style: none;
  13. }
  14. /* ul的第一个子元素li */
  15. ul  li:first-child{
  16.     color:red;
  17. }
  18. /* ul的最后一个子元素li */
  19. ul  li:last-child{
  20.     color:cyan;
  21. }
  22. /* ul的第二个子元素li */
  23. ul  li:nth-child(2){
  24. color:chartreuse;
  25. }
  26. /* ul的倒数第二个子元素li */
  27. ul  li:nth-last-child(2){
  28. color:chartreuse;
  29. }
  32. /* 匹配dl中第一个同级元素  n从1开始*/
  33. dl  dd:first-of-type{
  34.     color:red;
  35. }
  36. /* 匹配dl中最后一个同级元素dt */
  37. dl  dt:last-of-type{
  38.     color:red;
  39. }
  41. /* dl  dt:last-of-type{
  42.     color:red;
  43. } */
  44. /* 匹配dl中唯一的同级元素h3 */
  45. dl  h3:only-of-type{
  46.     color:red;
  47. }
  48. /* 匹配dl中第二个同级元素dd,如果不是dd则无效 */
  49. dl  dd:nth-of-type(2) { 
  50.    color:darkblue;
  51. }
  52. /* 匹配dl中倒数第二个同级元素dd,如果不是dd则无效 */
  53. dl  dd:nth-last-of-type(2){
  54.     color:darkblue;
  55. }
  56. /* //n从1开始  偶数行*/
  57. div.n1 p:nth-of-type(2n){
  58. color:red;
  59. }
  60. /* //n从1开始  奇数行*/
  61. div.n2 p:nth-of-type(2n+1){
  62. color:darkblue;
  63. }
  64. /* //从零开始 */
  65. div.n3 p:nth-of-type(odd){
  66. color:red;
  67. }
  68. div.n4 p:nth-of-type(even){
  69. color:darkgreen;
  70. }
  72. </style>
  73. <body>
  74. <ul>
  75. <li>111</li>
  76. <li>2</li>
  77. <li>3</li>
  78. <li>4</li>
  79. <li>5</li>
  82. </ul> 
  84. <dl>
  85. <dt>今晚今晚要唱到爆炸</dt>
  86. <dd>今晚今晚要唱到爆炸</dd>
  87. <dt>今晚今晚要唱到爆炸</dt>
  88. <dd>今晚今晚要唱到爆炸</dd>
  89. <dt>今晚今晚要唱到爆炸</dt>
  90. <dd>今晚今晚要唱到爆炸</dd>
  91. <h3>唯一同级元素</h3>
  92. </dl>
  93. <h3>2n(n=1,2,3,...)</h3>
  94. <div   class="n1">
  95. <p>奇偶数选择</p>
  96. <p>奇偶数选择</p>
  97. <p>奇偶数选择</p>
  98. </div>
  99. <h3>2n+1(n=1,2,3,...)</h3>
  100. <div   class="n2">
  101.     <p>奇偶数选择</p>
  102.     <p>奇偶数选择</p>
  103.     <p>奇偶数选择</p>
  104.     </div>
  106.     <h3>odd</h3>
  107.     <div   class="n3">
  108.         <p>奇偶数选择</p>
  109.         <p>奇偶数选择</p>
  110.         <p>奇偶数选择</p>
  111.     </div>
  112.         <h3>even</h3>
  113.         <div   class="n4">
  114.             <p>奇偶数选择</p>
  115.             <p>奇偶数选择</p>
  116.             <p>奇偶数选择</p>
  117.         </div>
  118. </body>
  119. </html>

效果：

上一条：php环境的搭建及插入到HTML文档下一条：如何解决Redis雪崩、穿透、并发等问题
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多