美文网首页
css基础知识点概述

css基础知识点概述

作者: 前端_凯伦 | 来源:发表于2016-12-06 18:26 被阅读0次

    在浏览器中会把,多个换行,或是多个空格当做一个空格来处理

    1.html:

    h1-----标题标签
    
    只有h1-----h6;
        h1 --   一级标题标签
        h2 --   二级标题标签
        以此类推到h6
    
    *h1在一个页面当中只可以用一次
    
    p------段落标签
    会自带默认的行距,空白部分;
    
    br ----换行标签
    
    a-----超链接
    
    <a href="链接地址"></a>
    
    <img src="" />      图片标签
        src(图片源)
    div---- 一个容器,一个盒子,一张白纸
    
    strong      (加粗)加重说明
        b       (加粗)    
        em      (倾斜)加重说明
        i        (倾斜)
        span        (空标签)
    
    单标签
        br  
        img
        <标签名 />
    双标签
        h2 p a 
        起始的标签  结束的标签
        <标签名>       </结束标签>
    

    2属性:

        href        超链接地址
        title       文本提示(提示文字)
        alt     文本替换
        width       宽度
        height      高度
        src     图片源
        border      边框
        style       样式
    私有属性:
        href
        width   
        height
        alt
        src             
    公有属性:
        title
        style       
    
    (写法)
        属性名=" 属性值"
    

    3.css:

        样式名:样式值;
    
        需要写在style里
        width:300px;    宽度
        height:300px    高度
        border:     边框
        border-width:   边框的宽度
        border-style:   边框的线性
        border-color:   边框的颜色
        background: 背景
        background-color:背景颜色
        background-image: 背景图
        background-repeat:  背景图平铺
                -----no-repeat  不平铺
                -----repeat-x   x轴平铺
                -----repeat-y   y轴平铺
        background-position:            背景图定位
                    x   y;  
    
        (背景图缩写)background:图片路径 平铺 背景图定位;
    
        color:      文本颜色
            
        text-align: center; 文本水平居中
                right
                left
        line-height:        文本的垂直居中(文字纵向居中)行高   
                写高度     
                font-size       (文字大小)
            font-style:italic   (文字倾斜)
                   normal---不倾斜
            font-weight:bold     (文字加粗)
                   normal---不加粗
            font-family:        (字体)
                    英文
                    中文
                    unicode
            
            white-space:nowrap; (文字不换行)
            overflow:hidden;    (溢出隐藏)
            text-overflow:ellipsis;  (省略号)*缺一不可,而且要设置宽度
    
            text-decoration:none;     (取消下划线)
                    underline (下划线)
                    overline  (上划线)
                    line-through(中划线)
            text-indent     (文本缩进)
    单位          
                px
                em
                %
                        
        写在标签里面的叫做‘行内样式’
        拿到style标签里的叫做‘内联样式,内部样式’
    
    border的缩写:
            border:边框的宽度 边框的线性 边框的颜色;
            线性有:            
                solid   实线
                dashed  虚线
                dotted  点画线
    颜色:
        写英文:    
            red 
            green
            blue
        十六进制:
            #3385ff
            #0 f 0
            如果三对不一样的话不可以缩写
    
        rgb:
            rgb(0-255,0-255,0-255)
    

    4.引入图片的地址分为两种:

            绝对路径:
                    file:///C|/Users/Administrator/Desktop/什么文件
            相对路径:
                    ../images/淘宝-用背景别用border.png
    
    路径不要出现中文
    

    5.文档构成:

        <!doctype html>
        document    type    html
    
        文档      类型  html
        
                    过渡型 严格型
        head        文档头
        <meta charset="utf-8">
        unicode编码
        
        utf-8       国际编码
        gb2312/gbk  中国编码
        <meta name="author" content="作者" />     作者
        <meta name="copyright" content="版权" />      版权
        <meta name="description" content="描述" />    描述
        <meta name="keywords" content="关键字"/>       关键字 
        <title>标题</title>               标题
    

    5.XHTML:

    文档必须要有文档头
    所有的标签都要用小写英文来写
    html需要用双引号(英文)
    img标签必须有alt属性
    双标签必须要闭合标签
    单标签需要合理闭合
    

    6.字体继承:

        颜色
        字体大小
        文字加粗
        倾斜
        字体
        双下划线
        行高
    
    *   a标签不可以继承颜色;
        strong和b不会继承加粗
        em和i不会继承倾斜
    

    7选择器:

        标签选择器
            div h2 p span 
        class选择器(类选择器)
            calss="起的小名,名字"
            。
        ID选择器
            id="大名"
            #
        通配符选择器
        *
        嵌套选择器
            div空格 p
        群组选择器
            div逗号p
    
    *   class可以起很多个
        id  只可以有一个
        
        * < p < class < id <行间
        
        0  10   100    1000
    

    8.标签特性

    行标签:
        1,不可以设置宽高
        2,并到一行
        3,会受到换行或是空格影响
        4,宽度是内容的宽度,根据内容来撑起
    块标签:
        1,可以设置宽高
        2,独占一行
        3,不会受到换行与空格的影响
        4,不设置宽度,宽度就是父级的宽度
    行内块:
        1,可以设置宽高
        2,会并到一排
        3,会受到空格与换行影响
    块标签:
        h1---h6
        p
        div
    行标签:
        a
        strong
        b
        em
        i
        span
    行内块:
        img
    行,块,行内块的转换
        display:block       转换成块
        display:inline      转换成行
        display:inline-block    转换成行内块
    
    块标签可以包任何标签
        p标签只可以包行内
    
    行标签只能包行标签(*不可以包自己)
        a可以包任何标签
    什么都可以包这个img
    

    9.语义化:

    像说话一样写代码;
    有语义化:
        h1-h6
        p
        img
        a
        strong
        em
    无语义化:
        div
        span
        b
        i
    

    10.列表:

        有序列表<ol>
                    <li></li>
                    <li></li>
            </ol>
        无序列表
            <ul>
                    <li></li>
                    <li></li>
                </ul>
        描述列表
            <dl>
                    <dt></dt>
                    <dd></dd>
                </dl>
        list-style:none;    清除列表自带样式
    
    *第一个电脑自带的不方便使用,需要自己写。
    
    *需要把自带的默认样式清除掉,自己写。
    

    11.盒模型:

        width
        height
        border
        padding     
    ***
        margin不算盒子
    

    12.padding与margin

        padding     (内边距)
            :边框到内容的距离
        margin      (外边距)
            一个盒子到另一个盒子的距离
    
    关于padding:  
            padding: 5px;           上下左右
            padding:100px 50px      上下        左右
            padding:20px 60px 100px;    上   左右   下
            padding:20px 60px 80px 120px;   上 右 下 左     
    
    
    
            padding-top:50px;       每一个方向,只给一个单独的值  
            padding-left:50px;
            padding-right:50px;
            padding-bottom:50px;
    
    ***     给了padding就要用宽高来减去这个padding 的距离
            如果没有设置宽高就不需要减掉;
    
    ***     行标签只可以给左右的padding
    
    关于margin:
            margin:5px;             上下左右
            margin:100px 50px       上下        左右
            margin:20px 60px 100px;     上   左右   下
            margin:20px 60px 80px 120px;    上 右 下 左
    
    ***     行标签只可以给左右的margin
    ***     写代码之前必须清除默认的样式
            *{
                margin:0;
                padding:0;  
            }
    margin的BUG:
        ***拖拽父级(塌陷)
            解决的办法如下所述:
                    overflow:hidden;
                    border:1px solid #000;
                    padding-top:50px;(推荐)   
        ***margin合并
            解决的办法如下所述:
                给单一方向加上你想要的距离(取最大值)
    
    margin负值:
        left  or  right     不能设置宽
        top   or  bottom    不能设置高
    
    *padding不可以给负值
    
    小图片的格式:
            jpg     占据的内存小
            png     内存大     透明
            psd     有图层的
            gif     动态,透明
    

    13.浮动:

        float:      浮动
        float:left    左浮动
        float:right   右浮动
    
        说说这个浮动的特性:
                    是一个有方向的;
                    变成了块;
                    并到一排;
                    顶对齐;
                    宽度不够会掉下来;
                    脱离文档流;
                    
    
    *加上浮动的元素只会对下面的元素有影响
    *文本环绕
    
        加浮动必须得:
                只要有一个标签加上了浮动,同级的标签都要加浮动
                加上浮动就必须清浮动(只能写在父级)
                overflow:hidden;
                一定要设置宽度,不给宽度会是内容的宽度
                
    清浮动:
        overflow:hidden (溢出隐藏)
    *给父级加
        <div style="clear:both"></div>*必须用块标签
        单独再写一个块标签,给这个块标签加上一个clear:both;
    *清除掉左右浮动
        .clearfix:after{
                display:block;
                clear:both;
                content:"";
            }
        .clearfix{
            zoom:1;
        }
    *给父级加
    

    14.伪类选择器:

        :after
        :link   (未访问)
        :visited(访问过)
        :hover  (鼠标移入)
        :active (鼠标按下)
        
    link visited hover active
    
    lvha
    只有a标签才可以加这个lv
    ha都可以加
    

    15.定位:

        position:       定位
            absolute;   绝对定位
                    *脱离文档流
                    *把元素变成块
                    *根据body来定位的
        top:;
        left:;
        right:;
        bottom:;
        
        position:           定位
                relative;相对定位
                    *本身的还在站位
                    *并不会改变元素
                    *根据原先的位置来定位(自己)
        top:;
        left:;
        right:;
        bottom:;
    
        position:fixed; 固定定位;
            根据可视区来定位的;
            脱离文档流
    ------------------(2)
        z-index     (层级)
        {可以写正数也可以写负数}
    
        普通元素<浮动<定位
    
    *定位,后写的比先写的层级高
    
    咱们定位是好用;但是不能多用,能用浮动的就用浮动,用不了再用定位
    
    pacity:0.5;         透明
        0-1
    
    filter:alpha(opacity:80);兼容IE(透明)
            0-100
    *文字不能写透明里面(如果文字也透明了)
    

    外联样式(外联样式表)

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

    16.表单:

        提交数据
        <input type="text" class="txt" />
                    (明文输入框)文本输入框
                placeholder 占位符
        <input type="submit" value="百度一下" />    
            submit提交按钮
            value可以改变按钮文字
        <input type="password" name="num"/>
                    (密文输入框)密码框
        <form action="模拟百度.html" method="get"></form>
        action  数据提交的地址
        method  提交的方式
            get 地址栏 不安全
            post    后台  相对安全一点
    
    name---------想提交必须给它一个名字
    
            <input type="checkbox" />复选框
            <input type="radio" name="sex" id="id"/>单选框
            *(用相同的name)
            <label for="nv">女</label>
                for="ID"
    
        <select>
                <option>下拉框内容</option>
            </select>
                    下拉框
    
        <input type="button" value="关闭" />普通按钮
        <textarea></textarea>文本域
            
    vertical-align:         垂直对齐方式
            middle;     居中
            top;        上边
            bottom      下边
                
    outline:none;   取消焦点
    resize:none;    取消文本域拖拽
    

    17.table

    <table border="1" (边框)cellpadding="0"(清除单元格默认padding)cellspacing="0"(单元格间距)>                    表格
            <thead>                 可省略
            <tr>            行行
                        <th></th>   头列
                    </tr>
        </thead>            表头
            <tbody>                 不可以
            <tr>            行行
                        <td></td>   身列
                    </tr>
        </tbody>            表身
            <tfoot>                 可省略
            <tr>            行行
                        <td></td>   尾列
                    </tr>
        </tfoot>            表尾
    </table>
    border-collapse:collapse;   取消间距
    colspan="3"         行的单元格合并
    rowspan="2"         列的单元格合并
    如果没有内容,要个高度与宽度(因为不设置宽高的话它是根据内容撑开)
    
    

    18.框架

    溢出的部分变成滚动条:
            overflow:scroll;
    X部分溢出隐藏,Y轴变成滚动条:
        overflow-x:hidden   
    框架
        后台管理系统;
    
        框架 <iframe></iframe>    
    <iframe src="../小米/index.html" scrolling="no" width="500" height="500" frameborder="0">
    </ifra>
        src="引入地址"
        scrolling="no"(取消自带滚条)(写样式不好使)
        frameborder="0" 取消边框
    
    --------------------------------------------------------
        框架集:
            <body>
                <frameset>
                     </frameset>
            </body>
    ***在一个页面中要是有frameset就不能有body
        <frameset rows="200,*">
                <frame src="../小米/index.html" />
                    <frame src="../小米/index.html" />       
            </frameset>
        <frameset cols="150,*">
                    <frame src="../小米/index.html" />
                    <frame src="../小米/index.html" />
            </frameset>     
    

    相关文章

      网友评论

          本文标题:css基础知识点概述

          本文链接:https://www.haomeiwen.com/subject/ugmrmttx.html