01 引入方式

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <!--内联方式-->
  9.     <style>
  10.         #A{
  11.             width: 60px;
  12.             height: 40px;
  13.             background-color:aqua;
  14.         }
  15.     </style>
  16.     <!--外联方式-->
  17.     <link rel="stylesheet" href="./01 引入方式.css">
  18. </head>
  19. <body>
  20.     <div style="width: 60px; height: 40px;background-color: burlywood;">零</div><!--内部方式-->
  21.     <div id="A">一</div>
  22.     <div class="B">二</div>
  23. </body>
  24. </html>
  1. .B{
  2.     width: 60px;
  3.     height: 40px;
  4.     background-color: blue;
  5. }
  7. /*
  8.     颜色:(RGB模式)
  9.     R:红色      0-255
  10.     G:绿色      0-255
  11.     B:蓝色      0-255
  13.     1.  color:(10,20,30)
  14.     2.  color:(100%,20%,50%)
  15.     3.  color:blue
  16.     4.  color:#fff
  17. */
  19. /*
  20.     原理:
  21.     优先原则:
  22.     继承原则
  23. */

02 基本选择器

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./02 基本选择器.css"/>
  9. </head>
  10. <body>
  11.     <div>好好</div>
  12.     <div id="haha">哈哈</div>
  13.     <div class="hehe">呵呵</div>
  14.     <div class="hehe">嗯嗯</div>
  15. </body>
  16. </html>
  1. /*通配符*/
  2. *{
  4.     background-color: aquamarine;
  5. }
  6. /*标签*/
  7. div{
  8.     width: 240px;
  9.     height:320px;
  10.     background-color: blanchedalmond;
  11. }
  12. /*ID选择器*/
  13. #haha{
  14.     width: 240px;
  15.     height:320px;
  16.     background-color: chartreuse;
  17. }
  18. /*class选择器*/
  19. .hehe{
  20.     width: 240px;
  21.     height:320px;
  22.     background-color: darkred;
  23. }
  25. /*
  26.     p#p{}   选择p标签下id为p的元素
  27.     p.p{}   选择p标签下class为p的元素
  28. */

03 组合选择器

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./03 组合选择器.css"/>
  9. </head>
  10. <body>
  11.     <div>哈哈
  12.         <p>嗯嗯</p>
  13.     </div>
  14.     <p>呵呵
  16.     </p>
  17. </body>
  18. </html>
  1. /*分组选择器*/
  2. div,p{
  3.     width: 240px;
  4.     height:240px;
  5.     background-color: aqua;
  6. }
  7. p{
  8.     font-size: 32px;
  9. }
  11. /*嵌套选择器*/
  12. div p{
  13.     font-size: 24px;
  14.     border:1px solid #ffffff;
  15. }
  16. /*
  17.     子选择器        div > p
  18.     同级选择器      div+p
  19. */

04 属性选择器

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./04 属性选择器.css ">
  9. </head>
  10. <body>
  11.     <div id="11">哈哈</div>
  12.     <div class="22">呵呵</div>
  13.     <div class="33">嗯嗯</div>
  14.     <div class="22 33">好好</div>
  15.     <div class="44">哦哦</div>
  16.     <div class="22 44">噢噢</div>
  17.     <div class="33 44">欧欧</div>
  19. </body>
  20. </html>
  3. /*属性选择器
  5. 1.有属性的S标签
  7. 基本S[属性]{
  9. }
  10. 2.属性=值的标签
  11. [属性=值]{}
  13. 3.属性包含值的标签
  14. [属性~=值]{}
  16. 4.属性以值开始的标签
  17. [属性^=值]{}
  19. 5.属性以值结束的标签
  20. [属性$=值]{}
  21. */
  23. div{
  24.     width: 160px;
  25.     height:240px;
  26.     background-color:#369;
  27. }
  28. /*所有div都被选择*/
  31. div[id]{
  32.     width: 160px;
  33.     height:240px;
  34.     background-color:#666;
  35. }
  36. /*有id属性的div被选择*/
  39. div[class = "33"]{
  40.     width: 160px;
  41.     height:240px;
  42.     background-color:#963;
  43. }
  44. /*属性class="33"的被选择*/
  46. div[class~="44"]{
  47.     width: 160px;
  48.     height:240px;
  49.     background-color:red;
  50. }
  51. /*属性class包含"44"的被选择*/

05 伪元素选择器

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./05 伪元素选择器.css"/>
  9. </head>
  10. <body>
  11.     <!--<before>-->
  12.     <p>哈哈</p>
  13.     <!--<after>-->
  14. </body>
  15. </html>
  1. p::before{
  2.     content:"开始";
  4. }
  5. p::after{
  6.     content:"结束";
  7. }
  8. /*
  9.     块元素:
  10.     第一行:first-line
  11.     第一个字母:first-letter
  12. */

06 背景

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./06 背景.css"/>
  9. </head>
  10. <body>
  11.     <br>
  12.     <br>
  13.     <br>
  14.     <br>
  15.     <br>
  16.     <br>
  17.     <br>
  18.     <br>
  19.     <br>
  20.     <br>
  21.     <br>
  22.     <br>
  23.     <br>
  24.     <br>
  25.     <br>
  26.     <br>
  27.     <br>
  28.     <br>
  29.     <br>
  30.     <br>
  31.     <br>
  32.     <br>
  33.     <br>
  34.     <br>
  35.     <br>
  36.     <br>
  37.     <br>
  38.     <br>
  39.     <br>
  40.     <br>
  41.     <br>
  42.     <br>
  43.     <br>
  44.     <br>
  45. </body>
  46. </html>
  1. body{
  2.     /*设置图片背景,默认平铺*/
  3.     background-image: url('http://www.pptbz.com/pptpic/UploadFiles_6909/201211/2012111719294197.jpg');
  4.     /*
  5.     background-repeat:repeat-x;     以x轴平铺
  6.     background-repeat:repeat-y;     以y轴平铺
  7.     */
  8.     background-repeat: no-repeat;   /*设置不平铺*/
  10.     background-position: 50% 10%;   /*设置平移*/
  11.     background-attachment: fixed;   /*固定*/
  12. }

07 字体

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./07 字体.css"/>
  9. </head>
  10. <body>
  11.     <p class="p">hello world</p>
  12. </body>
  13. </html>
  1. .p{
  2.     /*设置字体*/
  3.     font-family: 'Courier New', Courier, monospace;
  4.     /*设置大小*/
  5.     font-size: 24px;
  6.     /*设置粗细:normal(普通) lighter(小) bold(大)*/
  7.     font-weight: bold; 
  8.     /*样式*/
  9.     font-style: italic;
  10.     /*行距*/
  11.     line-height: 20px;
  13.     /*
  14.         font:style weight size/line-height font-family
  15.     */
  18.     /*字符间距*/
  19.     letter-spacing: 10px;
  20.     /*空格间距*/
  21.     word-spacing: 20px;
  22.     /*书写方向*/
  23.     direction:ltr;/*右到左*/
  24.     /*水平线
  25.         overline        上
  26.         line-through    中
  27.         underline       下
  28.     */
  29.     text-decoration: aquamarine line-through;
  30.     /*对齐
  31.         center  left    right   justify(两端对齐)
  32.     */
  33.     text-align:center;
  34.     /*文字缩进*/
  35.     text-indent: 60px;
  36.     /*英文大小写
  37.         uppercase   全大
  38.         lowercase   全小
  39.         capitalize  首大
  41.     */
  42.     text-transform: uppercase;
  43.     /*文字省略*/
  44.     width: 300px;
  45.     background-color: aqua;
  46.     white-space: nowrap;/*不换行*/
  47.     overflow: hidden;   /*截掉*/
  48.     text-overflow: ellipsis;/*替换为省略号*/
  50. }
  51. /*  与图片结合的布局
  52.     1.垂直对齐:top  center  bottom
  53.     vertical-align:top
  54.     2.环绕图片:
  55.     float:left;
  56.     3...
  57. */

08 链接

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./08 链接 列表.css">
  9. </head>
  10. <body>
  11.     <a href="#1">AAA</a><br>
  12.     <a href="#1">BBB</a><br>
  13.     <a href="#2">CCC</a>
  16. </body>
  17. </html>
  1. a{
  2.     color: aqua;
  3. }
  4. /*伪类
  5.     初始状态        link   
  6.     被访问          visited
  7.     获得焦点        hover  
  8.     点击            active 
  9. */
  10. a:link {color: #FF0000}
  11. a:visited {color: #00FF00}
  12. a:hover {color: #FF00FF}
  13. a:active {color: #0000FF}

09 盒子框模型

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./09 盒子框模型.css">
  9. </head>
  10. <body>
  11.     <div id="a">hello</div>
  12.     <div id="b">world</div>
  14. </body>
  15. </html>
  1. /*
  3.         值              上下左右
  4.         值 值           上下 左右
  5.         值 值 值 值     上 下 左 右
  6. 内边距  padding 
  7. 外边距  margin
  8.         有重叠问题:
  9.         上下    值不同时取大
  10.                 解决方法:   1.float     2.display:inline-block
  11.         嵌套    无内容时子盒不存在边距
  12.                 解决方法:   1.border    2.padding   3.float:hidden
  13. */
  14. #a{
  15.     width: 320px;
  16.     height:240px;
  18.     border: 2px solid #666;
  20.     padding: 20px;
  21.     margin:60px;
  23.     background-color: aqua;
  24. }
  25. #b{
  26.     width: 320px;
  27.     height:240px;
  29.     border: 2px solid #666;
  31.     margin:20px;
  33.     background-color: blueviolet;
  34. }

10 布局

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./10 布局.css">
  9. </head>
  10. <body>
  11.     <div class="div1">div1</div>
  12.     <div class="div2">div2</div>
  13.     <div class="div3">div3</div>
  14.     <div class="div4">div4</div>
  15.     <div class="div5">div5</div>
  16.     <div class="div6">div6</div>
  18. </body>
  19. </html>
  1. div{
  2.     border: 2px solid #666;
  3.     background-color: aqua;
  4.     width: 320px;
  5.     height: 240px;
  7. }
  8. /*浮动流*/
  9. .div1,.div2{
  10.     border: 2px solid #666;
  11.     background-color: aquamarine;
  12.     width: 160px;
  13.     height: 120px;
  15.     float: left;
  17. }
  18. /*用伪元素清除浮动,转回标准流*/
  19. .div2::after{
  20.     /* 
  21.         block:  占据一行,可设置宽高
  22.         inline: 不占一行,不可设置宽高
  23.     */
  24.     content:" ";    /*增加内容,使元素存在*/
  25.     display:block;  /*变为块元素*/
  26.     clear:both;     /*清除浮动*/
  27. }
  28. /*  其他盒子模型:
  29.     inline-block    不占一行,可设置宽高
  30.     inline-table
  31.     list-item       类似于<ul>
  32.     run-in          在后面元素内显示
  34. */

11 定位

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="./11 定位.css">
  9. </head>
  10. <body>
  11.     <br>
  12.     <br>
  13.     <br>
  14.     <br>
  15.     <br>
  16.     <br>
  17.     <br>
  18.     <br>
  19.     <br>
  20.     <br>
  21.     <br>
  22.     <br>
  23.     <br>
  24.     <br>
  25.     <br>
  26.     <br>
  27.     <br>
  28.     <br>
  29.     <br>
  30.     <br>
  31.     <br>
  32.     <br>
  33.     <br>
  34.     <br>
  35.     <br>
  36.     <br>
  37.     <br>
  38.     <br>
  39.     <br>
  40.     <br>
  41.     <div id="A">哈哈</div>
  42.     <div id="B">呵呵
  43.         <div id="C">嗯嗯</div>
  44.     </div>
  45.     <br>
  46.     <br>
  47.     <br>
  48.     <br>
  49.     <br>
  50.     <br>
  51.     <br>
  52.     <br>
  53.     <br>
  54.     <br>
  55.     <br>
  56.     <br>
  57.     <br>
  58.     <br>
  59.     <br>
  60.     <br>
  61.     <br>
  62.     <br>
  63.     <br>
  64.     <br>
  65.     <br>
  66.     <br>
  67.     <br>
  68.     <br>
  69.     <br>
  70.     <br>
  71.     <br>
  72.     <br>
  73.     <br>
  74.     <br>
  75. </body>
  76. </html>