zoukankan      html  css  js  c++  java
  • 11-18网页基础--第二部分CSS样式属性(1)

    第一课:样式属性

    style 样式:
    style样式不仅可以直接在<body>中设置成整个网页的样式、格式;为了将样式、格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在<head>..</head>中来分别设置不同元素、标签的格式和样式。

    这样做出来的效果和在<body>中设置的格式是一样的,但有所区别的是单独把style写出来的样式可以只对某个或某几个标签有效,有效防止编写重复、费时和修改麻烦等;

    还可以在style中对设置的格式的标签进行命名,直接在需要修改的标签处引用此样式,直接用class="命名的名称";

    1、背景与前景

    background-color:#90;    /*背景色,样式表优先级高*/

    background-image:url(路径);  /*设置背景图片(默认)*/

    background-attachment:fixed; /*背景是固定的,不随字体滚动*/

    background-sttachment:scoll;  /*背景随字体滚动*/

    background-repeat:no-repeat;  /*no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺*/

    background-position:center;  /*背景图居中,设置背景图位置,repeat必须为“no-repeat”*/

    background-position:right top;   /*背景图放置到右上角(方位可以自己更改)*/

    background-position:left 100px top 300px;  /*离左上角100像素,离上边300像素(可以设为负值)*/

    2、字体

    font-family:"新宋体";/*字体。常用微软雅黑、宋体*/

    font-size:12px;  /*字体大小,常用像素12px,14px,18px,还可以用"cm","2.5cm"即:默认字体的2.5倍。还可以用百分数。*/

    font-weight:bold; /*bold是加粗,normal是正常。*/

    font-style:italic; /*倾斜,normal是不倾斜*/

    color:#03C;   /*颜色*/

    text-decoration:underline; /*下划线,overline是上划线,line-through是删除线,none是去掉下划线*/

    text-align:center;   /*(水平对齐)居中对齐,left是左对齐,right是右对齐*/

    vertical-align:middle; /*(垂直对齐)居中对齐,top是顶部对齐,bottom是底部对齐,一般设置行高后使用*/

    text-indent:28px;  /*首行缩进量*/

    line-height:24px;  /*行高,一般为1.5~2倍字体大小*/

    display:none;  /*none,不显示;inline-block,显示为块,不自动换行,宽高可设;block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设。*/

    第二课  学做gif图(运用Ps技术)

    1》首先,将需要做gif动画的图片利用Ps中的切片工具分割成想要的图片;

    2》然后,存储为web格式3》重新打开Ps页面,新近画布/背景,插入分割好的图片(或者直接拖动到Ps中),每插入一张图片,就相当于新加入一张图层;

    3》图片插入好后,创建时间轴,排版每张图片出现的先后顺序和时间秒数,点击播放即可。(还可以设置成过渡图片,下面会有过渡按钮,单击后出现添加帧的对话框)

  • 相关阅读:
    Android中使用File文件进行数据存储
    Android 获取 json
    Android服务之Service
    php
    宝塔数据库连接不上
    idea中使用github
    elasticjob 当当的分布式定时任务管理
    定时任务规则生成器
    MySQL中group_concat()函数的排序方法
    mysql 中关于怎么写 row_number()over(order by) 类似的功能支持
  • 原文地址:https://www.cnblogs.com/xiaoqingshe/p/4106834.html
Copyright © 2011-2022 走看看