前端开发第三天

一、CSS

1.什么是css?

全称Cascading  Style Sheets,通常称为css样式表或层叠样式表(级联样式表)

      作用:html页面中元素的位置、排版、样式外观等

  css语法规范:

           由选择器、一条声明或多条声明组成

           选择器:通常是需要改变样式的html标签

           声明组:以大括号{}括起来的

     选择器{

                属性:属性值;

                属性:属性值;

                -----

           }

2.css语法规范

CSS 规则由两个主要的部分构成:选择器、一条或多条声明。

选择器:通常是需要改变样式的 HTML 标签。

声明组:以大括号{}括起来。

每条声明由一个属性和一个值组成,属性与属性值之间以【冒号】分隔,用【分号】将每个声明分开。

3.引入css

.行内样式

            语法:

              <开始标签 style="属性1:属性值1;属性2:属性值2;---"></结束标签>

              注意:任何html元素都可以设置行内样式;

              优缺点:

                  比较直观:相同的样式需要重复定义,造成代码冗余;作用范围小,不利于后期代码的维护,代码不能复用

                  结构样式不分离

<!-- 内部样式 -->

    <style>

         /* 选择器 */

         div{

            /* 样式声明 */

            width: 200px;

            height: 300px;

            background-color: blue;

            /*

            优缺点:

                  相对于行内样式来说,代码可以重复使用: 作用范围大于行内样式:结构样式半分离

            */

         }

    </style>

<!-- 引入外部css样式 -->

    <!--

        语法:

        <link rel="stylesheet" href="css路径">

     -->

    <link rel="stylesheet" href="./box.css">

     rel表示引入文件与当前文档的关系

    stylesheet为样式表

</head>

<body>

     <!-- div

         宽200px

        高300px

        背景颜色  红色

        优缺点:

              1.作用范围广,可以重复使用代码

              2.便于修改和维护代码

              3.结构样式相分离

     -->

     <div></div>

href="" 资源链接的地址

     <!--

        总结:

             行内样式:适用于某个元素拥有特殊样式时使用.结构样式[不分离]

             内部样式:适用于单个页面拥有特殊样式时使用,结构样式时[半分离状态]

             外部样式:适用于多个页面拥有特殊样式时使用,结构样式[相分离]

      -->

4.css注释

               注释的语法

                          CSS中的注释以"注释以/*开头,以*/结尾,开始和结束中间为注释内容。

              注释的作用

                         解释说明,标记不同代码节的开始 代码调试,用于在测试中临时禁用一段代码

              生成快捷方式

                         ctrl + / 取消或添加

     5.CSS选择器

                通配(通用)选择器:匹配任意类型的HTML元素

                元素名称选择器:选择所有同一元素名称的所有元素

                类选择器:选择所有带有指定类名的元素

                id选择器:选择所有带有指定类名的元素

       类与id的命名规则

               尽量用英文

               始终建议以字母开头,可以包含数字、字母、下划线等

               不要以数字开头

              多个单词可以以驼峰式(newsCont)、中划线连接(news_cont)、下划线连接(news-cont)等

二.table标签

1.HTML表格
    1.1表格的作用
                表格用于显示、展示数据。
    1.2表格的基本标签
                <table>定义表格
                <tr>定义表格中的行 
                <td>定义表格的单元格
                <th>定义表头单元格 
     1.3表格常用属性
          (table属性)
               <width>定义表格的宽 
               <height>定义表格的高
               <border> 可以显示一个带有边框的表格。 

               <cellpadding>设置单元格中内容和边框之间的间距 
               <cellspacing>设置单元格和单元格之间的间距 

          (td,th属性)
                 <width><height>单元格宽度、高度 

                 <align>单元格水平方向的对齐方式 
                             left左对齐

                            center 居中对齐
                            right 右对齐
                 <valign>单元格垂直方向的对齐方式 

                            top顶对齐
                           middle居中对齐
                           bottom底部对齐
      1.4表格结构标签

                      <caption>定义表格的标题 

                      <thead>用于组合 HTML 表格的表头内容 

                      <tbody>用于组合 HTML 表格的主体内容 

                      <tfoot>用于组合 HTML 表格的页脚内容 

       1.5合并单元格
                     <rowspan>跨行合并 

                     <colspan>跨列合并 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值