浏览器

image.png
opera presto 被360昆仑万维收购了

内核：渲染rendering引擎/JS引擎

css

  1.    选择器 {
  2.         属性名：属性值;
  3.         属性名：属性值;
  4.     }

内联样式

行间样式

  1.  内联样式
  2.     <div style="width: 100px; height: 100px;"></div>

内部样式表

  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. <style>
  10.         /* 选择器 {
  11.         属性名：属性值;
  12.         属性名：属性值;
  13.     } */
  14.     div{
  15.         width: 100px;
  16.         height: 100px;
  18.     }
  19. </style>
  21. <body>
  24. </body>
  25. </html>

<styletype=”text/css”>
也可以，不写也行，但别写错了

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  10.     <!-- <style type="text/css">
  11.         /* 选择器 {
  12.         属性名：属性值;
  13.         属性名：属性值;
  14.     } */
  15.     div{
  16.         width: 100px;
  17.         height: 100px;
  18.         background-color: aqua;
  19.     }
  20. </style> -->
  21. </head>
  22. <!-- <style type="text/css">
  23.         /* 选择器 {
  24.         属性名：属性值;
  25.         属性名：属性值;
  26.     } */
  27.     div{
  28.         width: 100px;
  29.         height: 100px;
  30.         background-color: aqua;
  31.     }
  32. </style> -->
  34. <body>
  35.     <!-- <style type="text/css">
  36.         div {
  37.             width: 100px;
  38.             height: 100px;
  39.             background-color: aqua;
  40.         }
  41.     </style> -->
  42. <!--     
  43.     选择器 {
  44.     属性名：属性值;
  45.     属性名：属性值;
  46.     } -->
  48.     内联样式
  49.     <!-- <div style="width: 100px; height: 100px;"></div> -->
  51.     <div></div>
  53.     <style type="text/css">
  54.         div {
  55.             width: 100px;
  56.             height: 100px;
  57.             background-color: aqua;
  58.         }
  59.     </style>
  60. </body>
  62. </html>

css写到这些所有位置都可以起效,但一般写在head里
image.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=\, initial-scale=1.0">
  7.     <title></title>
  8.     <!-- <link rel="stylesheet" href="./1.css"> -->
  9. </head>
  10. <!-- <link rel="stylesheet" href="./1.css"> -->
  12. <body>
  13.     <!-- <link rel="stylesheet" href="./1.css"> -->
  15.     <div></div>
  16.     <link rel="stylesheet" href="./1.css">
  18. </body>
  19. </html>

rel必须要写 type=”text/css”

权重

内联样式>内部样式表>外部样式表

image.png

选择器

id选择器

  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.         #box {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: black;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.   <div id="box"></div>
  18. </body>
  19. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title></title>
  10. </head>
  12. <body>
  13.     <style>
  14.         #box {
  15.             width: 100px;
  16.             height: 100px;
  17.             background-color: black;
  18.         }
  19.     </style>
  20.     <div id="box"></div>
  22. </body>
  24. </html>

id一个html里只能出现一次

class类选择器

  1.  <style>
  2.        .box{
  3.            width: 200px;
  4.            height: 200px;
  5.            background-color: green;
  6.        }
  7.    </style>
  8.    <div class="box"></div>
  9.    <div class="box"></div>

标签选择器

  1.    <style>
  2.         div {
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: green;
  6.         }
  7.     </style>
  8.     <div ></div>
  9.     <div ></div>

通配符选择器

  1.   <style>
  2.        *{
  3.            margin: 0;
  4.        }
  5.        ul,p{
  7.        }
  8.     </style>

属性选择器

  1.     <style>
  2.         #box{
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: black;
  6.         }
  8.         [id="box"]{
  9.             width: 100px;
  10.             height: 100px;
  11.             background-color: black;
  12.         }
  14.         /* 都会选择box  box1 只要带id就是 */
  15.         [id]{
  16.             width: 100px;
  17.             height: 100px;
  18.             background-color: black;
  19.         }
  20.     </style>
  22.     <div id="box"></div>
  23.     <div id="box1"></div>
  1.    <style>
  2.      [href]{
  3.          text-decoration: none;
  4.      }
  5.     </style>
  6.   <a href="http://www.baidu.com">baidu</a>
  1.  <style>
  2.       [type="text"]{
  3.         width: 200px;
  4.       }
  5.       [type="password"]{
  6.           width: 300px;
  7.       }
  8.   </style>
  9.   <input type="text">
  10.   <br>
  11.   <input type="password">

image.png
一般用在区分不同的input中

  1.   <style>
  2.       div{
  3.           width: 200px;
  4.           height: 200px;
  5.           background-color: green !important;
  6.       }
  7.   </style>
  8.   <div style="background-color: red;"></div>