- Css样式
- Css样式的种类
- 选择器
- 文本相关样式
- 背景相关样式
- 边框
- 盒子模型
- 标准流static
- 浮动流float
- 定位流position
标签由三部分构成
1.标签名
2.标签的属性值
3.标签的文本内容
select标签
下拉列表标签,常用于单选或多选,是一个组合标签,需要和子标签option一起搭配使用,不会独占一行
常用属性:
- name属性:发送给服务器使用的
- multiple属性:不写默认单选,取值为multiple表示多选,一般使用单选
- size属性:可见选项的数目
option标签
selected属性:表示勾选当前选项
value属性:用于发送给服务器的选项值
注意:
1.如果使用多选,那么选择的时候,需要按下ctrl键进行选择
2.size属性一般情况下不设置
3.selected属性如果不设置,默认显示的是列表中第一个选项
4.value属性,如果不设置,发送给服务器的值是option的文本值
,设置了value属性值,那么发送过去的就是value值,一般情况都需要设置
textarea标签
文本域,用于多行输入文本信息
- name属性:用于发送给服务器的名称
- cols属性:文本域列数 (文本域框的尺寸)
- rows属性:文本域的行数(文本域框的尺寸)
CSS样式
进行页面美化和布局控制
概念:cascading style sheet层叠样式表
层叠:多个样式作用在同一个html元素上,可以同时生效
好处:
- 功能比较强大
- 降低了程序耦合度,将内容展示和样式控制分离,分工协作更加方便,CSS样式可复用性高
<!--使用:-->
<style type ="text/css">
选择器{
属性1:属性值;
属性2:属性值;
属性3:属性值1 属性值2 属性值3...;
...
}
</style>
注意:
- 选择器严格区分大小写,属性和属性值不区分大小写,属性与属性之间使用分号隔开,最后一个属性可以省略不写。如果一个属性有多个属性值,多个属性值之间空格隔开,type属性可以省略不写。
- 如果一个标签有多个css样式控制,按照就近原则进行覆盖。
- css样式的种类,三种:行内样式 > 内联式 > 外联式。
选择器
当我们想要设置某些标签样式时,就必须让css代码找到对应的标签,通过选择器可以找到对应的标签
常用选择器
- 标签选择器,语法格式: **标签名称{ } **如:对div标签控制,---> div{ }
- id选择器,语法格式:#id名称{ } ,id一般不能重复,需要给标签添加一个id属性
- 类选择器,语法格式:.class{ },class可以重复,需要给标签添加class属性
- 并集选择器,语法格式:选择器1,选择器2,...{ }
- 属性选择器,语法格式:标签[属性="具体的属性值"]{ },如:input[ type="text"]--->对用户输入框进行设定 || input[ type="password"]--->对密码输入框进行设定
不太常用的选择器
后代选择器,语法格式:选择器1 选择器2{ }浏览器加载样式时,会首先找选择器1对应的标签存在与否,如果存在,继续寻找选择器2对应的标签。
子元素选择器,语法格式:选择器1 > 选择器2{ }浏览器会加载选择器1下的所有子元素符合选择器2的条件
交集选择器,语法格式:选择器1选择器2{ }要求标签同时具备选择器1和选择器2,css才会生效
相邻兄弟选择器,语法格式:选择器1+选择器2{ }
通用兄弟选择器,语法格式:选择器1~选择器2{ }
选中同级别的第一个标签,语法格式:标签:first-child{ }
选中同级别中同类型的第一个标签,语法格式:标签:first-of-type{ }
选中同级别第几个标签,语法格式:标签:nth-child(n){ }
选中同级别中同类型的第几个标签,语法格式:标签:nth-of-type(n){ }
文本系列样式
用于设置文本相关的一些样式
- font-style:设置文字样式,常用取值为斜体(italic)和普通(normal)
- font-weight:设置文字粗细,常用取值为lighter,light,bold,bolder,还可以使用数字进行表示 100-900
- font-size:设置字体大小,取值默认单位为px
- font-famliy:设置字体样式 如" 宋体"、'微软雅黑'
- font:可以连写,使用一个属性设置多个属性值,如:font:20px italic bold "宋体";
- text-decoration:文本装饰,常用取值为 none、underline、overline、line-through
- text-align:水平方向对齐方式,默认左对齐 常用取值 left right center
- text-indent:缩进方式,em为缩进单位,2em相当于往里缩进2个文字的宽度
- color:设置文字的颜色,英文单词 / rgb / #xxxxxx
背景系列样式
设置标签的背景相关样式
- background-color:设置标签背景颜色
- background-image:设置背景图像,它的属性值语法格式:url(相对路径);自动平铺
- background-repeat:设置平铺方式,repeat默认值、no-repeat不平铺、repeat-x水平平铺、repeat-y垂直平铺
- background-position:设置背景图像定位方式,格式为:水平方向数值 垂直方向数值;水平方向:left、center、right;垂直方向:top、center、bottom,也可以是具体的像素值 如:100px 100px
- background-size:设置背景图像的尺寸大小,尺寸大小可以使用百分比,也可以使用具体的像素值
- background-attachment:设置背景关联方式,scroll(会随着滚动条的滚动而滚动)和fixed(不会随着滚动条的滚动而滚动)
- background:可以连写,如 background:
边框系列样式
border属性,也可以连写 格式:宽度、样式、颜色、边框倒角radius:边框四角的弧度
盒子模型
padding:内容到边框的距离叫做内边距,内边距属性按照上右下左进行设置,也可以分开设置,改变内边距的宽高会影响元素的大小
margin:元素边框与元素边框之间的间距就是外边距,设置的顺序也是上右下左,如果我们设置margin的值为:0 auto 就代表距离上方边框为0像素远,距离左右两边为水平居中
盒子模型的构成(border-box):
元素的宽度:左边框 + 左内边距 + 内容宽度 + 右内边距 + 右边框
元素的高度:上边框 + 上内边距 + 内容高度 + 下内边距 + 下边框
元素空间的宽度:左边的外边距 + 元素的宽度 + 右边的外边距
元素空间的高度:上边的外边距 + 元素的高度 +下边的外边距
*{
box-sizing:content-box; //设置上边距时,会扩大盒子高度
box-sizing:border-box //设置上边距时,不会扩大盒子高度
}
如果我们采用的是内容盒子content-box,那么设置内边距后,内容宽高不会发生改变,但元素的自身宽高也会发生改变
但是如果我们设置盒子模型border-box,那么设置内边距后,元素自身宽高不会发生改变,但内容宽高会发生改变
如果相邻元素对彼此方向设置外边距,自动取较大值
标准流
- Html标签被分为两种类型,一种是块级标签(独占一行,能够设置宽高),另外一种是行级标签(不独占一行,一般不能设置宽高)
- 这两种类型的标签都是按照标准流的方式进行渲染加载的(排列),行级标签从左到右加载,块级标签从上到下加载
display:
常用取值:inline(行级元素)、block(块级元素)、inline-block(行内块元素)、none(隐藏,不占空间)
浮动流
设置标签属性float,能够让元素向左或者向右进行浮动(无上下浮动),如果元素按照浮动流渲染,那么该元素会脱离标准流,在浮动流中没有行级元素和块级元素之说。但是都可以设置宽和高
在标准流加载方式下,如果更改标准流为浮动流·,那么该元素后面的元素会相应的顶上来
如果按照浮动流进行加载,在浮动流加载的情况下,元素之间是紧邻排列的,中间没有空隙
clear
设置clear属性,能够使元素在浮动的过程中不区紧贴其它标签,它只能影响自己,不能影响其它元素
定位流
相对定位
不会脱离标准流。相对于在标准流的位置进行位置移动,所以下边的元素不会再顶上来
属性position设置值为 relative 结合top/left/right/bottom进行空间位置移动
绝对定位
会脱离标准流。下边元素会顶上来,相对于在标准流的位置上进行空间移动
属性position设置值为absolute 结合top/left/right/bottom进行空间位置移动
如果它的父元素或者是祖先元素都没有设置定位流(相对/绝对/固定定位),绝对定位相对于body定位。
如果它的父元素或者是祖先元素设置了定位流,绝对定位相对于父元素或祖先元素(就近原则)。
在绝对定位中,不区分块级元素和行级元素,但都可以设置宽高。
定位流中,一般采用父相(相对定位)子绝(绝对定位)的方式 ,子标签始终参照父标签进行相对定位移动
固定定位
固定定位也会脱离标准流,设置position为fixed,依然需要借助于四个方向属性top/left/right/bottom四个属性进行空间移动,依然不区分行级元素和块级元素。
和绝对定位一样,唯一的不同是它不会随着滚动条的滚动而发生移动
z-index
可以改变定位流中的前后加载顺序
定位流中有以下规律:
- 默认情况下定位流会覆盖标准流
- 默认情况下,后加载的会覆盖前面加载的
- 定位流中,设置z-index(数值)这个值谁的大,谁先加载
- 如果父元素设置z-index,子元素的z-index就会失效
- 谁的父元素大,谁就显示在上方(从父原则)
JavaScript概念的介绍
JavaScript是一门web上的编程语言,用于和用户进行交互,不需要进行编译,嵌套在html文件中由浏览器引擎加载执行,和Java没有大的联系。
JavaScript的组成
- 核心(ECMAScript)语法,包括基本的流程控制、运算符、数据类型、数组、对象、类、接口等
- 浏览器对象模型(BOM)browser object model,主要是操作当前浏览器窗口的内容,如页面的跳转和页面刷新等动作
- 文档对象模型(DOM)document object model,主要是操作html文件中具体的内容(页面元素内容),如页面中有一个div,动态的给div添加高和宽、背景图像、植入文本内容等
JavaScript代码的引入
-
内嵌式
在html文档中,将相关的js代码直接放在标签