CSS入门学习

前端三剑客

  • html：html为前端页面的主体。可以理解为一间什么东西都没有的房间
  • css：css为前端页面的样式。可以理解成房间里的地砖，灯，床
  • javascript：js为前端页面的脚本。可以理解成房间开灯，关门。

学习内容

  1. CSS是什么

  2. CSS怎么用（快速入门）

  3. CSS选择器（重点+难点）

  4. 美化页面（文字，阴影，超链接，列表，渐变….)

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

1、CSS

1.1、什么是CSS

  • CSS：层叠样式表（英文全称：Cascading Style Sheets），用来修饰网页样式。
  • 作用：美化网页，装饰网页样式。

1.2、 发展史

  • CSS 1.0
  • CSS 2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页简单，SEO
  • CSS 2.1 浮动，定位
  • CSS 3.0 圆角，阴影，动画…浏览器兼容性~

1.3、CSS的几种导入方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <!--内部样式-->
  9. <style>
  10. h1{
  11. color: yellow;
  12. }
  13. </style>
  14. <!--外部样式-->
  15. <link rel="stylesheet" href="css/style.css">
  16. <!--优先级：遵循就近原则，离代码越近，优先级越高-->
  17. <!--内行样式：在标签元素中编写一个style属性，编写样式即可-->
  18. <h1 style="color: #c134b5" class="first" id="test">第一个标题</h1>
  19. </body>
  20. </html>

2、 选择器

作用： 选择页面上的某一个或则某一类元素

2.1、 基本选择器

1.标签选择器： 选择一类标签。例如：h1{}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. /*标签选择器会选择页面上所有的对应标签*/
  8. h1{
  9. color: lightblue;
  10. }
  11. p{
  12. color: lightcoral;
  13. }
  14. </style>
  15. </head>
  16. <body>
  18. <h1>2.标签选择器</h1>
  19. <p>这是一段文字</p>
  20. </body>
  21. </html>

2.类选择器 class： 选择所有class属性一致的标签。.类名{}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. /*类选择器格式：.class的名称{}
  8. 好处：不同的标签，可以用一个类。*/
  9. .text{
  10. color: lightcoral;
  11. }
  12. </style>
  13. </head>
  14. <body>
  16. <h1>3.类选择器</h1>
  17. <p class="text">这是一段文字</p>
  18. <span class="text">这是一段文字</span>
  19. </body>
  20. </html>

3.ID选择器： 全局唯一！ #id名{}

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. /*id选择器 : id必须保证全局唯一
  8. 优先级： id选择器 > class选择器 > 标签选择器*/
  9. #title{
  10. background: lightcoral;
  11. }
  12. .text{
  13. color: lightcoral;
  14. }
  15. </style>
  16. </head>
  17. <body>
  19. <h1>4.id选择器</h1>
  20. <p class="text">这是一段文字</p>
  21. <span class="text">这是一段文字</span>
  22. </body>
  23. </html>

2.2、 层次选择器

  1. 后代选择器： 在某个元素的后面

    1. /*后代选择器*/
    2. body p{
    3. background: lightcoral;
    4. }

  2. 子选择器 下一代

    1. /*子选择器*/
    2. body > p{
    3. background: lightcoral;
    4. }

  3. 相邻，兄弟选择器（对下不对上）

    1. /*兄弟选择器： 只有一个，向下*/
    2. .active +p{
    3. background: lightcoral;
    4. }

  4. 通用选择器

    1. /*通用兄弟选择器， 当前选中元素的向下所有的兄弟元素*/
    2. .active~p{
    3. background: lightcoral;
    4. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. /*后代选择器*/
  8. body p{
  9. background: lightcoral;
  10. }
  11. /*子选择器*/
  12. p > span{
  13. background: lightblue;
  14. }
  15. /*兄弟选择器： 只有一个，向下*/
  16. .active + p{
  17. background: lightgreen;
  18. }
  19. /*通用兄弟选择器， 当前选中元素的向下所有的兄弟元素*/
  20. .active~li{
  21. background: lightcoral;
  22. }
  23. </style>
  24. </head>
  25. <body>
  27. <h1 >2.标签选择器</h1>
  28. <p class="active">这是一段文字
  29. <span>这是一段描述</span>
  30. </p>
  31. <p>这是段落2</p>
  32. <ul>
  33. <li>1-1</li>
  34. <li class="active">1-2</li>
  35. <li>1-3</li>
  36. </ul>
  37. </body>
  38. </html>

2.3、 结构伪类选择器

标签：条件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. /*ul的第一个子元素*/
  8. ul li:first-child{
  9. background: lightgreen;
  10. }
  11. /*ul的最后一个子元素*/
  12. ul li:last-child{
  13. background: lightcoral;
  14. }
  15. /*选中p1: 定位到父元素，选择当前的第一个元素
  16. 选择当前p元素的父级元素，选中父级元素的第一个
  17. 并且是当前元素才生效！
  18. */
  19. p:nth-child(2){
  20. background: lightblue;
  21. }
  22. /*选中父元素下的p元素的第二个，类型 */
  23. p:nth-of-type(2){
  24. background: lightgoldenrodyellow;
  25. }
  26. /*鼠标在上面的样式*/
  27. a:hover{
  28. color: orange;
  29. }
  30. </style>
  31. </head>
  32. <body>
  34. <h1>6.伪类选择器</h1>
  35. <p>pp1</p>
  36. <p>pp2</p>
  37. <p>pp3</p>
  38. <ul>
  39. <li>1-1</li>
  40. <li>1-2</li>
  41. <li>1-3</li>
  42. </ul>
  44. <a href="#">超链接。。。</a>
  45. </body>
  46. </html>

2.4、属性选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .demo a{
  8. display: inline-block;
  9. height: 50px;
  10. width: 50px;
  11. border-radius: 10px;
  12. background: #67e4ff;
  13. text-align: center;
  14. color: #ffffff;
  15. text-decoration: none; /*去下划线*/
  16. margin-right: 5px;
  17. font: bold 20px/50px Arial;
  18. }
  19. /* 属性名， 属性名 = 属性值（正则）
  20. = 绝对等于
  21. *= 包含这个元素
  22. ^= 以这个开头
  23. $ 以这个结尾
  24. */
  25. /*存在id属性的元素 a[]{}*/
  26. a[id]{
  27. background: lightgoldenrodyellow;
  28. }
  29. a[id=first]{
  30. background: lightblue;
  31. }
  32. /*class 中有links的元素*/
  33. a[class*="links"]{
  34. background: lightcoral;
  35. }
  36. /*选中href中以http开头的元素*/
  37. a[href^=http]{
  38. background: lightcyan;
  39. }
  40. /*a标签中href里面的值以jpg结尾*/
  41. a[href$=jpg]{
  42. background: lightseagreen;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <p class="demo">
  48. <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  49. <a href="http://www.baidu.com" class="links item active" target="_blank" title="test">2</a>
  50. <a href="images/123.html" class="links item">3</a>
  51. <a href="images/123.png" class="links item">4</a>
  52. <a href="images/123.jpg" class="links item">5</a>
  53. <a href="abc" class="links item">6</a>
  54. <a href="/a.pdf" class="links item">7</a>
  55. <a href="/abc.pdf" class="links item">8</a>
  56. <a href="abc.doc" class="links item">9</a>
  57. <a href="abcd.doc" class="links item last">10</a>
  58. </p>
  59. </body>
  60. </html>

3、美化网页元素

3.1、为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页，页面漂亮，才能吸引用户
  3. 凸显页面的主题
  4. 提高用户的体验

美化网页元素重点：为了好看，为了好看，为了好看。

3.2、字体样式

  1. font-family: 字体
  2. font-size: 字体大小
  3. font-weight: 字体粗细
  4. color: 字体颜色

3.3、文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐的方式 text-align = center
  3. 首行缩进 text-indent
  4. 行高 line-height
  5. 装饰 text-decoration
  6. 文本图片水平对齐： vertical-align
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. h1{
  8. color: rgba(250, 75, 165, 0.5);
  9. text-align: center;
  10. }
  11. .p1{
  12. text-indent: 2em;
  13. }
  14. /*上划线*/
  15. .l1{
  16. text-decoration: underline;
  17. }
  18. /*中划线*/
  19. .l2{
  20. text-decoration: line-through;
  21. }
  22. /*下划线*/
  23. .l3{
  24. text-decoration: overline;
  25. }
  26. /*超链接去下划线*/
  27. a{
  28. text-decoration: none;
  29. }
  30. </style>
  31. </head>
  32. <body>
  34. <h1>学习CSS</h1>
  35. <p class="p1">穿过挪威的森林，让我走进你的梦里，夕阳落在我的铠甲，王子不一定骑着白马，黑马王子四海为家，现在是晚上18:00，我不是马思唯，也没有王子陪。</p>
  37. <p class="l1">1231231</p>
  38. <p class="l2">1231231</p>
  39. <p class="l3">1231231</p>
  40. </body>
  41. </html>

3.4、列表前缀样式

  1. /*ul li*/
  2. /*circle 空心圆
  3. decimal 数字
  4. square 正方形*/
  5. /*ul li*/
  6. ul li{
  7. list-style: none; /*去掉圆点*/
  8. }

3.5、背景样式

  • 背景图可以填充，拉伸，居中…等效果
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. div{
  8. width: 1000px;
  9. height: 700px;
  10. border: 1px solid red;
  11. background-image: url("images/t.jpg");
  12. /*默认是全部平铺的*/
  13. }
  14. .div1{
  15. background-repeat: repeat-x;
  16. }
  17. .div2{
  18. background-repeat: repeat-y;
  19. }
  20. .div3{
  21. background-repeat: no-repeat;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="div1"></div>
  27. <div class="div2"></div>
  28. <div class="div3"></div>
  29. </body>
  30. </html>

3.6、渐变

一个渐变的网站：https://www.grabient.com/

  1. body{
  2. background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  3. }

4、盒子模型

4.1、什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2、边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色
  1. /* 边框大小 边框样式 边框颜色 */
  2. border: 1px solid #000000;

4.3、内外边距

margin：外边距

padding：内边距

  1. /*
  2. 当margin/padding
  3. 有一个参数，上下左右，都有边距
  4. 有二个参数，上下，左右，表示
  5. 四个参数时，上，右，下，左，表示
  6. margin：0 1px 2px 3px;
  7. */

盒子的计算方式：元素到底多大？

margin+border+padding+内容宽度

4.4、圆角边框

4个角

  1. div{
  2. width: 100px;
  3. height: 50px;
  4. margin: 30px;
  5. border: 2px solid red;
  6. border-radius: 50px 50px 0px 0px; /* 和边距的参数一样，左上，右上，右下，左下 */
  7. }

4.5、阴影

  1. /*
  2. h-shadow 必需。水平阴影的位置。允许负值。
  3. v-shadow 必需。垂直阴影的位置。允许负值。
  4. blur 可选。模糊的距离。
  5. color 可选。阴影的颜色。
  6. text-shadow: h-shadow v-shadow blur color;
  7. */

4.6、综合案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. /*
  8. 当margin/padding
  9. 有一个参数，上下左右，都有边距
  10. 有二个参数，上下，左右，表示
  11. 四个参数时，上，右，下，左，表示
  12. margin：0 1px 2px 3px;
  13. */
  14. #box{
  15. width: 300px;
  16. margin: 0 auto; /*有宽度时，可以居中*/
  17. padding: 10px; /* 内边距 */
  18. border: 1px solid #67e4ff;
  19. background: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  20. border-radius: 20px;/*圆角*/
  21. box-shadow: 10px 10px 10px #000000;/*阴影*/
  22. }
  23. h2{
  24. color: #ffffff;
  25. text-align: center;
  26. }
  27. div{
  28. padding: 10px;
  29. }
  30. input[type=submit]{
  31. width: 100%;
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div id="box">
  37. <h2>会员登录</h2>
  38. <form action="#">
  39. <div>
  40. <span>用户名：</span>
  41. <input type="text">
  42. </div>
  43. <div>
  44. <span>密码：</span>
  45. <input type="text">
  46. </div>
  47. <div>
  48. <input type="submit">
  49. </div>
  50. </form>
  51. </div>
  52. </body>
  53. </html>

5、浮动

5.1、 标准文档流

块级元素：独占一行

  1. <!-- h1-h6 p div ... -->

行内元素：不独占一行

  1. <!-- span a img strong ... -->

块级元素可以存在行内元素。

5.2、display

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <!-- block，块元素
  7. inline 行内元素
  8. inline-block 是块元素，但是可以内联，在一行！
  9. none： 消失-->
  10. <style>
  11. div{
  12. width: 100px;
  13. height:100px;
  14. border: 1px solid red;
  15. display: inline;
  16. }
  17. span{
  18. width: 100px;
  19. height:100px;
  20. border: 1px solid red;
  21. display: block;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div>div块元素</div>
  27. <span>span行内元素</span>
  28. </body>
  29. </html>

5.3、float

1、左右浮动

  1. div{
  2. float: right;/*向右浮动*/
  3. }

浮动的元素会脱离标准流。

5.4、父级边框塌陷问题

  1. /*
  2. clear: right; 右侧不允许有浮动元素
  3. clear: left; 左侧不允许有浮动元素
  4. clear: both; 两侧不允许有浮动元素
  5. clear: none; 不允许有浮动元素
  6. */
  7. .text{
  8. clear:both;
  9. }

解决父级边框塌陷问题：

1、增加父级元素高度

  1. #body{
  2. border: 1px #000 solid;
  3. height: 800px;
  4. }

2、增加一个空的div标签，清除浮动

  1. <div class="clear"></div>
  2. .clear{
  3. clear: both;
  4. margin: 0;
  5. padding: 0;
  6. }

3、父类添加一个伪类：after

  1. #body:after{
  2. content: '';
  3. display: block;
  4. clear: both;
  5. }

小结：

1、浮动元素后面增加div

简单，代码中尽量避免空div

2、设置父元素的高度

简单，元素假设有了固定的高度，就会被限制

3、父类添加伪类:after(推荐使用)

原理跟第一个方法一样。这里是通过伪类添加元素。

6、定位

6.1、相对定位

  1. div{
  2. position: relative/*相对定位*/
  3. top: -20px;/*相对当前的位置 向上移动，负值相反方向*/
  4. left: 20px;/*相对当前的位置 向右移动*/
  5. bottom: -20px;/*相对当前的位置 向下移动*/
  6. right: 20px;/*相对当前的位置 向左移动*/
  7. }

相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

6.2、绝对定位

  1. div{
  2. position: absolute;/*绝对定位*/
  3. top: -20px;/*相对当前的位置 向上移动，负值相反方向*/
  4. left: 20px;/*相对当前的位置 向右移动*/
  5. }

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器。

用绝对定位的元素会脱离文档流。

6.3、固定定位

  1. div{
  2. position: fixed;/*固定定位*/
  3. right: 0;
  4. bottom: 0;
  5. }

固定定位使元素的位置相对于浏览器窗口来定位。

即使窗口是滚动的它也不会移动。

6.4、z-index

  1. div{
  2. z-index:2;
  3. }

图层，用定位的时候会产生会和其他元素重叠。

相当于上一层盖住了下一层的内容。

7、动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. div{
  8. width:100px;
  9. height:100px;
  10. background:red;
  11. animation:myfirst 5s; /* 动画执行时间 */
  12. }
  14. @keyframes myfirst{
  15. 0% {background: red;}
  16. 25% {background: yellow;}
  17. 50% {background: blue;}
  18. 100% {background: green;}
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div></div>
  24. </body>
  25. </html>
posted @   肸乯  阅读(135)  评论(0)  编辑  收藏  举报
相关博文：
· JavaScript
· css学习笔记
· CSS笔记
· CSS快速入门~
· 前端基础_CSS笔记
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示