• HTMl和CSS笔记


    Dw快捷键:
    打出div按Tab键可快速生成<div></div>
    打出div.name按Tab键可快速生成<div class="name"></div>
    选中某段代码按Ctrl+E可以直接在HTML中显示CSS代码

    标题段落图片标签:
    <title>页面的名字
    <h1>~<h6>最大~最小标题
    <p>段落标签
    <img>独立标签,图片

    强调标签:
    <em>斜体
    <strong>加粗
    <span>需要自己设置样式
    <i>倾斜标签
    <b>粗体标签
    <s>删除线标签
    <u>下划线标签

    列表标签:
    <ul>无序列表
    <ol>有序列表
    <li>列表标签

    其他标签:
    <div>定义HTML的分隔区域,相当于一个盒子
    <a>用来设置超链接

    class和id都可以给标签命名:class可以有多个命名,一般用于CSS;而id是唯一命名,一般用于GS
    修改class="name"的样式:<style>.name{ }</style>
    修改id="name"的样式:<style>#name{ }</style>

    CSS样式:
    内联式:把CSS样式直接写在HTML标签中
    嵌入式:把CSS样式写在<head><style></style></head>中
    外部式:把CSS样式写在.css文件中,在<head>内使用<link>标签建立引用
    优先级:就近原则,内联式>嵌入式>外部式

    导入外部css文件:在<head></head>中添加<link>独立标签
    HTML标签会自带一些CSS样式,所以在外部CSS里应该先重置body样式
    HTML中注释:<!---->左右最少两个-
    CSS中注释:/**/左右最少一个*

    font-weight:bold(加厚变粗体)
    font-family字体样式:Simsun宋体、SimHei黑体、Microsoft Yahei微软雅黑
    text-decoration文本修饰:underline下划线(也可用<u></u>)、line-through删除线(也可用<s></s>)
    line-height行高、letter-spacing字间距、text-align对齐方式

    display可以更改标签的分类:block块状标签(单独成行,可设置排版样式)、inline-block内联块状标签(不单独成行,可设置排版样式)、inline内联标签(不单独成行,不可设置排版样式)
    有float是浮动模型,有position:absolute、relative、fixed是层模型,都没有则是默认的流动模型

    background可以给div设置很多背景参数:background-color、background-image、background-repeat、background-position等(注意没有background-size)
    border可以给div设置很多边框参数:如border-style、border-color、border-width等
    margin可以设置边框的边距:一个参数(上下左右)、两个参数(上下、左右)、三个参数(上、左右、下)、四个参数(上、右、下、左)
    padding可以设置边框的内填充(会改变边框的大小):一个参数(上下左右)、两个参数(上下、左右)、三个参数(上、左右、下)、四个参数(上、右、下、左)
    border-radius可以给边框设置圆角,最大值50%可以让正方形变成圆形
    cursor可以改变鼠标样式:pointer是变为可点击样式、move是变为可移动样式、text是变为可编辑样式

    把line-height设置为box的大小可以实现单行文字的垂直居中
    z-index可以设置div标签的层级,数值大的在上面,优先显示
    overflow可以设置图片溢出部分隐藏
    伪类常用来设置连接的显示状态:link设置未访问时的状态、visited设置已访问过的状态、hover设置鼠标放置在上面时的状态、active设置鼠标点击时的状态
    &nbsp;是空格符号

  • 相关阅读:
    借助浏览器流特性设置宽度
    元素类型的转换
    浮动
    【华为云技术分享】【DevCloud · 敏捷智库】软件开发团队如何管理琐碎、突发性任务(内附下载材料)
    【华为云技术分享】从项目实际问题引发的思考
    【华为云技术分享】文言文也能编程?此诚年度最骚语言也
    【华为云技术分享】这种反爬虫手段有点意思,看我破了它!
    【华为云技术分享】华为云获CCF BDCI 2019金融实体级情感分析大赛冠军
    【华为云技术分享】【鲲鹏来了】鲲鹏迁移过程案例分享
    【华为云技术分享】非编程人学Python,要注意哪些隐秘的错误认知?
  • 原文地址:https://www.cnblogs.com/wjw2018/p/11624036.html
Copyright © 2020-2023  润新知