zoukankan      html  css  js  c++  java
  • 9.5(day3)

    #1 HTML与css的关系

    HTML:只做网页结构;

    CSS:美化页面;

    JavaScript:特效,表单验证,数据处理。

    #2 CSS写在哪里?

    行内样式:直接写在HTML标签上;

    内嵌样式:写在head里面,用style编写;

    链接样式:写在head里面,用link进行链接;

    导入样式:写在head里面,写在style里面。

    #3 导入样式和链接样式的区别是什么?

    链接样式:两个文件有关联关系,两个文件用一条线连接起来了;

    导入样式:将CSS文件合并到当前HTML文件里了,最终是一个文件,相当于内嵌。

    #4 优先级

    就近原则(内嵌和链接顺序是可以调整的)

    行内>内嵌>链接

    #5 基础选择器

    #6 选择器优先级
    ID选择器>类选择器>元素选择器>通配符选择器
    #7 关系型选择器
    (1) 子级选择器
     
    (2) 后代选择器
    (3) 群组选择器
    #8 字体
    font-family:宋体,微软雅黑;
    写多个字体,逗号隔开是为了兼容各种浏览器,第一种不识别则找第二种
    #9 安装自定义字体
    1. 字体下载大宝库寻找个性字体,下载;
    2. 找到压缩包里的ttf文件,点击打开之后点击安装;
    3. 记住字体名称;
    4. 可以在font-family中使用。
    #10 font-style
    font-style:normal;  正常
    font-style:italic;      斜体
    #11 font-size
    单位:px(像素,绝对值),em(父标签px的倍数),rem(HTML标签的px的倍数)
    #12 font-weight
    font-weight:normal;        正常粗细
    font-weight:bold;            加粗
    font-weight:lighter;         细体
    #13 line-height(行高-基线间的距离)
     多行文本:
    line-height:30px;      行间距30px
    line-height:2;            行间距2*fontsize
    单行文本:
    line-height与块元素height保持一致,文本就能垂直居中路
    #来几个快捷键
    div+tab:创建一个div;
    a*3+tab;创建3个div、;
    ul>li*2+tab:创建一个ul,里面有2个li;
    快捷键:
    ctrl+x          :剪切当前行
    ctrl+c          :复制当前行
    ctrl+z          :撤销
    ctrl+y          :取消撤销
    ctrl+v          :粘贴当前行内容到下一行
    alt+鼠标左键:可以连续创建多个光标,同时多个位置编写内容
    ctrl+d          :删除当前行
    shift+tab     :整块内容向左推
    tab               :整块内容向右推
    注释             :ctrl+?
    win+l           :锁屏
    win+e          :快速打开我的电脑
    #14 text-align:文本的水平对齐方式
    text-align:left;           左对齐
    text-align:center;      居中
    text-align:right;        右对齐
    text-align:justify;      两端对齐
    #15 text-decoration:文字的线
    text-decoration:underline;           下划线
    text-decoration:overline;             上划线
    text-decoration:line-through;      删除线
    text-decoration:none;                  不要线
    #16 text-indent:首行文本缩进
    text-indent:2em / 32px;
    #17 颜色(color;background-color)
    color:red
    color:#ff0000;
    color:#f00;                             对#ff0000的简写形式
    color:rgb(255,0,0);            r:red,g:gree,b:blue(0-255)
    color:rgba(255,0,0,1);       a表示不透明度:0纯透明,1纯不透明
    #18 background
    background-color:red;                           背景色
    background-image:url(xx.jpg);          背景图片
    background-repeat:repeat;                    平铺
    background-repeat:repeat-x;                 横向平铺
    background-repeat:repeat-y;                 纵向平铺
    background-repeat:no-repeat;               不平铺
    background-position:50%  50%;            背景图在元素中间
    background-position:right bottom;       背景图在元素右下角
    background-position:50px  50%;           背景图距元素左上角50px
    background-size:100% 100%;                背景图横向和纵向都铺满元素
    background-size:100%;                          横向铺满,图片仍然是原比例
    #19 关于高度的问题
    如果块元素的高度要设置为百分百的话,其父元素必须要有高度,一直找到HTML
    #20 让body高度沾满HTML
    html,body{height:100%}
    #21 背景图固定
    background-attachment:fixed;      看起来固定在页面的某个位置
    background-attachment:local;      背景图随着内容滚动而滚动
    #22 background简写
    background:颜色 图片 平铺 位置 是否固定;
    background:yellow url(xx.jpg)no-repeat center center fixed;
  • 相关阅读:
    C# IEnumerable 和 IEnumerator接口浅析
    SQLite笔记
    命令行工具osql.exe使用
    2016年年终工作总结
    c# Json 自定义类作为字典键时,序列化和反序列化的处理方法
    多线程随笔
    常见异步机制分析
    SQL 通过syscolumns.xtype动态查找指定数据类型字段所包含的数据
    SQL 删除索引错误
    SQL 实用函数
  • 原文地址:https://www.cnblogs.com/jihongtao/p/9590373.html
Copyright © 2011-2022 走看看