CSS引入方式" class="reference-link">CSS引入方式

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>CSS三种引入方式</title>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <!--外部样式-->
  8.     <link type="text/css" rel="stylesheet" href="style.css" />
  9.     <!--内嵌样式-->
  10.     <style>
  11.       .head{
  12.           width: 100px;
  13.           height: 100px;
  14.       }
  15.     </style>
  16. </head>
  17. <body>
  18.     <!--行内样式-->
  19.     <p style="color:#F00; "></p>
  20.     <div class="head"></div>
  21.     <div></div>
  22. </body>
  23. </html>

选择器" class="reference-link">选择器

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器</title>
  7.     <style>
  8.         p{color: darkmagenta;}
  9.         .header{
  10.             width: 1920px;
  11.         }
  12.         #main{
  13.             width: 1920px;
  14.         }
  15.        /* 同级相邻选择器 */
  16.         .str+li{color: deepskyblue;}
  17.         /* 同级所有选择器 */
  18.         .int~li{color: gold;}
  19.         /* 后代选择器 */
  20.         ul li{
  21.           color: hotpink;
  22.         }
  23.         /* 子元素选择器 */
  24.         body>ul>li{
  25.           color: rgb(228, 51, 20);
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <p>标签选择器</p>
  31.     <div class="header">class选择器</div>
  32.     <div id="main"></div>
  33.     <ul>
  34.         <li>text1</li>
  35.         <li class="str">text2</li>
  36.         <li>text3</li>
  37.         <ul>
  38.             <li class="int">text4</li>
  39.             <li>text5</li>
  40.             <li>text6</li>
  41.         </ul>
  42.     </ul>
  43. </body>
  44. </html>

伪类选择器" class="reference-link">伪类选择器

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>伪类选择器</title>
  7.     <style>
  8.         ul li:nth-of-type(3){
  9.             color: hotpink;
  10.         }
  12.         ul li:nth-of-type(n){
  13.             color: hotpink;
  14.         }
  16.         ul li:nth-of-type(2n){
  17.             color: #000;
  18.         }
  20.         ul li:nth-of-type(2n+1){
  21.            color: lawngreen;
  22.         }
  24.         ul li:nth-of-type(even){
  25.            color: lightcoral;
  26.         }
  27.         ul li:nth-of-type(odd){
  28.             color: lightgray;
  29.         }
  31.         ul li:first-of-type{color: mediumvioletred;}
  32.         ul li:last-of-type{color: midnightblue;}
  33.         ul li:nth-of-type(n+5){color: blue;}
  34.         ul li:nth-last-of-type(-n+3){color: brown;}
  35.         ul li:nth-last-of-type(4){color: rgb(243, 16, 84);}
  37.         ul li:only-of-type{color: darkblue;}
  39.     </style>
  40. </head>
  41. <body>
  42.     <ul>
  43.         <li>text1</li>
  44.         <li>text2</li>
  45.         <li>text3</li>
  46.         <li>text4</li>
  47.         <li>text5</li>
  48.         <li>text6</li>
  49.         <li>text7</li>
  50.         <li>text8</li>
  51.         <li>text9</li>
  53.     </ul>
  54.     <ul>
  55.         <li>texts</li>
  56.     </ul>
  57. </body>
  58. </html>

更多相关文章

  1. php常用运算符、条件分支、循环、及文件引入
  2. 在 Vue.js 中制作自定义选择组件
  3. Android(安卓)TextView设置多样式文本，跑马灯以及霓虹灯效果
  4. Android的Toolbar(含溢出菜单设置[弹出菜单的使用])的使用PopMen
  5. Android(安卓)UI中的自定义style和theme以及AlertDialog
  6. select在ios和android中样式不兼容
  7. 透明Dialog的实现.
  8. 【Android】强大的SpannableStringBuilder
  9. 在Eclipse中配置Android的import和format模板

随机推荐

  1. android 相对定位布局方向详解
  2. 编译android源码出现的问题解析
  3. android直接利用opencv打开摄像头失败原
  4. android基础知识15：获得android系统信息03
  5. android:scrollbarStyle属性及滚动条和分
  6. android 设置透明效果
  7. android ethernet
  8. 「抄底 Android 内存优化 2」 —— Linux
  9. Android 之 SQLite数据库的使用
  10. android fitsSystemWindows的使用