教材.docx
- 文档编号:3277410
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:5
- 大小:17.22KB
教材.docx
《教材.docx》由会员分享,可在线阅读,更多相关《教材.docx(5页珍藏版)》请在冰豆网上搜索。
教材
一、站点的建立
a)选择基本选项卡,为站点起个名字(不可为中文)
b)选择不使用服务器技术
c)选择本地编辑,然后指定到本地文件夹
d)不连接远程服务器
Index.html(首页)
预览效果快捷键F12
CTRL+U调出首选项面板
CTRL+J可调整编码
CTRL+F查找替换
静态网页后缀名称为.HTML或者.HTM
中文常用网页编码:
gb2312和UTF-8
空格的插入方法:
1、中文全角状态下的空格;
2、 (代表一个英文字符大小;shift+7)
--****-->注释标签,注释内容要写在星号部分,此部分内容不在预览显示,只在代码视图显示。
表格里面,每一列的宽度取决于这一列中最宽的单元格;每一行的高度取决于这一行中最高的单元格。
bgcolor="#000"表格中定义背景颜色为黑色
姓名:
加粗
style=""样式是。
。
。
。
一个HTML标签里面最多只能出现一次,如果需要不同的样式,应该采用style="margin:
0;padding:
0;"这种方式定义,2种样式之间使用空格割开;必须以分号结束。
Margin:
外边距,写法:
margin:
参数1参数2参数3参数4;,各参数使用空格隔开,参数为像素,例如10PX;分别为距上、右、下、左多少像素,如果参数值为auto为自动,如果参数1和参数3相同,参数2和参数4相同,可写作
margin:
参数1参数2;参数1代表距上下多少,2代表左右多少,如果4个参数都一样,则可以写作margin:
参数;意思是距4个方向均为多少像素。
padding:
0;内边距为0;用法和margin一样
Css层叠样式表(外链样式表)命名规则:
*.css
Css样式表关联的方法:
在页面任意地方右击,选择CSS样式附加样式表
font-size:
12px;字号12像素
font-family:
'宋体';字体宋体
color:
#F00;字体颜色红色
font-weight:
bold;加粗
line-height:
20px;行高20px;
text-indent:
30px;首行缩进30px;只对段落生效
background-image:
url(图片地址);
背景图片
background-repeat:
repeat-y;背景沿着Y轴平铺;repeat-X沿着X轴平铺;no-repeat不平铺;
1、css遵循就近原则
2、ID的优先权大于类的
3、对于一个开始标签里面。
只能写入一次CLASS=””和一次ID=“”,如果需要引用多个规则,应采用:
class=”类1类2类3”类名称之间使用空格割开。
4、Style的优先权大于class的
5、Style的优先权大于id的
ID选择器:
定义方式:
#id名称{css样式}
引用方法:
id=”id名称”
一个开始标签只能引用一个ID;
类(class)选择器
定义方式:
.类名称{css样式}
引用方法:
class=”类名称”
类名称只可以依英文字母开头,里面可以包含数字和-_两种下划线,其余特殊符合不可使用
Id和类的区别:
ID只可以引用一次,类可以无限次引用,另外ID的优先权大于类的
a:
link{*}/*未访问的链接样式*/
a:
visited{*}/*已访问的链接样式*/
a:
hover{*}/*鼠标移动到链接上的样式*/
a:
active{*}/*选定的链接样式*/
a.a1:
link{}
a.a1:
visited{}
a.a1:
hover{}
定义类A1的连接样式,引用方法是在A标签内写CLASS=”A1”;
border:
粗细颜色线形;
定义边框的样式,参数有三个,不分先后。
.biank{border-top:
1pxdashed#000;border-bottom:
1pxsolid#000;
}定义类biank{上边框:
1个像素虚线黑色;下边框:
1个像素实线黑色}
Align单元格的水平对齐方式LEFT左对齐;right右对齐center居中对齐;
Valign单元格垂直的对齐方式top顶端对齐bottom底部对齐middle居中对齐
body{*}针对全文出现的body标签采用*样式;
table,tr,td,img{margin:
0;padding:
0;}
针对全文出现的所有table、tr、td、img标签采用样式外边距为0;内边距为0;样式名称之间使用逗号割开,代表样式采用的规则一样。
background-position:
50px100px;
背景平铺定位方式,左右50px上下100px
双标签指一个容器
letter-spacing:
5px;字符间间距为5PX;
CSS+DIV部分
对于div+ul+li组成的我们称之为无序列表
对于div+ol+li组成的我们称之为有序列表
对于UL、OL、LI不建议单独使用,要配合DIV使用
复习:
1、table2、CSS+DIV
排版顺序
1、建立站点(images存放图片;css存放CSS文件)
2、附加CSS样式表
3、在CSS文件中定义公用样式
a)内外边距为0;(table、tr、td/div、ul、ol、li)
b)图片的边框和对齐顶端(div)
c)Li样式清空(css+div排版)
d)Body的左右居中、公用的字体样式、在div里面会定义一个行高
e)公用连接样式
f)浮动和清除浮动(div)
网页排版中常用的CSS样式
A)网页基本属性{宽、高、内外边距}
B)文字(字体、字号、颜色、加粗、行高、首行缩进、字符间间距)
C)图片(边框、顶端对齐)
D)背景(背景颜色、背景图片、平铺方式、背景定位)
E)边框(颜色线形粗细)
F)链接(本身样式、访问过的样式、鼠标经过的样式、点击下去的样式;)
a.名称:
link,a.名称:
visited,a.名称:
hover{}
.navulli{}
边框的时候注意调整框架宽度;
内边距的时候注意调整框架的宽度和高度
在A标签内,首行缩进是不生效的,我们要用内边距替代;
在清除浮动的时候,注意调整框架的高度、行高、字号;
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 教材
![提示](https://static.bdocx.com/images/bang_tan.gif)