美文网首页
HTML和CSS基础

HTML和CSS基础

作者: 琼花落尽lxn | 来源:发表于2016-09-02 09:31 被阅读0次

    1.ANSI指的是当前操作系统的默认编码

    <meta charset="UTF-8">//通知浏览器使用UTF-8编码来解析HTML文件
    

    3.类型选择器会作用在所有的标签上,解决的办法是采用派生选择器

      ul li{
            ....
          }
    

    4.不显示超链接的下划线

    a{    text-decoration: none;}
    

    伪类选择器:在原有选择器的基础上添加一个限定条件,当某种情况发生时再选择此标签。

    5.盒模式及浮动布局
    当P标签中的内容溢出的时候,我们可以添加overflow属性

    6.定位
    使用position实现网页的定位,有四个值
    static,relative,absolute,fixed
    static 是默认值,标签会显示在正常的文档流中

    相对定位:标签显示在正常的文档流中
    其他元素位置不受影响
    可以使用top,left,等定位属性使这个元素相对原来位置偏移

    绝对定位:
    默认情况下是以整个浏览器为基准
    除非他有一个父元素是定位元素(position属性不是默认的static)

    固定定位:
    无论怎样拖拽滚动条,都不会移动

    定位元素的前后位置:z-index
    如果没有设置或者设置了相同的z-index属性,后出现
    的标签会覆盖前面的标签

    z-index属性只能用在定位元素上,
    如果你不想移动一个元素,只想让他变成定位元素
    使用position:relative

    7.内敛框架标签:
    用于在网页的任意位置签入另一个网页
    常用属性
    width,height,scrolling,frameboder,src,
    默认情况下iframe的背景是透明的,要想兼容一些低版本的浏览器,需要设置
    allowtransparency = true
    src 引用的页面在body上写
    style=background-color:transparent

    8.块级元素特点:
    总是新的一行,高度,行高以及内外边距都可以控制
    宽度默认是容器的百分之百,除非设定一个固定宽度
    内联元素特点:
    和其他元素都在一行
    高度,行高以及内外边距都不能改变
    宽度就是内容的宽度,不可改变

    9.引入css的代码要放在head标签之内,style以外

    <link rel="stylesheet" href="main.css">
    

    行内元素设置marging和padding,只有左右有效,上下无效

    10.css引入的方式

    <style type="text/css">    /*内部样式*/</style>
    <!--引入样式--><link rel="stylesheet" href="main.css">
    嵌入样式放到标签里面
    

    11.颜色表示方式
    颜色名
    十六进制
    rgb
    hsl
    rgba
    hsla

    当单个页面需要设置样式时,就应该使用内部样式表

    区别:外链样式与导入样式

    link标签是属于xhtml范畴,而@import则是css2.1中特有的。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。

    加载的顺序的区别,link加载的css时,是一种并行(没有尝试是否是这样)加载CSS方式,而@impor则在整个页面加载完成后才加载。

    兼容性的区别,因@import``CSS2.1才特有的,所以对于不兼容CSS2.1的浏览器来说,无效。

    在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别,此时@import就无能为力了。

    12.id选择器只能在每个HTML文档中出现一次
    13.输入伪类选择器

    /*表单获取焦点时的光标颜色*/input:focus{    color: red;}
    

    相关文章

      网友评论

          本文标题:HTML和CSS基础

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