一、字体设置
字体样式的设置,属性有:
font-family 设置字体类型 隶书font-size 设置字体大小 12px
font-style 设置字体风格 italic
font-wieght 设置字体的粗细 bold
还可以将4中属性一起写入一个font中,不过要按照:
字体风格---->字体粗细---->字体大小---->字体类型
font-family: fantasy; font-size: 24px; font-style: italic; font-weight: bold;
/*全部写在一起的方法,要按顺序来写*/
font: normal 400 24px cursive;
设置字体类型,可以设置楷书,隶书等等;
设置字体大小,设置数字后面要加px;
文本属性,文本的属性有
color 设置文本颜色
text-align 设置元素水平对齐方式
text-indent 设置首行文本的缩进
line-height 设置文本的行高
text-decoration 设置文本的装饰
color: #77F908;
text-indent: 2em;
line-height: 48px;
text-align: right;
text-decoration: underline;
二、颜色
RGB:颜色属性,16进制方法表示颜色,前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量
rgb(r、g、b):正数的取值为0到255。
RGBA:在RGB的基础上,增加了控制透明度的参数,其中这个透明通道值为0到1。
注:
对于我们想要的颜色,可以在ps软件中先找到,然后复制其下面的参数值。
三、排版布局
3.1 水平对齐(text-align)方式属性:
left 把文本排列到左边,默认值由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
text-align: right;
3.2 排版文本段落:
首行缩进
text-indent :em或px
text-indent: 2em;
3.3 行高
line-height :px
line-height: 48px;
3.4 文本装饰:
text-decoration
text-decoration: underline;
underline 设置文本的下划线
overline 设置文本上划线
lint-through 设置文本的删除线
none 默认值,定义标准文本
3.5 div的应用
<!--制作一个div的模块--> <div style="width: 500px;height: 500px; /*背景颜色*/ background-color:bisque ; /*背景图片*/ background-image:url('../Demo/网页背景/buy.png'); /*图片不平铺,只显示一次*/ background-repeat:no-repeat; /*向XY两轴的偏移量*/ background-position-x:80px; background-position-y:80px "></div>
3.6 图片文本垂直对齐方式:
vertical-align
垂直对齐方式 vertical-align: bottom; 向上对齐 vertical-align:top; 向下对齐 vertical-align: middle;
middle(中央)top(顶部)bottom(底部)
文本阴影:
text-shadow
/*文本阴影*/
text-shadow: red 5px 4px 1px;
text-shadow : color x-offest y-offest biur-radius;
定义阴影的颜色---->x轴位移,用来定义水平位移量---->y轴位移,用来令阴影垂直位移量---->阴影模糊半径,代表阴影向外模糊的模糊范围。
这里还存在浏览器兼容性的问题。在我们不确定浏览器是否兼容的时候,可以上网查。caniuse.com
3.7 熟悉超链接属性的使用
使用cs设置超链接,伪类的名称,一共有四个:
a : link 单击访问时超链接样式
a : visited 单击访问后超链接样式
a : hover 鼠标悬浮其上的超链接样式
a : active 鼠标单击未释放的超链接样式
/*移上去未释放的效果*/ a:hover{ color: red; } /*单击未跳转时的效果*/ a:active{ color: blue }
最重要的就是鼠标悬浮其上的超链接样式,我们经常使用,所以得记住它的英文单词。
格式:
标签名:伪类名{声明;}
设置伪类的顺序,从上到下;
<!--在这里用风格来写鼠标的形状状态style="cursor: default"--> <a style="cursor: help" href="https://www.baidu.com"target="_self">百度</a>
3.8 背景属性的使用
常见的背景样式有背景图像和背景颜色
首先来设置背景颜色样式
background-color
/*背景颜色*/
background-color:bisque ;
背景图像:
background-image:url(图片路径):
/*背景图片*/
background-image:url('../Demo/网页背景/buy.png');
背景重复方式:
background-repeat属性:
/*图片不平铺,只显示一次*/
background-repeat:no-repeat;
repeat 沿水平和垂直两个方向平铺
no-repeat 不平铺,即只显示一次
repeat-x 只沿水平方向平铺
repeat-y 只沿垂直方向平步
背景定位:
background-position属性:
/*向XY两轴的偏移量*/ background-position-x:80px; background-position-y:80px
Xpos(代表水平位置),Ypos(代表垂直位置),单位px
X% Y% 使用百分比表示背景的位置
XY方向关键词:水平方向关键词:left right center
垂直方向关键词:top bottom center
背景属性简写:background:背景颜色,背景图像,背景定位,背景不重复显示
背景图片大小控制:
background-size
auto 默认值,使用背景图片保持原样
percentage 当时用百分比时,不是对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例,将背景图片缩放到宽度或高度,正好适应所定义背景的区域
线性渐变: 颜色沿着一条直线过渡,从左到右,从右到左,从上到下等
linear-gradient(position(渐变方向),color1,color2.....)
#线性渐变,从左到右设置,渐变方向,第一种颜色值,第二种颜色,质地,三种颜色时等等。#
径向渐变: 圆形或椭圆形渐变颜色,不再沿着一条直线变化,而是从一个起点朝着所有方向混合
注:此处也有浏览器兼容性问题
Ie浏览器是Trident内核加前缀-ms-
Chrome 浏览器是Webkit内核加前缀-webkit-
Safari浏览器是Webkit内核加前缀-webkit-
Opera浏览器是Blink内核加前缀-o-
Firefox浏览器是内核加前缀-moz-
兼容webkit内核的浏览器:
-webkit-liner-gradient(position,color1,color2.....)
四、列表
列表就是信息资源的一种展示形式,
以列表的样式显示,可以使信息结构化和条理化,便于浏览者能更快捷的获取相应的信息。
列表的分类:
1.无序列表<ul> <li><li> <ul>
2.有序列表<ol> <li><li> <ol>
定义列表<dl> <dt>标题<dt> <dd>1<dd><dd>2<dd> <dl>
<!--无序列表--> <!--这里可以取消前面的小黑点,设置成其他的东西--> <ul style="background-color: blue;width: 200px;list-style-type: square"> <li>泰戈尔诗集</li> <li>冰心诗集</li> <li>莎士比亚</li> </ul> <!--有序列表--> <ol style="background-color: aqua"> <li>泰戈尔诗集</li> <li>冰心诗集</li> <li>莎士比亚</li> </ol> <!--自定义列表--> <dl style="background-color: #77F908"> <dt>文人</dt> <dd>泰戈尔诗集</dd> <dd>冰心诗集</dd> <dd>莎士比亚</dd> </dl>
无序列表的特性:
1没有顺序,每个ul标签独占一行
2标签像前面有个实心小圆点
3一般用于无序类型的列表,如导航侧边,新闻栏有规律的图文组合模块的
定义列表的特性:
1没有顺序,每个第一批标签的dl标签独占一行(块元素)
2默认没有标记
3一般用于一个标题下有一个或多个列表项的情况。
列表样式:列表样式,可以设置列表前面的字符的形状
lidt-style-type
list-style-type: square
none 无标记字符号
disc 实心圆,默认类型
circle 空心圆
square 实心正方形
decimal 数字
例如:li { list-style : none }
为什么使用表格 : 简单通用结构稳定
基本结构: 行 列 单元格
表格标签:<table><table>
行标签:<tr><tr>
单元格标签:<td><td>
<table border="1"> <tr> <td colspan="3">大数据学士后32班成绩列表</td> </tr> <tr> <td rowspan="2">李志豪</td> <td>语文</td> <td>90</td> </tr> <tr> <td>数学</td> <td>90</td> </tr> <tr> <td rowspan="2">李宁</td> <td>语文</td> <td>100</td> </tr> <tr> <td>数学</td> <td>59</td> </tr> </table>
跨列:colspan
跨行: rowspan
五、表单在网页中的应用
表单语法:规定如何发送表单数据常用值method(post/get);表示向何处发送表单数据action
<form method="post"action="menu.html"> <p> 姓名: <input name="lname"type="text"> </p> <p> 密码: <input name="pass"type="password"> </p> <p> <input type="submit"value="确定"/> <input type="reset"value="重置"/> </p> </form>
<!--单选框--> <!--关键是type的不同--> <!--假如给的名字相同,那么就是三选一--> <input type="radio"name="sprots"vaule="足球"/>足球 <input type="radio"name="sprots"vaule="篮球"checked/>篮球 <input type="radio"name="sprots"vaule="篮球"/>篮球 <br/> <!--假如给的名字不同就是,选一个确定一个,没得改变--> <input type="radio"name="sprots2"vaule="足球"/>足球 <input type="radio"name="sprot"vaule="篮球"/>篮球 <input type="radio"name="sprots1"vaule="篮球"/>篮球 <!--复选框--> <!--复选框选了可以取消--> <input type="checkbox"name="sprots"vaule="足球"/>足球 <input type="checkbox"name="sprots"vaule="篮球"checked/>篮球 <input type="checkbox"name="sprots"vaule="篮球"/>篮球
在实际网页开发中,通常采用post方式提交表单数据。
一般表格表单元素有:
input元素类型type (指定元素类型有:text,password,CheckBox,radio,submit,reset,file,hidden, image,和button,默认为text)
input元素名称name (指定表单元素的名称)
input元素的值value (type为radio时,必须指定一个值)
指定表单元素的初始宽度:size (type为text或password时元素大小为字符单位,其它的为像素px单位)
输入最大字符数:maxlength (type为text或password时)
确定按钮是否被选中:checked (type为radio或CheckBox时)
文本框: <input type="text"name="urseName"value="用户名"size="30"maxlength=“20"/>
密码框: <input type="password"name="pass"size=“20”/>
单选按钮:
<!--单选按钮--> <p> <input name="gen" type="radio"value="男"checked/>男 <input name="gen" type="radio"value="女"/>女 </p>
<!--复选框-->
<p> <!--复选框选了可以取消-->< input type= "checkbox" name= "sprots" vaule= "足球" />足球 < input type= "checkbox" name= "sprots" vaule= "篮球" checked />篮球 < input type= "checkbox" name= "sprots" vaule= "篮球" />篮球
</p>