zoukankan      html  css  js  c++  java
  • html+css 技巧

    3、css定义的技巧:
    【1】、为了将来的css代码优化,建议所有的属性上要带上“;”

    【2】、某些html 标签,有自己默认的css属性值,
           例如h1 标签就有自己的属性值,自动就是加粗显示。字号比较大。

    【3】、为了兼容主流浏览器,为了统一,建议我们在建设是,将所有元素的css 属性,重置为标准         的。
    【4】、不同的浏览器,有各自不同的css属性值----要命的,就是浏览器的兼容。

    【5】、就一个比较特殊的字体想用,怎么办?--将其转换为图片。
           分中英文字体。设置字体的顺序。将英文字体设置在前,中文在后。

    【6】、css 编辑工具--用什么都可以,高手,用树叶杀人

    【7】、我们使用95%的css,都是最常用的属性

    【8】、想让文字在垂直方向上,居中,将行高设置为,元素的高度,行高=元素的高度
          (line-height=height)
           *******文字的内容不能超过,元素的宽度,也就是不能换行。

    【9】、css可以重置新设置,html 标签的默认样式。
    ---------------------------------------------------------------------------------------------

    4、css 应用给网页的方式,就相当于,给人怎么去穿上衣服。
    【1】、行内样式:应用于一个。
    【2】、嵌入样式:应用于一类标签
    【3】、如果我们有很多的网页,都要用css,将这些css 写到一个独立文件中,这个就是外链
           式,推荐使用

    【4】、导入试样式:也就是将样式写到一个文件中,再倒入到网页中,
          *****说明,导入试,其实与内嵌式是相类似的,都是将样式加入到网页里。
           1、导入试,会占用html 文件空间
           2、有些浏览器,解析会有问题。浏览器会,最后读取 @import 中内容
    ----------------------------------------------------------------------------------------------

    二、css 选择符
     1、什么选择符?就是你要控制的对象
     2、选择符的分类:
     【1】、标签选择符---针对html 标签
     【2】、ID选择符---针对某一个id
     【3】、类选择符---针对某一类,或者某一些元素,他们的样式是相同的。
             *****同一个元素,应用多个类,类与类名之间用空格分隔

    三、css 的特性
    css叫层叠样式表
    1、继承:子元素会继承父元素的某些样式。
              【因为有些子元素本身就有默认值,所以它就不用父元素】

    2、层叠:子元素如果定义了与父元素相同的样式,会覆盖掉父元素的样式。

    --------------------------------------------------------------------------------------------

    五、常用的一些文字,文本控制的css样式
    *****我们在应用css样式时,一定要注意他的默认值。因为不同的浏览器它的css默认值是不同的
     演示这个例子:目的,不同的属性,浏览器支持是不一样,我们还要保证我们网页的兼容性?
       尽量使用通用属性,不用存在兼容性差别的属性。


    六、css 控制元素的某种状态---伪类

    伪类语法:
    元素名称:伪类名称{属性:值}

    例如:超链接的,鼠标经过状态

    a:hover{text-decoration:underline;}

    *****如果,鼠标放上效果不起作用,请修改连接状态的顺序 L-V-H-A

    a:link {color: #FF0000}     /* 未访问的链接 */
    a:visited {color: #00FF00}      /* 已访问的链接 */
    a:hover {color: #FF00FF}        /* 当有鼠标悬停在链接上 */
    a:active {color: #0000FF}       /* 被选择的链接 */
    -------------------------------------------------------------------------------------


    css 高级应用

    二、css 选择符:
    css选择符作用?制定css样式所有对象(范围)

    1、标签选择符:针对html 标签
    2、id选择符:针对页面只出现一次的内容,id
    3、类选择符:针对某些元素,相同的样式,重复样式

    ******默认情况某些html 元素本身有自己的默认值

    4、控制所有元素-----使用通配符---*

    通配选择符: *{属性:值},用于定义所有html元素
    ********的作用范围很广,但是,它的效率最低。慎用

      *{margin:0;padding:0;}//重置所有元素的,外边距与内边距,为零
    ---------------------------------------------------------------------------------------

    三、css 盒子模型

    *******一个盒子是由以下几部分构成的:

    1、盒子中的内容 content
    2、盒子的边框 border
    3、盒子的边框与内容之间的距离,称为填充--padding,内边距(内补丁)
    4、多个盒子存在,盒子与盒子之间的距离,称为边界---margin,外边距(外补丁)

    ******就是盒子所在的实际宽度为例=左右边界 + 左右边框 + 左右内填充 + 内容宽度

     
    ******css盒子的相关属性:
    【1】、内容属性:内容本身的宽=width,内容本身的高=height
    【2】、内填充属性:内容与边界之间的距离,padding
     *****再定义盒子的宽度时,要考虑到,内填充,边框,边界的存在
     如果,增加了内填充了,整个盒子宽度值,要再减去,你增加的,内填充值。

    小盒子的上面=20 右面 30 下面50 左面100 外边界

    margin:20 30 50 100;

    margin-top:
    margin-right:
    margin-bottom:
    margin-left:

    *****将来在使用外边距,要注意浏览器兼容性。
    ***** 除了值为0的情况下,所有的非零的值,后面都要加单位。

    *****由于各个浏览器存在着,内外边距的,默认值,还不同。
    我们需要将所有浏览器的默认内外边距,都从零开始计算。

    在实际工作中,不要这个  *{margin:0;padding:0;},因为效率最低
    所以我们是用到了哪些元素,就把哪些元素的默认值,归零。

    css 的属性,虽然有继承的特点,但是,并不是,所有的属性都有继承。

    *****css 小技巧:
    【1】、让盒子,水平居中。将对象的左右外边界,设置auto;
    【2】、让盒子中的内容,垂直居中,设置行高=盒子的高度,但是不要有换行。
    【3】、我们在调试的时候,可以适当加背景颜色。

    边框属性的说明:

    css 语法:
    border:border-width || border-style || border-color

    根据语法,推理出它的使用方法

    如果只写 border,则后面要跟着的是,三个不同的自属性,第一个 粗细  第二个 样式  第三个 颜色
    border:2px solid blue
    border: 2px solid blue

    关于列表的属性介绍:---存在兼容性问题

    list-style:列表的图片

    语法:
    list-style: list-style-image || list-style-position || list-style-type

    列表的样式:列表的图片  列表的符号位置  列表的样式

    list-style:none 不要列表的符号(一般这么使用,避免浏览器的兼容性带来的问题)


    ******html 元素的分类:块与内联

    背景图片,默认情况下是进行水平与垂直方向上的平铺。
    默认背景图片,在元素的左上角显示。
    背景图片的衣服方式:固定的含义是,将图片固定在,屏幕(可视区域)的某个位置。
    兼容性 IE6 只有 html 与 body 两个元素,支持这个属性值。

    让你显得专业一定的技巧:

    翻转效果:其实思路就是,准备两张大小相同,内容不同的图片,正常情况下显示一张
              在鼠标经过时候,在显示另一张。

    它叫伪类,表示一种状态
    :link

    css精灵技巧:主要是为了,减少http 请求。

    --------------------------------------------------------------------------------------

    二、css布局的方式:
    1、默认的,就是按文档流的顺序。按html 的结构顺序。

    2、浮动方式:

    3、定位方式:

    三、浮动
      浮动就是将,块元素的,霸道属性,独占一行的行为,取消,允许别人其他一行。
      浮动其实是,这个块,从原来的文档流模式中,分离出来,它后的对象,就视它不存在。

      常用的布局效果,例如,一行并列式,就是在一行中,显示几个块元素。

    css 把页面元素,分为两类,一种是块,一种是内联元素。

    body,div, p, h1
    ul与li 默认情况下是块元素,要想让他们在一行中显示,就要用到浮动。

    我们在制作时,你多使用不同的浏览器查看你的结果,这样,你就能知道,各种浏览器的差别。
    ******总结出,当IE6 父元素,中的子元素,的高度超过了,父元素的高度,IE6默认,会把父元素的
    高度,自动增加。

    ******如果想让,多个块,显示在同一行中,可以将,这些快,都设置为浮动,并且浮动的方向相同

    ******浮动浮动,先浮后动,浮动的对象,会先漂浮起,离开原来的位置。后动,就是他后面的对象。
    会向它原来的位置上,动起来。

    ---------------------------------------------------------------------------------------------


    四、清除浮动:就是可以去掉前面对象浮动,对后面对象的影响。

    为什么,原来在一行中的两个块,会因为,浏览器窗口的大小,改变,而改变其原来的位置。

    ******设置一个块为水平居中时,都会给这个块设置一个宽度值。

    ******当父元素,没有指定,高度时,并且,它的子元素有浮动,这时,这个父元素的高度不会自动增加。
    1、第一种方法:增加一个空标签,就是没有内容的标签。会增加代码。
    2、第二种方法:给父元素,加overflow:hidden

    ******定位布局:就是可以通过元素的position 属性控制元素的位置。

    *******当我们要想使用绝对定位时:必须有两个条件
    【1】、必须给 父元素 加定位属性,一般建议使用 position:relative;
    【2】、给子元素,加绝对定位position:absolute;同事要加方向属性。

    *******相对定位于绝对定位。
    绝对定位是父元素为基准点,进行定位----会脱离文档流
    相对定位是根据自身为基准点,进行定位-----但还站着原来的空间



  • 相关阅读:
    Algs4-1.1.27二项分布
    Algs4-1.1.25数学归纳法证明欧几里得算法
    Algs4-1.1.26证明以下代码能够将a、b、c按照升序排列
    Algs4-1.1.24欧几里得算法求最大公约数
    Algs4-1.1.23区分在与不在白名单中的值
    Algs4-1.1.22以缩进方式打印递归参数
    微服务架构是什么?
    python 迭代器
    python 列表推导
    python 创建二维数组的方法
  • 原文地址:https://www.cnblogs.com/sufi/p/5235538.html
Copyright © 2011-2022 走看看