2021-08-10 WEB前端课堂笔记Day02

最新推荐文章于 2023-07-27 14:05:10 发布

weixin_47509934

最新推荐文章于 2023-07-27 14:05:10 发布

阅读量143

点赞数

本文链接：https://blog.csdn.net/weixin_47509934/article/details/119577359

版权

1 CSS

最大贡献：使HTML从样式中解脱，专注于结构呈现，样式交给CSS实现

1.1 什么是 CSS

CSS（Cascading style sheets）层叠样式表（级联样式表）

主要用于设置HTML页面的文本内容（字体、大小、对齐方式）、图片（大小、边框等）、版面布局等外观样式

CSS以HTML为基础提供功能，还可以针对不同浏览器设置不同样式

1.2 CSS样式规则

选择器{
	属性名：属性值；
	属性名：属性值
}

规则：

用选择器指定CSS样式作用的HTML对象，{ }内为具体样式
属性是指定的对象设置的样式属性
属性和属性值以键值对形式出现，用英文冒号分割属性和属性值
多个键值对之间用英文分号分割，注意缩进和对齐

2 CSS 的字体样式属性

2.1 字号大小 font-size

用于设置字号的大小，该属性的值可以使用相对的长度单位，也可以使用绝对的长度单位。推荐使用px

相对长度： px 像素 em 相对于文本的字体尺寸

绝对长度： in 英寸 cm 厘米 mm 毫米 pt 点

2.2 字体类型 font-family

字体类型设置，常用有宋体、黑体、微软雅黑

设置时可同时设置多个，防止浏览器不支持而显示不出字体类型

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        p{
          font-size: 20px;
          font-family: "楷体";  
        }
        li{
          font-size: 20px;
          font-family: "楷体,黑体,宋体，微软雅黑";   
        }
    </style>
</head>
<body>
    <p>
        样式规则：
            <ol>
                <li>选择器用户指定CSS样式作用的HTML对象，花括号内是该对象设置的具体的样式；</li> 
        
                <li>属性和属性值以键值对的形式出现</li>	 
                
                <li>属性是对指定的对象设置的样式属性</li>	 
                
                <li>属性和属性值之间的分隔符必须是英文的冒号</li>	 
                
                <li>多个键值对之间使用英文的分号进行区分。要注意缩进和对齐 </li>	  
            </ol>
       	 
    </p>
</body>

2.2.1 CSS的Unicode字体

防止字体类型的中文名可能因为保存用的字符集不一致，而变成乱码不能被识别，可采用以下两种解决方法

用英文书写

font-family: "Micrisoft Yahei";

用Unicode码表示

font-family: "\6977\4F53";

2.3 字体的粗细 font-weight

 /* 
           normal  bold  lighter,100--900整数
           400 等价于normal
           700 等价于bold
          */
          font-weight: 400;

2.4 字体的风格 font-style

主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

  font-style: oblique;

2.5 字体的属性的综合设置

font:font-style font-weight font-size font-family;
font:italic bold 20px "楷体";

进行综合设置时顺序不可变

不需要的属于可以用默认值，但必须保留font-style和font-family，否则设置无效

3 选择器（重点）

3.1 元素选择器

语法：

   li{
          font: italic bold  20px  "楷体";
          color: bisque;
        }
<!-- 标签名{属性名：属性值} -->

优点：快速选择页面中的同类元素使用统一样式

缺点：不能对同类元素进行差异化设计

3.2 类选择器

用 “.” 进行标识，后面为类名，使用时在标签后加上 class=“类名”

语法：

<!-- .类名{属性名：属性值} -->
 <style type="text/css">
  	.font-style{
            font-size: 20px;
            font-family: "楷体";
            font-weight: 700;
        }
       </style>
       <body>
        <ul class="font-style">
                <li>西瓜</li>
                <li>香蕉</li>
                <li>苹果</li>
                <li>橙子</li>
            </ul>
        </body>

优点：可为元素对象定义单独或相同的样式

技巧：

类名较长或由多个单词组成时，可以使用中划线命名
不建议使用下划线
不要使用纯数字、中文命名，尽量用英文命名

3.3 多类名选择器

<style type="text/css">
    .size{
        font-size: 100px;
    }
    .famliy{
        font-family: 'Courier New', Courier, monospace;
    }
    .blue{
        color: blue;
    }
    .red{
        color: red;
    }
    .gold{
        color: gold;
    }
    .green{
        color: green;
    }
    
    </style>
</head>
<body>
    <div>
        <span class="blue size famliy">G</span>
        <span class="red famliy">o</span>
        <span class="gold size">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </div>
</body>

3.4 ID选择器

标识为"#" 后面紧跟id名，id名为元素的id属性的名称值，id名不可重复

    <style type="text/css">
        #col{
            font-size: 20px;
            font-family: "楷体";
        }
        #li1{
            color: blue;
        }
        #li2{
            color: blueviolet;
        }
    
    </style>
</head>
<body>
    <ol id="col">
        <li id="li1">选择器用户指定CSS样式作用的HTML对象，花括号内是该对象设置的具体的样式；</li> 

        <li id="li2">属性和属性值以键值对的形式出现</li>	 
        
        <li id="li3">属性是对指定的对象设置的样式属性</li>	 
        
        <li id="li4">属性和属性值之间的分隔符必须是英文的冒号</li>	 
        
        <li id="li5">多个键值对之间使用英文的分号进行区分。要注意缩进和对齐 </li>	  
    </ol>
</body>

与类选择器的不同：id选择器只能用一次，类选择器能用多次

3.5 通配符选择器

标识为 “*” 选择范围最广，能匹配页面中的所有元素

在页面布局时，要消除所有内外边距，从而达到自由布局的目的

 /* 消除页面的内外边距 */
        *{
            margin: 0;
            padding: 0;
        }

3.6 伪类选择器

用于向某些选择器添加特殊效果，多用于超链接

3.6.1 超链接伪类选择器

 /* 鼠标经过 */
        a:hover{
            color: blue;
        }
        /* 选定链接 */
        a:active{
            color: red;
        }
        /* 未访问的链接 */
        a:link{
            color: green;
        }
        /* 已访问的链接 */
        a:visited{
            color:gold
        }

3.6.2 结构（位置）伪类选择器

/* 第一个子元素 */
        li:first-child{
            color: pink;
        }
        /* 最后一个子元素 */
       li:last-child{
           color:aqua;
       }
       /* 选中特定位置的子元素 */
       li:nth-child(3){
           color: brown;
       }
       /* 选中奇数位置的元素 */
       li:nth-child(odd){
           color:chartreuse;
       }
       /* 选中偶数位置的元素 */
       li:nth-child(even){
           color: red;
       }

3.6.3 目标伪类选择器

标识为对象名:target，可以用于选取当前活动的目标元素

       /* 目标伪类选择器 */
       #zb:target{
            color: deeppink;
       }
       
    <!-- 点击a标签 连接到h1标签  h1 就是a的链接目标 -->
    <h1 id="zb">中北大学</h1>
    <a href="#zb">中北</a>

4 CSS外观属性

4.1 文本颜色 color （前景色）

color的取值方式：

预定的颜色值：red green blue等颜色（英文）
6位十六进制，每两位表示一个颜色：#F3F102,#FFF（白色）,#000（黑色）
rgb表示，0~255或百分比：rgb（255，0，0）或rgb（50%，50%，90%）

    <p>
        color的取值方式：

        1 预定义的颜色值： red  green  blue；

        2 十六进制，6位十六进制   每两位表示一个颜色  \#F3F102;  #FFF 表示白色   #000 表示黑色

        3 rgb 表示形式为 ：rgb(255,0,0)每一位数字的取值范围为：0-255  还可以使用百分比表示：rgb(100%,0%,0%)
    </p>

4.2 行间距 line-height

单位：ps em % px

一般情况下，行距比字号大7或8个像素最好

  p{    
  font-size: 14px;       
  line-height: 22px;    
  }

4.3 水平对齐方式 text-align

取值：left right center

4.4 首行缩进 text-indent

单位：em % 1em就是一个汉字的宽度

允许使用负值

4.5 字间距 letter-spacing

设置字符与字符的间距

4.6 单词间距 word-spacing

设置英文单词的间距，对汉字无效

letter-spacing 和 word-spacing都可作用于英文，可同时使用但不推荐

4.7 颜色半透明

 /* a 是用来设置透明度的  取值范围为0-1 */
           background-color: rgba(255,0,0,0.1);

5 CSS的引入方式

5.1 行内样式表（内联式）

在标签的style属性来设置元素样式

    <p style="color: blue;">

每个元素都有style属性，值为键值对形式，多个键值对之间用分号分割

5.2 内部样式表（内嵌式）

可放在任意位置，但一般放在head中

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    /* 消除页面的内外边距 */
        *{
            margin: 0;
            padding: 0;
        }
        #col{
            font-size: 20px;
            font-family: "楷体";
        }
        /* 第一个子元素 */
        li:first-child{
            color: pink;
        }
        /* 最后一个子元素 */
       li:last-child{
           color:aqua;
       }
       /* 选中特定位置的子元素 */
       li:nth-child(3){
           color: brown;
       }
       /* 选中奇数位置的元素 */
       li:nth-child(odd){
           color:chartreuse;
       }
       /* 选中偶数位置的元素 */
       li:nth-child(even){
           color: rgb(100%,0%,0%);
       }
       /* 目标伪类选择器 */
       #zb:target{
            color: deeppink;
       }
       p{
           font-size: 14px;
           line-height: 22px;
           text-align: right;
           text-indent: 2em;
           /* word-spacing: 20px;
           letter-spacing: 20px; */
           /* a 是用来设置透明度的  取值范围为0-1 */
           background-color: rgba(255,0,0,0.1);
       }
    </style>
</head>

5.3 外部样式表（外联式）（推荐）

将样式写在当前HTML文件外部的一个样式文件中，后缀为.css，当HTML文件要使用时引入css文件。

css文件中直接编写样式，不需要 style 标签

结构和样式分离

 <!-- 引入外部的样式文件 href定义外部css文件的路径 -->
     <link rel="stylesheet" href="style.css">

6 标签的显示模式

HTML的标签一般分为块标签和行内标签也称块元素和行内元素

6.1 块元素

每个块元素通常都会独占一行或多行。可以对其设置宽高和对齐等属性。常用于网页的布局和结构的搭建。

常见块元素：

标题：h1~h6

段落：p

块：div（典型块元素）

列表：ol li ul

特点：

总是从一个新行开始
行高、高度、外边距、内边距都是可以控制的
默认宽度是容器的宽度
可以容纳行内元素和其他的块元素

6.2 行内元素

不占有独立区域，仅靠字体大小、图像尺寸支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面的文本样式

常见行内元素： a、strong、b、em、i、s、ins、u、span（典型行内元素）

特点：

和相邻元素在一同一行
设置宽高是无效的，但内边距可以设置外边距只能设置水平方向垂直方向无效
默认宽度是内容的宽度
只能容纳文本或者其他的行内元素

6.3 行内块元素（inline-block）

表现为行内元素，但具有块元素的一些特点，即可设置宽度、高度和对齐方式

常见行内块元素：img、input、td

特点：

和相邻元素在同一行但是之间会有空隙
默认的宽度就是他本身内容的宽度
高度、行高、外边距以及内边距都可以控制

6.4 标签显示模式的转换

块级标签转换为行内标签 display:inline
行内元素转换块元素 display:block
转换为行内块元素 display：inline-block

7 CSS的复合选择器

由两个或多个基础选择器通过不同方式组合而成，目的是为了更精确更精细的选择目标元素

7.1 交集选择器

交集选择器是由两个选择器构成，其中第一个为标签选择器，第二个为class类选择器两个选择器之间不能有空格，代表”且“的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    p.red{
        color:red
    }
    </style>
</head>
<body>
    <p class="red">红色</p>
    <p >红色</p>
    <p class="red">红色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <p>蓝色</p>
    <p>蓝色</p>
    <p>蓝色</p>
</body>
</html>

7.2 并集选择器

各选择器通过逗号链接，任何形式选择器都可用，只要有部分或全部相同就会被选择，代表”和“的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    p,.red,span{
        color:red
    }
    </style>
</head>
<body>
    <p class="red">红色</p>
    <p >红色</p>
    <p class="red">红色</p>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <div class="red">红色</div>
    <p>蓝色</p>
    <p>蓝色</p>
    <p>蓝色</p>
    <span>并集选择器</span>
</body>
</html>

7.3 后代选择器

又称包含选择器，用来选择元素或元素组的后代，外层标签写在外，内层标签写在内，中间用空格分割，发生嵌套时，旧内层标签成为外层标签的后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .nav a{
            color: pink;
        }
        .person ul li{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">产品</a>
        <a href="#">个人中心</a>
    </div>
    <a href="#">html</a>
    <a href="#">CSS</a>
    <a href="#">JAVAScript</a>
    <ul>
        <li>西瓜</li>
        <li>橘子</li>
        <li>葡萄</li>
    </ul>
    <div class="person">
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
            <ol>
                <li>馒头</li>
                <li>米饭</li>
                <li>包子</li>
            </ol>
        </ul>
    </div>
</body>
</html>

7.4 子元素选择器

只能选择作为某元素的子元素，父级元素写在前，子元素写在后，中间加上">"，符号两侧保留空格。

不能选择嵌套子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* 子元素选择器 */
        ul > li{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <ul>
        <li>西瓜</li>
        <li>橘子</li>
        <li>葡萄</li>
    </ul>
    <div class="person">
        <ul>
            <li>张三</li>
            <li>李四</li>
            <li>王五</li>
            <ol>
                <li>馒头</li>
                <li>米饭</li>
                <li>包子</li>
            </ol>
        </ul>
    </div>
</body>
</html>

8 属性选择器

在这里插入图片描述

    <style type="text/css">
        /* 获取li中所有拥有type属性的元素 */
        li[type]{
            border: 1px solid gray;
        }
        /* 获取li中type属性等于某个值的元素 */
        li[type="vegetable"]{
            background-color: green;
        }
        /* 选择li中type属性值包含某一个单词的元素 */
        li[type~="hot"]{
            font-size: 30px;
        } 
        /* 获取li中color以某一个字符开头的元素 */
        li[color^="green"]{
            background-color: orange;
        }
        /* 获取属性值以某一个字符结尾的元素 */
        li[type$='t']{
            color: hotpink;
            font-weight: 900;
        }
        /* 属性值拥有某个字符的元素 */
        li[type*="ea"]{
            font-family: "楷体";
        }
        /* 属性值以什么字段开头 */
        li[price|="very"]{
            background-color: darkblue;
        }
    </style>

9 伪元素选择器

E:: first-letter 文本的第一个单词或字

E::first-line 文本的第一行

E::selection 选中的文本行

E :: before 和 E:: after 在E的内部的开始位置和结束位置创建一个元素，该元素为行内元素且必须要结合content属性使用，且不能被选取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        p::first-letter{
            font-size: 20px;
            color: hotpink;
        }
        p::first-line{
            color:skyblue;
        }
        p::selection{
            color: orange;
        }
        p::before{
            content: "这是段落的开始";
        }
        p::after{
            content: "段落结束";
        }
    </style>
</head>
<body>
    <p>
        后代选择器又称为包含选择器，用来选择元素或元素组的后代，写法就是把外层标签写在前边  内层标签写在后边，中间用空格分割。当然标签发生嵌套，内层标签就称为外层标签的后代。
        后代选择器又称为包含选择器，用来选择元素或元素组的后代，写法就是把外层标签写在前边  内层标签写在后边，中间用空格分割。当然标签发生嵌套，内层标签就称为外层标签的后代。
        后代选择器又称为包含选择器，用来选择元素或元素组的后代，写法就是把外层标签写在前边  内层标签写在后边，中间用空格分割。当然标签发生嵌套，内层标签就称为外层标签的后代。
    </p>
</body>
</html>

10 背景

background-color	背景颜色
background-image	背景图片
background-repeat	是否平铺
background-position	背景的位置
background-attachment	背景是否滚动

    <style type="text/css">
        body{
            /* 可取值 none  没有背景   url直接跟图片的路径 */
            background-image: url(imgs/2.jpg);
            /*  no-repeat 不平铺  repeat-x x轴平铺    repeat-y Y轴平铺   repeat 默认  */
            background-repeat: no-repeat;
            /* 可以取值  top  buttom  left  right  center   也可以按照百分比或者长度单位来表示 */
            background-position: -10% ;
            /* fixed  背景图像固定    scroll 随着窗口的滚动而滚动 */
            background-attachment: scroll;
            height: 2000px;
            background: rgba(0,0,0,0.3);
        }
    </style>

11 CSS三大特性

11.1 层叠性

能给单个元素或标签添加多种样式

11.2 继承性

子元素会继承父元素的某些样式，如文本颜色、字号等

        div{
            color: red;
        }
    </style>
</head>
<body>
    <div>
            <p>
                中北大学
            </p>
    </div>
</body>

11.3 优先级

多个样式作用于同一个元素，此时会有样式被覆盖

优先级为：行内样式 > 内部样式[id选择器 > 类选择器 > 标签选择器] > 外部样式

在样式后追加 !important 属性，提升优先级，使当前样式优先级最高

 /* 优先级 行内样式 > 内部样式【id选择 >  类选择器 >  标签选择器】》外部样式
        !important 可以在样式的后边追加属性 提升优先级  是的当前样式的优先级最高
        */
        div {
            background-color: green;
            color: red;
            width: 200px;
            height: 200px;
        }
        #d{
            background-color:   red;
        }
        .c{
            background-color: yellow!important;
        }
    </style>
</head>
<body>
    <div id="d"   class="c" style="background-color: blue;">
            <p>
                中北大学
            </p>
    </div>
</body>
</html>

12 盒子模型（CSS重点）

CSS三大模块：盒子模型浮动定位

盒子模型：HTML页面中的元素看做是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是有元素的内容内边距（padding）边框（border）和外边距（margin）组成。

网页的本质：把网页元素放入盒子，再利用css摆放盒子

12.1 盒子边框（border）

border属性：width||style||color

border 的每条线都可以分别设置，单线也可进行综合设置，顺序为宽度、样式、颜色

border-style（边框样式）：

none（无）
solid（实线）
dashed（虚线）
dotted（点）
double（双实线）

  div{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
          
            
            /* 样式 */
            border-top-style: dashed;
            border-bottom-style: dotted;
            border-left-style: solid;
            border-right-style: double;
            /* 宽度 */
            border-top-width: 2px;
            border-bottom-width: 4px;
            border-left-width: 6px;
            border-right-width: 8px;
            /* 颜色也可以分为上下左右来分别设置 */
            /* 上边框的综合写法  宽度  样式  颜色  顺序不能乱*/
            /* 其他方位的边框也可使按照上述的综合写法来写 */
            border-top: 1px solid red;
            /* 样式的综合设置  
            1个值 四边  
            2个值 （第一个值 上下 第二个值 左右）  
            3个值（第一个值 上  第二个值左右 第三个值 下）
            4个值  上  右 下 左 顺时针方向赋值*/
            border-style: solid double  dotted dashed;
            border-width: 4px  8px  16px 32px;
            border-color: red  green yellow blue;
        }

表格边框的合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        table{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            /* 表示合并边框 */
            border-collapse: collapse;
        }
        td{
            border: 1px solid red;
        }
        th{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <!-- cellspacing 只是将单元格之间的距离设置为了0  -->
     <table cellspacing=0>
         <thead>
             <tr >
                 <th >标题1 </th>
                 <th>标题2 </th>
                 <th>标题3 </th>
                 <th>标题4 </th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>1.1</td>
                 <td>1.2</td>
                 <td>1.3</td>
                 <td>1.4</td>
             </tr>
         </tbody>
     </table>
</body>
</html>

圆角边框

border-radius：设置水平半径和垂直半径

当半径为边框的一半时，边框变成圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    /* 当行高line-height = 容器的高度height时  则内容上下居中 */
    div{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        margin: 10px  40px;
        /* 水平居中 */
        text-align: center; 
        line-height: 200px;
    }
    div:first-child{
        border-radius:  20px  50px;
    }
    div:nth-child(2){
        border-radius: 20px;
    }
    div:nth-child(3){
        border-radius: 15px 0;
    }
    /* 当半径为边框的一半时 则是圆 */
    div:nth-child(4){
        border-radius: 100px;
    }
     /* 当矩形为长方形时，为椭圆 */
    div:nth-child(5){
       border-radius:  50%;
    }
    
    div:nth-child(6){
        border-radius: 200px 0px;
    }
    </style>
</head>
<body>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
</body>
</html>

weixin_47509934

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-08-10 WEB前端课堂笔记Day02

1 CSS最大贡献：使HTML从样式中解脱，专注于结构呈现，样式交给CSS实现1.1 什么是 CSSCSS（Cascading style sheets）层叠样式表（级联样式表）主要用于设置HTML页面的文本内容（字体、大小、对齐方式）、图片（大小、边框等）、版面布局等外观样式CSS以HTML为基础提供功能，还可以针对不同浏览器设置不同样式1.2 CSS样式规则选择器{ 属性名：属性值；属性名：属性值}规则：用选择器指定CSS样式作用的HTML对象，{ }内为具体样式属性是指
复制链接

扫一扫