zoukankan      html  css  js  c++  java
  • HTML、CSS总结

    <!--
    css框架:bootstrap
    js框架:jQuery

    HTML标签:
    h1-h6 标题加粗
    img 插入图片
    a 链接
    b 加粗
    i 斜体
    u 下划线
    s 划掉字体
    p 段落
    br 换行
    hr 横线
    &nbsp; 空格
    &gt; 大于
    &lt; 小于
    块儿级标签 div,h1-h6,p,hr,
    默认占浏览器宽度,能设置长度或宽度
    内联标签 span,a,img,b,i,u,s
    根据内容长度决定标签长度,不能设置长度或宽度

    无序列表
    <ul>
    <li></li>
    <li></li>
    <li></li>
    </ul>

    有序列表
    <ol>
    <li></li>
    <li></li>
    <li></li>
    </ol>

    行内标签不能嵌套块儿级标签
    p标签不能嵌套块儿级标签

    CSS:引入CSS的三种方式:
    直接在标签里面通过style定义,
    在head中通过style定义,
    单独写在css文件中,然后引入到html文件中
    基本选择器:
    元素选择器 例如p,div
    ID选择器 #
    类选择器 .
    通用选择器 *
    组合选择器
    后代选择器 div p
    儿子选择器 div>p
    滋临选择器 div+p
    弟弟选择器 div~p


    选择器的优先级:
    写在标签内的style优先级最高
    选择器都一样的情况下,谁离标签近,谁优先级就高
    内联样式:权重1000
    ID选择器:权重100
    类选择器:权重10
    元素选择器:权重1

    伪类选择器
    a:link 未访问的链接
    a:visited 已访问的链接
    a:hover 鼠标移上去
    a:active 被点击
    input focus input获取光标时

    伪元素选择器
    p:first-letter 段落第一个字

    字体属性
    font-size 字体大小
    font-family 字体种类,一般指定多个种类
    position 通过X轴和Y轴定位

    背景
    background 设置背景
    background-attachment 鼠标滚动背景不动
    边框 border
    实线 solid


    display: inline; 块儿级标签变行标签
    display: block; 行标签变块儿级标签
    display: none; 不展示标签

    CSS盒子模型
    由内向外依次是 content paddind border margin
    最常用的居中是:margin: 0 auto;

    浮动 float
    只要设置浮动,就会变成块儿级标签
    清除浮动 clear
    常用的做法就是设置clear:float,
    然后在标签最后设置一个空值的块儿级标签,
    就会把父标签撑起来

    overflow 溢出属性
    border-radius 圆边框 配合着overflow可以设置圆头像

    定位 position
    默认定位 static
    相对定位 relative 相对原来位置定位
    绝对定位 absolute 相对于最近的一个被定位过的祖宗标签
    固定 fixed 返回页面顶部示例

    脱离文档流 float absolute fixed这三种都会脱离文档流

    透明度 opacity
    rgba()和opacity的区别
    rgba()只改变背景颜色的透明度效果
    opacity改变元素子元素的透明度效果

    z-index 数值越大,越靠近你,只能作用于定位过的元素





  • 相关阅读:
    评估您的网站/博客的价值
    Jquery从入门到精通:二、选择器 1、准备篇 (2)$()工厂方法
    JQuery核心:1.jQuery( expression, context )
    VS2008引用webservice的奇怪BUG解决方案
    Jquery从入门到精通:二、选择器 1、准备篇 1)基础的基础:DOM模型
    js实现html页面显示时间的定时刷新
    分页显示批量数据
    JSP与Access2010结合,实现数据的交互使用(re)
    通过datasource与数据库交互的jsp范例
    js练习V1
  • 原文地址:https://www.cnblogs.com/QimiSun/p/10067264.html
Copyright © 2011-2022 走看看