HTML+CSS总结_css 瑟瑟发抖样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_46578458/article/details/105015048

网页的组成

             结构         表现       行为
           html          css          js
    
    html/xhtml/html5

    html 超文本标记语言  
    xhtml 扩展超文本标记语言
    html5  html的第五次重大修改

    html的基本结构

    <!DOCTYPE html>
    <html>
        <head> 描述区
             <mate  charset="utf-8">  国际性编码格式
             <title></title>   网页的标题
        </head>
        <body></body>  内容区
    </html>



           html的常用标签   
                         加粗  <b></b>  <strong></strong>                                                                              
                         倾斜  <i></i>  <em></em>
                         下划线        <u></u>
                         水平线       <hr>
                         强制换行     <br>
                         段落   <p></p>
                         div  span 
                         标题  h1-h6
                         上标和下标  sup
                                    sub
                      

          a  超链接  <a></a>
                 href="路径"
                 target     blank  新页面打开
                            self  当前页面跳转
                 title     文字提示 
            
          img  插入图片
           
             src="路径"

             alt   文本代替图片 当图片加载不出来的时候 

             title   鼠标放到图片上的文字提示


          相对路径   
                 
                  ../  返回上一级     ./同级

            
           有序列表  ol  li  
           无序列表  ul  li  
           自定义列表   dl  
                        dt dd

            表格  table  
                       tr 
                       td 

                                border 边框  
                                bordercolor   边框颜色
                                border-width  边框宽度

                                cellspacing   单元格与单元格直接的间距
                                cellpadding   单元格与内容之间的间距 

                                rowspan  合并行
                                colspan  合并列

                                跨行合并行  不跨行合并列


             表单  form  
                         
                         action="路径"
                         method="方法"  get  post
                         name="表单名称"
                 input 
                        type="类型"
                        value  什么类型对应什么作用
                        name   当前表单名称
                        maxlength  输入的最大长度
                        size  字符 
                get post区别  1 post比get安全
                              2 get获取资源  一个更新服务器资源
                              3 get 不会改变服务器的资源
                              4 get 允许发送的数据小
                          
            <input type="text" name="" id="" placeholder="">文本框
            <input type="password" name="" id="" >密码框
            <input type="submit" name="" value="">提交框
            <input type="reset" name="" value="">重置框
            <input type="button" name="" > 按钮
            -->

CSS基础

          语法   选择符{属性：属性值}

  css样式    
         
          外部样式 内部样式 内联样式

          外部样式有两种
          <link ref="stylesheet" type="text/css" href="路径">
          @import url()

          1   link是html标签的一种 
              @import 是css提供的一种方法
          2   link导入的CSS样式可以跟html结构同时加载
              @import  先加载html  再加载导入的样式
          3   link的兼容性较好
          4   link  可以通过js 控制DOM样式 来改变动画效果

          内部样式 
          <style>

              选择符{属性:属性值}
          </style>
          内联样式
          <标签 style="属性：属性值；"></标签>


  css属性  文本属性 
         1   font-size  文本大小
           系统默认的文本大小是16px
           还有  em  pt(磅)等单位
           1em=16px  16px=12pt  medium=16px  

         2    color     文本颜色
          16进制    
          color：#000000
          六位数 前两位红 中间两位绿 后两位 蓝
          当两两相同时   可以省略
          rgb(255,255,255)
          rgba(255,255,255,0-1)透明度
        
         3  font-weight   文本粗细
              bold
              bolder
              normal 取消加粗
              数值 100-900
              100-500 正常
              600-900 加粗
         
         4  font-style  文本样式
               italic  倾斜
               oblique  倾斜 
               normal   取消倾斜
         
         5  font-family 字体
             font-family：字体1，字体2，字体3；
             使用中文字体时 字体要加双引号
             使用多个英文单词字体时 字体要加双引号
             使用单个英文单词字体时  不用加双引号

         6  text-align  文本水平对齐方式
              center 居中
              left
              right
              justify 两端对齐
         
         7   line-height  行高
             单行文本时  当行高等于容器的高度是  文本垂直居中
                        当行高小于容器的高度时  文本靠上
                        当行高大于容器的高度时  文本靠下
             多行文本 量取行高 要从 第一行字体的上端量到第二行字体的上端

         8  text-decoration  修饰文本
               none  取消修饰
               underline 下划线
               overline  上划线
               line-through 删除线
         
         9  text-indent  首行缩进 
              2em  相对大小  系统默认16px
              可以取负值
         10  letter-spacing  文字间距
              word-spacing    单词间距 
         
         11  float
                    left
                    right
                    none
                添加浮动的容器 不会占据位置
                能使不在一排的容器横向排列
                可以做图文环绕效果

CSS选择符

     1      类型选择器（标签选择器）    权重0001
           标签{属性：属性值}

     2      id选择器                权重  0100
           <div id="名称"></名称>
              #名称{属性:属性值}
     
     3      类选择器 (class选择器)   权重 0010 
            <div class="名称"></名称>
              .名称{属性：属性值}

     4    伪类选择器    权重 0010
         
          a link    未点击是的样式
          a visited  点击过的样式
          a hover    鼠标滑过的样式
          a active   鼠标点击时的样式

     5    通配符 
          *{
              margin:0;
              padding:0;
          }
     
     6   群组选择器  
           选择符，选择符{属性：属性值}  权重等于选择符本身

     7   包含选择器 
           父元素 子元素{属性：属性值；}     权重之和

     css 层叠性
          产生权重关系 必然体现层叠性

          内联样式> 外部/内部  
          外部内部同时作用于一个对象 后写的样式覆盖前面的样式

          id选择器>class选择器/伪类选择器>类型选择器

          ！importan  权重最高 作用于某一样式

          开发者样式>读者样式>浏览器样式

          权重相同时 后面的样式会把前面写的样式覆盖掉