2020-8-18 JavaWebDay_05

今天做了个小案例,差不多是这样

未写完的两个标签:

<select>:下拉列表;

子元素:<option>

<textarea>:文本域;

cols:默认列数;

rows:默认行数;

CSS:

页面美化和布局控制;

概念:

Coscoding Style Sheets(层叠样式表);

层叠:多个样式可以做用在同一个html元素上,同时生效;

好处:

1.功能强大;

2.将内容展示和样式控制分离;

降低耦合度,解耦;

让分工协作更容易;

提高开发效率;

使用:

1.内联样式:

在标签内使用style标签指定CSS代码.不建议使用;

2.内部样式:

在head标签内定义style标签,较常用；

3.外部样式：

定义CSS类源文件,在head标签内,使用link引入外部资源文件,较常用;

另一种写法:

<style>

@import"url";

</style>

语法:

格式:

选择器{属性名:属性值;........}

选择器:

筛选具有相似特性的元素;

分类:

1.基本选择器:

id选择器:

#id属性值{}

元素选择器:

元素{}

类选择器:

.class{}

优先级id>类>元素;

2.扩展选择器:

选择所有元素:

*{}

并集选择器:

元素1,元素2{}

子选择器{}:

父 子{}

父选择器:

父>子{}

属性选择器:

元素名称[属性名=属性值]{}

伪类选择器:

元素:状态{}

link:初始化;

hover:鼠标悬停;

active:正在访问;

visited:访问结束;

属性:

字体文本:

font-size:字体大小;

color:文本颜色;

text-align；对齐方式;

line-height:行高;

背景:

background:

color(背景色)

url(图片)

边框:

border;

例:border:1px solid red;一像素的实体红色边框;

尺寸:

width:宽度;

height:高度;

边距:

margin:外边距;

padding:内边距;

float:浮动;