02.体验CSS以及Bootstrap框架

瑞星  金牌会员 | 2024-6-13 14:41:32 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 535|帖子 535|积分 1605

目录

CSS固定格式
1）style标签
2）div标签
3）span标签
 CSS属性
一、文字属性
1.规范文字样式的属性
2.规定文字粗细的属性
3.规定文字大小的属性
4.规范文字字体的属性
 二、文本属性
1.文本装饰属性
2.文本程度对齐属性
3.文本缩进属性
三、颜色属性
CSS选择器
1.标签选择器
2.id选择器
3.类选择器
4.后代选择器
5.子元素选择器
6.交集选择器
7.并集选择器
8.兄弟选择器
1）相邻兄弟选择器
2）通用兄弟选择器
CSS三大特性
继续性
层叠性
优先级 
important
CSS表现模式
块级元素和行内元素的区别
表现模式的转换
CSS背景
1.背景颜色（background-color）
2.背景图片（background-image）
3.背景平铺（background-repeat）
4.背景定位（background-position）
盒模型
1.边框属性（border）
2.内边距属性（padding）
3.外边距属性（margin）
4.盒子模型
5.行高
浮动
1.网页布局方式
     尺度流排版方式
     浮动流排版方式
2.浮动元素脱标
3.浮动元素排序规则
4.浮动元素高度问题
5.打扫浮动
Bootstrap框架

CSS固定格式

1）style标签

注：①style标签必须写在head标签内
       ②设置样式必须按照固定的格式来设置 key:value;
2）div标签

一般用于共同css完成网页的基本布局
3）span标签

一般用于共同css修改网页中的一些局部信息
div标签和span标签的区别
Ⅰ.div会单独占据一行，span不会
Ⅱ.div是一个容器级标签（可以嵌套其他全部标签），span是文本级标签（只能嵌套文字，图片，超链接）
容器级标签：div h ul ol dl li 
文本级标签：span p buis stong em ins del 
 CSS属性

一、文字属性

1.规范文字样式的属性

格式：font-style: ;
    italic 倾斜
    normal 正常（默认）
2.规定文字粗细的属性

格式： font-weight: ;
    bold 加粗
    bolder 更粗
    lighter 细线（默认就是细线）
3.规定文字大小的属性

格式：font-size: ;
注：一定要加单元
4.规范文字字体的属性

格式：font-family: ;
注：①假如取值是中文，需要用双引号或单引号括起来
       ②设置的字体必须是用户电脑里已安装的字体
  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">
  6.     <title>2.1-CSS属性-文字属性</title>
  7.     <style>
  8.         p {
  9.             font-style: italic;
  10.             font-weight: bold;
  11.             font-size: 30px;
  12.             font-family: '宋体';
  13.         }
  14.         div {
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <p>我是段落1</p>
  21.     <div>我是段落2</div>
  22. </body>
  23. </html>
复制代码

 二、文本属性

1.文本装饰属性

格式： text-decoration: ;
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有，常见用途为去除超链接的下划线
2.文本程度对齐属性

格式：text-align: ;
    left 左
    right 右
    center 中间
3.文本缩进属性

格式： text-indent: ;
注：带单元，一个em代表缩进一个文字的宽度
  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">
  6.     <title>2.2-CSS属性-文本属性</title>
  7.     <style>
  8.         p {
  9.             text-decoration: underline;
  10.             text-align: center;
  11.             text-indent: 2em;
  12.             font-size: 50px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <p>我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1我是段落1</p>
  18. </body>
  19. </html>
复制代码

三、颜色属性

格式：color:;
取值：①英文
           ②rgb
           ③rgba（a表示透明度，取值在0-1，取值越小越透明）
           ④十六进制（本质就是rgb，其每两位）
  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">
  6.     <title>2.3-CSS属性-颜色属性</title>
  7.     <style>
  8.         p1{
  9.             color: red;
  10.         }
  11.         p2{
  12.             color: rgb(156,264,15);
  13.         }
  14.         p3{
  15.             color: rgba(156,264,15, 0.5);
  16.         }
  17.         p4{
  18.             color: #f34000;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <p1>我是段落1</p1>
  24.     <p2>我是段落1</p2>
  25.     <p3>我是段落1</p3>
  26.     <p4>我是段落1</p4>
  28. </body>
  29. </html>
复制代码

CSS选择器

1.标签选择器

注：①标签选择器选中的是当前页面的全部标签，而不能选中此中的某一个标签
       ②标签选择器岂论藏的多深都能选中
  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">
  6.     <title>3.1-CSS选择器-标签选择器</title>
  7.     <style>
  8.         p {
  9.             color: #f34000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <p>我是段落1</p>
  15.     <p>我是段落2</p>
  16.     <p>我是段落3</p>
  17.     <p>我是段落4</p>
  18. </body>
  19. </html>
复制代码
 

2.id选择器

注：①同一个界面中的id标签不可重复
       ②id名前加#
      ③每个标签只能一个id名
       ④id命名：由字母、数字、下划线构成；不能以数字开头；不能和标签名称重复
         （假如只是为了设置样式，一般不使用id，前端开辟中id留给js使用）
  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">
  6.     <title>3.2-CSS选择器-id选择器</title>
  7.     <style>
  8.         #tag1 {
  9.             color: #f34000;
  10.         }
  11.         #tag2 {
  12.             color: #26c012;
  13.         }
  14.         #tag3 {
  15.             color: #541eb8;
  16.         }
  17.         #tag4 {
  18.             color: #d61f74;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <p id="tag1">我是段落1</p>
  24.     <p id="tag2">我是段落2</p>
  25.     <p id="tag3">我是段落3</p>
  26.     <p id="tag4">我是段落4</p>
  27. </body>
  28. </html>
复制代码

3.类选择器

专门用来给某个特定的标签来设计样式
注：①同一个界面中的class标签可以重复
       ②class名前加.
       ③每个标签可以绑定多个class名
  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">
  6.     <title>3.3-CSS选择器-类选择器</title>
  7.     <style>
  8.         .tag1 {
  9.             color: #f34000;
  10.         }
  11.         .tag2 {
  12.             color: #26c012;
  13.         }
  14.         .tag3 {
  15.             color: #541eb8;
  16.         }
  17.         .tag4 {
  18.             color: #d61f74;
  19.         }
  20.         .ft {
  21.             font-size: 30px;
  22.             font-weight: bold;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <p class="tag1">我是段落1</p>
  28.     <p class="tag1">我是段落1</p>
  29.     <p class="tag1">我是段落1</p>
  30.     <p class="tag1">我是段落1</p>
  31.     <p class="tag2">我是段落2</p>
  32.     <p class="tag3">我是段落3</p>
  33.     <p class="tag4 ft">我是段落4</p>
  34. </body>
  35. </html>
复制代码

4.后代选择器

找到指定标签的全部后代标签，设置属性
注：①后代选择器必须用空格隔开
       ②只要终极放在标签中的都属于后代
       ③后代选择器不仅可以使用标签名称，还可以使用其他选择器
  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">
  6.     <title>3.4-CSS选择器-后代选择器</title>
  7.     <style>
  8.         #bbb p {
  9.             color: #f34000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="aaa" id="bbb">
  15.         <p>我是段落1</p>
  16.         <p>我是段落2</p>
  17.         <p>我是段落3
  18.             <p>sadfdfd</p>
  19.         </p>
  20.         <p>我是段落4</p>
  21.     </div>
  23.     <p>我是段落5（在外面）</p>
  24. </body>
  25. </html>
复制代码
 

5.子元素选择器

找到指定标签的全部特定的直接子元素，设置属性
注：①子元素选择器只会查找儿子，不会查找其他被嵌套的标签
       ②子元素选择器之间用>符号毗连，并且可以不停延续下去，不能有空格
       ③子元素选择器不仅可以使用标签名称，还可以使用其他选择器
  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">
  6.     <title>3.5-CSS选择器-子元素选择器</title>
  7.     <style>
  8.         .aaa>ul>li>p {
  9.             color: #f34000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="aaa" id="bbb">
  15.         <p>我是段落1</p>
  16.         <p>我是段落2</p>
  17.         <ul>
  18.             <li>
  19.                 <p>我是段落3</p>
  20.                 <p>我是段落4</p>
  21.             </li>
  22.         </ul>
  23.     </div>
  25.     <p>我是段落5（在外面）</p>
  26. </body>
  27. </html>
复制代码

6.交集选择器

注：①选择器与选择器之间没有任何符号毗连
用的不多，相识即可
  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">
  6.     <title>3.6-CSS选择器-交集选择器</title>
  7.     <style>
  8.         p.nnn {
  9.             color: #f34000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>
  15.         <p>我是段落1</p>
  16.         <p class="nnn">我是段落2</p>
  17.         <p class="paragraph">我是段落3</p>
  18.         <p class="paragraph">我是段落4</p>
  19.         <div class="nnn">我是div标签</div>
  20.     </div>
  22.     <p>我是段落5（在外面）</p>
  23. </body>
  24. </html>
复制代码

7.并集选择器

注：①选择器与选择器之间用，毗连
  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">
  6.     <title>3.7-CSS选择器-并集选择器</title>
  7.     <style>
  8.         .paragraph1,.paragraph2 {
  9.             color: #f34000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>
  15.         <p>我是段落1</p>
  16.         <p>我是段落2</p>
  17.         <p class="paragraph1">我是段落3</p>
  18.         <p class="paragraph2">我是段落4</p>
  19.     </div>
  21.     <p>我是段落5（在外面）</p>
  22. </body>
  23. </html>
复制代码

8.兄弟选择器

1）相邻兄弟选择器

给指定选择器后面紧跟的谁人选择器选中的标签设置属性
注：①选择器与选择器之间用+毗连
  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">
  6.     <title>3.8-CSS选择器-相邻兄弟选择器</title>
  7.     <style>
  8.         h1+p {
  9.             color: #f34000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <h1>我是标题</h1>
  15.     <p>我是段落1</p>
  16.     <p>我是段落2</p>
  18.     <h1>我是标题</h1>
  19.     <p>我是段落1</p>
  20.     <p>我是段落2</p>
  21. </body>
  22. </html>
复制代码
 

2）通用兄弟选择器

给指定选择器后面全部选择器选中的标签设置属性
注：①选择器与选择器之间用~毗连
  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">
  6.     <title>3.9-CSS选择器-通用兄弟选择器</title>
  7.     <style>
  8.         h1~p {
  9.             color: #f34000;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <h1>我是标题</h1>
  15.     <p>我是段落1</p>
  16.     <p>我是段落2</p>
  18.     <h1>我是标题</h1>
  19.     <p>我是段落1</p>
  20.     <p>我是段落2</p>
  21. </body>
  22. </html>
复制代码

CSS三大特性

继续性

给父元素设置一些属性，子元素也可以使用
注：①不是全下属性都能继续，只有以color/font-/text-/line开头的属性才能继续
        （a标签的文字颜色和下划线，h标签的文字大小不能继续）
       ②子元素指全部的后代
层叠性

即CSS处理冲突的一种能力
注：①层叠性只有在多个选择器选中同一标签，然后设置了雷同属性，才会发生
  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">
  6.     <title>4.2-CSS三大特性-层叠性</title>
  7.     <style>
  8.         p {
  9.             color: #f34000;
  10.         }
  11.         .pa {
  12.             color: rgb(25, 0, 255);
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div>
  18.         <p class="pa">我是段落2</p>
  19.     </div>
  20. </body>
  21. </html>
复制代码

优先级 

如何层叠由优先级来决定
判断优先级的三种方法：
Ⅰ.看是否为直接选中（间接选中就是指继续）
假如是间接选中，则谁离目的近就听谁的
Ⅱ.雷同选择器
假如是直接选中，则谁写在后面就听谁的
Ⅲ.不同选择器
假如是直接选中，则按照选择器的优先级来层叠
id>class>标签>通配符>继续>浏览器默认
important

用于提升某个直接选中标签的选择器1中的某个属性的优先级，可以将被指定属性的优先级提升为最高
  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">
  6.     <title>4.4-CSS三大特性-!important</title>
  7.     <style>
  8.         #pd1 {
  9.             color: rgb(25, 0, 255);
  10.             font-size: 12px;
  11.         }
  12.         .pc2 {
  13.             color: #f34000 !important;
  14.             font-size: 30px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div>
  20.         <p id="pd1" class="pc1 pc2">我是段落2</p>
  21.     </div>
  22. </body>
  23. </html>
复制代码

CSS表现模式

在HTML中标签分为容器级和文本级标签
在CSS中标签分为块级元素和行内元素
块级元素和行内元素的区别

Ⅰ.块级元素
    独占一行
    假如没有设置宽度，则默认和父元素一样宽
    假如设置了宽高，则按照设置的来表现
Ⅱ.行内元素
    不会独占一行
    行内元素不能设置宽度和高度（默认和内容一样宽）
Ⅲ.行内块级元素
    可以或许使元素即不独占一行，又可以设置宽度和高度
表现模式的转换

设置元素的display属性
（display 取值，block 块级，inline 行内，inline-block 行内块级）
  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">
  6.     <title>显示模式</title>
  7.     <style>
  8.         div {
  9.             background: red;
  10.             /* display: inline; */
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div>111111</div>
  16.     <div>33333</div>
  17. </body>
  18. </html>
复制代码

 消除 display: inline; 的注释

CSS背景

1.背景颜色（background-color）

在CSS用background-color:属性设置标签背景颜色
2.背景图片（background-image）

在CSS用 background-image: url()属性设置标签背景颜色
注：①图片地址必须放在url()中，可以使当地地址，也可以是网络地址
       ②假如图片的大小没有标签的大小大，那么会主动在程度和垂直的方向平铺和添补
       ③假如网页上出现了图片，那么浏览器会再次发出哀求获取图片
3.背景平铺（background-repeat）

在CSS用background-repeat:属性设置背景的平铺方式
（repeat 默认，程度垂直都平铺，no-repeat 都不平铺）
（repeat-x只在程度方向平铺，repeat-y只在垂直方向平铺）
4.背景定位（background-position）

在CSS用background-position:属性设置背景图片的位置
（1）格式：background-position: 程度方向 垂直方向；
（2）取值：程度方向（left center right）
         垂直方向（top center bottom）
（3）像素：background-position:100px 200px（例）
         一定要加上单元
注：①同一个标签背景颜色和背景图片可以同时设置，但图片会覆盖颜色
  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">
  6.     <title>6-CSS背景</title>
  7.     <style>
  8.         div {
  9.             border: 1px solid #333;
  10.             width: 600px;
  11.             height: 600px;
  12.             background-color: rgb(49, 49, 175);
  13.             background-image: url(./img/tx.png);
  14.             background-repeat: repeat-x;
  15.             background-position: center center;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div></div>
  21. </body>
  22. </html>
复制代码

盒模型

1.边框属性（border）

即围绕在标签宽度和高度四周的线条
（1）格式：
              连写1.（同时设置四条边框）：border:宽度 样式 颜色;
              分写2.  border-top:同上
                          border-right:
                          border-bottom:
                          border-left:
             分写3.  border-width：上  右  下  左
                          border-style：
                          border-color：
2.内边距属性（padding）

边框与内容之间的距离
            连写1.padding:上 右 下 左
            分写2.padding-top: 其他位置同上
注：①给标签设置内边距之后，标签占有的宽度和高度会发生改变
       ②内边距也会有背景颜色
3.外边距属性（margin）

标签和标签之间的距离
            连写1.margin:上 右 下 左
            分写2.margin-top: 其他位置同上
4.盒子模型

一个比喻，HTML中的全部标签都是盒子
（1）内容的宽度和高度是通过标签的width/height属性设置的宽度和高度
（2） text-align: center;设置盒子中储存的文字/图片程度居中
           margin: 0 auto;设置盒子自己程度居中
5.行高

在CSS中全部的行都有自己的行高
注：①行高和盒子高不是同一个概念
  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">
  6.     <title>7.1-盒模型-边框属性</title>
  7.     <style>
  8.         div {
  9.             width: 600px;
  10.             height: 600px;
  11.             background-color: blueviolet;
  12.             color: white;
  13.             padding: 20px 50px 20px 40px;
  14.             border: 10px solid #000;
  15.             border-width: 2px 6p4px x 8px;
  16.             border-color: red gold green blueviolet;
  17.             border-style: dashed solid dashed solid;
  18.             margin: 0 auto;
  19.             margin-bottom: 10px;
  20.         }
  21.         .div2 {
  22.             margin: 30px 20px 40px 20px;
  23.             line-height: 600px;
  24.             text-align: center;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="div1">111111</div>
  30.     <div class="div2">222222</div>
  31. </body>
  32. </html>
复制代码
 

浮动

1.网页布局方式

     尺度流排版方式

          浏览器的默认排版方式，此中有两种排版方式，一是垂直排版，二是程度排版
 （假如元素是块级元素，则垂直排版；假如元素是行内元素/行内块级元素，则程度排版） 
     浮动流排版方式

         是一种“半脱离尺度流”的排版方式，只有一种排版方式，即程度排版
（只能设置某个元素左对齐或右对齐）
注：①浮动流中没有居中对齐（通过设置float:left/right;）
       ②在浮动流中不可以使用margin: 0 auto;
特点:
(1)在浮动流中是不区分块级元素/行内元素/行内块级元素的无论是级元素/行内元素/行内块级元素都可以程度排版
(2)在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
2.浮动元素脱标

     脱离尺度流
     当某一个元素浮动之后，那么这个元素看上去就像是被从尺度流中删除了一样，这个就是浮动元素的脱标
（假如前面的一个元素浮动了，后面的一个元素没有浮动，这时前面的元素会盖住后面的一个元素）
3.浮动元素排序规则

在同一方向上的浮动元素：先浮动的元素会表现在前面，后浮动的表现在后面
在不同方向上浮动的元素：左浮动找左浮动，右浮动找右浮动
4.浮动元素高度问题

只有在尺度流中内容的高度可以撑起父元素的高度
5.打扫浮动

通过添加 overflow:hidden:
Bootstrap框架

Bootstrap4中文站 · 全球最流行的 HTML、CSS 和 JS 工具库。
Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开辟响应式布局、移动装备优先的 WEB 项目。 | Bootstrap 中文网

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

瑞星

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表