第一课:样式属性

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

11-18网页基础--第二部分CSS样式属性(1)的更多相关文章

  1. 11-19网页基础--第二部分CSS样式表基本概念

    CSS,全称(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 一.基本概念:是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 你可能对C ...

  2. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  3. IE6支持兼容min-width、max-width CSS样式属性

    IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...

  4. HTML第二部分 CSS样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  5. 网站开发综合技术 第二部分 CSS样式表

    第2部分 CSS样式表 CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. /*注释*/    注释语法 2.1.样式表的基本概念 2.1.1.样式表分类 1 ...

  6. 前端基础问题:CSS vertical-align 属性

    CSS vertical-align 属性与基线的那些事~ 定义和用法: vertical-align 属性设置元素的垂直对齐方式. vertical-align只对内联元素(inline.inlin ...

  7. IE6支持min-width、max-width CSS样式属性

    1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...

  8. HTML布局相关的CSS样式属性

    # 转载请留言联系 注意,样式属性是写进CSS里面的. 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:2 ...

  9. CSS样式属性单词之Left

    通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...

随机推荐

  1. js中对象的类型

    js中的类型分为三种,"内部对象"."宿主对象"."自定义对象" 1."内部对象"有Date.Function.Arra ...

  2. UVA 10200 Prime Time 水

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...

  3. pandas读取Excel

    time31 = pd.read_excel('F:/save_file/3问出车表.xlsx', sheetname='Sheet1') # 读取‘3问出车表.xlsx’中的Sheet1表单, ti ...

  4. C# WPF DataGrid 隔行变色及内容居中对齐

    C# WPF DataGrid 隔行变色及内容居中对齐. dqzww NET学习0     先看效果: 前台XAML代码: <!--引入样式文件--> <Window.Resourc ...

  5. Announcing the Release of ASP.NET MVC 5.1, ASP.NET Web API 2.1 and ASP.NET Web Pages 3.1 for VS2012

    The NuGet packages for ASP.NET MVC 5.1, ASP.NET Web API 2.1 and ASP.NET Web Pages 3.1 are now live o ...

  6. leetcode 645. Set Mismatch——凡是要节约空间的题目 都在输入数据上下功夫 不要担心破坏原始的input

    The set S originally contains numbers from 1 to n. But unfortunately, due to the data error, one of ...

  7. ES6环境配置

    1.电脑有node环境,运行npm init 2.cnpm i -D babel-core babel-preset-es2015 babel-preset-latest 3.创建.babelrc文件 ...

  8. 使用Innobackupex快速搭建(修复)MySQL主从架构

    MySQL的主从搭建大家有很多种方式,传统的mysqldump方式是很多人的选择之一.但对于较大的数据库则该方式并非理想的选择.使用Xtrabackup可以快速轻松的构建或修复mysql主从架构.本文 ...

  9. LeetCode OJ:Minimum Depth of Binary Tree(二叉树的最小深度)

    Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shor ...

  10. 又是毕业季1&&又是毕业季2

    又是毕业季2 n/k; 又是毕业季2 一开始很容易想到枚举n个数取k个的所有组合,然后分别用辗转相除法求最大公约数,但是复杂度明显不符合要求,于是必须换一种思路. 我们想到,k个数的公约数含义就是这k ...