HTML与CSS基础

Html

标签

  • 斜体
  • 粗体
  • 单独的样式
  • 引用文本
  • 长文本引用

  • 换行
  •   空格

  • 分割线
  • 地址信息
  • 单行代码
  •  多行代码
  • 无序列表
  • 有序列表
  • table、tbody、tr、th、td 表格
  • 表格摘要
  • 表格标题
  • 链接显示的文本 链接
  • ``target="_blank">click here!`在新建浏览器窗口中打开链接
  • 发送使用mailto在网页中链接Email地址
  • ![](图片地址) 为网页插入图片
  • 表单标签

    • 使用表单标签,与用户交互

    • 文本域,支持多行文本输入

    • radio 单选框 checkbox复选框

      
      
    • 下拉列表框 单选

      
      
    • 下拉列表框 多选

      
      
    • 提交按钮与重置按钮

    • form表单中的label标签,如果你在 label 标签内点击文本,就会触发对应的控件



    CSS

    基础知识

    • 内联式css样式,直接写在HTML标签中

      这里文字是红色。

    • 嵌入式css样式,写在当前文件

      
      
    • 外部式css样式,写在单独的一个文件中。标签位置一般写在标签之内。

      
      

    CSS选择器

    在{}之前的部分就是“选择器”,“选择器”指明了{}中的“样式”的作用对象

    • 标签选择器

      p{font-size:12px;line-height:1.6em;}
      
    • 类选择器

      .类选器名称{css样式代码;}
      胆小如鼠
      .stress{color:red;}
      
    • ID选择器

      公开课
      #setGreen{
         color:green;
      }
      
    • 类选择器与id选择器的区别

      1. ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。

      2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)

        hello world!
        
      3. 子选择器 作用于子元素的第一代后代

        .food>li{border:1px solid red;}
        
    • 包含(后代)选择器 后代选择器是作用于所有子后代元素

      .first  span{color:red;}
      
    • 通用选择器 匹配html中所有标签元素

      * {color:red;}
      
    • 伪类选择符 允许给html不存在的标签(标签的某种状态)设置样式

      a:hover{color:red;}
      
    • 分组选择符 当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符,

      h1,span{color:red;}
      

    CSS的基础继承、层叠和特殊性

    • 基础继承:继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代

    • 特殊性:浏览器是根据权值来判断使用哪种css样式的,标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100

    • 层叠:层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用

    • 重要性:有些特殊的情况需要为某些样式设置具有最高权值,这时候我们可以使用!important来解决。

      p{color:red!important;}
      

    CSS格式化排版

    • 字体

      body{font-family:"Microsoft Yahei";}
      
    • 字号、颜色

      body{font-size:12px;color:#666}
      
    • 粗体

      p span{font-weight:bold;}
      
    • 斜体

      p a{font-style:italic;}
      
    • 下划线

      p a{text-decoration:underline;}
      
    • 中划线

      .oldPrice{text-decoration:line-through;}
      
    • 首行缩进

      p{text-indent:2em;}
      
    • 行间距(行高)

      p{line-height:1.5em;}
      
    • 中文字间距、字母间距

      h1{letter-spacing:50px;}
      
    • 对齐

      div{text-align:center;}
      

    CSS盒模型

    • 元素分类

      块状元素都自带换行效果;

      内联元素都是定义行内小区域且不换行,但如果没有内容就没有意义,不占空间;

      内联块状元素除了不换行,即使没有内容也会占空间。

      1. 块状元素

        ...

            、、
          • 内联元素(行内元素)


          • 内联块状元素

            
            
          • 元素分类--块级元素

            在html中

            CSS布局模型

            在网页中,元素有三种布局模型:流动模型(Flow)、浮动模型 (Float)、层模型(Layer)

            • 流动模型

              流动(Flow)是默认的网页布局模式。流动布局模型具有2个比较典型的特征:

              1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%
              2. 在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。(内联元素可不像块状元素这么霸道独占一行)
            • 浮动模型

              任何元素在默认情况下是不能浮动的,但可以用 CSS 定义为浮动,如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素向左浮动一行显示。

              div{
                  width:200px;
                  height:200px;
                  border:2px red solid;
                  float:left;
              }
              
            • 层模型

              层模型有三种形式:绝对定位(position: absolute),相对定位(position: relative),固定定位(position: fixed)

            • 层模型--绝对定位

              如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口

              如下面代码可以实现div元素相对于浏览器窗口向右移动100px,向下移动50px。

              div{
                  width:200px;
                  height:200px;
                  border:2px red solid;
                  position:absolute;
                  left:100px;
                  top:50px;
              }
              
            • 层模型--相对定位

              如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。

              如下代码实现相对于以前位置向下移动50px,向右移动100px;

              #div1{
                  width:200px;
                  height:200px;
                  border:2px red solid;
                  position:relative;
                  left:100px;
                  top:50px;
              }
              
            • 层模型--固定定位

              fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。

              以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变。

              #div1{
                  width:200px;
                  height:200px;
                  border:2px red solid;
                  position:fixed;
                  left:100px;
                  top:50px;
              }
              
            • Relative与Absolute结合使用

              1. 参照定位的元素必须是相对定位元素的前辈元素:

                相对参照元素进行定位
              2. 参照定位的元素必须加入position:relative;

                #box1{
                    width:200px;
                    height:200px;
                    position:relative;        
                }
                
              3. 定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。

                #box2{
                    position:absolute;
                    top:20px;
                    left:30px;         
                }
                

            CSS代码缩写,占用更少的宽带

            • 盒模型代码简写

              模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。通常有下面三种缩写方法:

              1. 如果top、right、bottom、left的值相同,如下面代码:

                margin:10px 10px 10px 10px;
                

                可缩写为:

                margin:10px;
                
              2. 如果top和bottom值相同、left和 right的值相同,如下面代码:

                margin:10px 20px 10px 20px;
                

                可缩写为:

                margin:10px 20px;
                
              3. 如果left和right的值相同,如下面代码:

                margin:10px 20px 30px 20px;
                
                margin:10px 20px 30px;
                
            • 颜色值缩写

              p{color:#000000;}
              

              可以缩写为:

              p{color: #000;}
              
              p{color: #336699;}
              

              可以缩写为:

              p{color: #369;}
              
            • 字体缩写

              网页中的字体css样式代码也有他自己的缩写方式

              body{
                  font-style:italic;
                  font-variant:small-caps; 
                  font-weight:bold; 
                  font-size:12px; 
                  line-height:1.5em; 
                  font-family:"宋体",sans-serif;
              }
              

              这么多行的代码其实可以缩写为一句:

              body{
                  font:italic  small-caps  bold  12px/1.5em  "宋体",sans-serif;
              }
              

              注意:

              1. 使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
              2. 在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

              一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用:

              body{
                  font:12px/1.5em  "宋体",sans-serif;
              }
              

            单位和值

            • 颜色值

              设置颜色的方法有很多种:

              1. 英文命令颜色

                p{color:red;}
                
              2. RGB颜色

                每一项的值可以是 0~255 之间的整数,也可以是 0%~100% 的百分数。

                p{color:rgb(133,45,200);}
                p{color:rgb(20%,33%,25%);}
                
              3. 十六进制颜色

                p{color:#00ffff;}
                
            • 长度值

              1. 像素 px

              2. em

                就是本元素给定字体的 font-size 值,如果元素的 font-size 为 14px ,那么 1em = 14px;如果 font-size 为 18px,那么 1em = 18px。如下代码:

              3. 百分比

                p{font-size:12px;line-height:130%}
                

                设置行高(行间距)为字体的130%(12 * 1.3 = 15.6px)

            CSS样式设置小技巧

            • 水平居中设置—行内设置

              如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的

              
                
              我想要在父容器中水平居中显示。
              .txtCenter{ text-align:center; }
            • 水平居中设置—定宽块状元素

              满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

              html代码:

              
                
              我是定宽块状元素,哈哈,我要水平居中显示。

              css代码:

              
              

              也可以写成

              margin-left:auto;
              margin-right:auto;
              
            • 水平居中设置—不定宽块状元素

              不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多)

              1. 加入 table标签

                为需要设置的居中的元素外面加入一个 table 标签 ( 包括

          • )。

            • 我是第一行文本
            • 我是第二行文本
            • 我是第三行文本

            为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

            
            
          • 设置 display: inline方法::改变块级元素的 display 为 inline 类型(设置为行内元素显示),然后使用 text-align:center 来实现居中效果。

            
            
            
            
          • 设置 position:relative和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

            通过给父元素设置float,然后给父元素设置 position:relativeleft:50%,子元素设置 position:relativeleft: -50%来实现水平居中。

            
            
            .container{
                float:left;
                position:relative;
                left:50%
            }
            .container ul{
                list-style:none;
                margin:0;
                padding:0;
                
                position:relative;
                left:-50%;
            }
            .container li{float:left;display:inline;margin-right:8px;}
            
          • 垂直居中—父元素高度确定的单行文本

            父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的heightline-height高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。

            这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离了块。

            hi,imooc!
            
            
          • 垂直居中—父元素高度确定的多行文本

            1. 使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。

              因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

              
              

              看我是否可以居中。

              table td{height:500px;background:#ccc}
              
            2. 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差

              看我是否可以居中。

              看我是否可以居中。

              看我是否可以居中。

              
              
          • 隐形改变display的值

            只要html代码中出现以下两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。

            1. position : absolute
            2. float : leftfloat:right

            都知道 a 标签是 行内元素 ,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

            
            
            
            

          • 你可能感兴趣的:(HTML与CSS基础)