今日内容:

? CSS样式

? CSS样式的种类

? 选择器

? 文本相关样式

? 背景相关样式

? 边框

? 盒子模式

select标签

下拉列表标签,常用于单选和多选,是一个组合标签,需要和子标签option一起搭配使用,不会独占一行

常用属性:

? name属性:发送给服务器使用的

? multiple属性:不写默认单选,取值为multipe表示多选,一般我们常用单选

? size属性:可见选择数目

option标签

? selected属性:表示勾选当前选项

? value属性:用于发送给服务器的选项值

注意:

1.如果使用多选,呢么选择的时候,需要按下ctrl键进行多选

2.size属性我们一般不设置

3.selected属性如果不设置,默认显示的是列表中的第一个选择

4.value属性如果不设置的话,发送给服务器的值是option的文本值,如果设置了value属性值,那么发送的就是value属性值,一般情况下我们都需要设置

textarea标签

文本域,用于多行输入文本信息

○ name:用于发送给服务器的名称

○ cols属性:用于指定文本域的列数

○ rows属性:用于指定文本域的行数

CSS样式:进行页面美化和布局及控制

? 概念:Cascading Style Sheet 层叠样式表

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

? 好处:

1.功能比较强大

2.将内容展示和样式控制进行分离,

§ 降低耦合度,解耦合

§ 分工协作更方便

§ 提高样式的可复用性

? 使用:

选择器{

属性1:属性值

属性2:属性值

属性3:属性值1 属性值2 属性值3 …;

…

…

}

注意:

1.选择器严格区分大小写,属性和属性值不区分大小写,属性与属性之间使用分号隔开,最后一个属性可以省略不写,如果一个属性有多个属性值

多个属性值之间用空格隔开,type属性可以省略不写

2.如果一个标签由多个css样式控制,按照就近原则进行覆盖

3.css样式的种类 有三种 行内样式>内联式>外联式

选择器:

当我们想要设置某些标签的样式时,就必须让css代码找到对应的标签,通过选择器可以找到对应的标签

常用的选择器

标签选择器,    语法格式:   标签名称{} 如对div标签控制,  -->div{}

id选择器,    语法格式:   #id名称{},注意:id一般不能重复,需要给标签添加一个id属性

类选择器,    语法格式:   .class名称{}class名称可以重复,需要给标签添加一个class属性

并集选择器,    语法格式:   选择器1,选择器2,选择器3,…{}

属性选择器,    语法格式:   标签[属性="具体的属性值"]{} 比如:input[type="text"]--->username输入框设定样式

input[type="password"--->控制passwoeld密码输入框设定样式]

不太常用的选择器

后代选择器    语法格式:   选择器1 选择器2{}    浏览器加载样式的时候会首先找选择器1对应的标签存在不存在,

如果存在那么找选择器1里面的嵌套选择器的选择器2对应的标签 (java多级继承)

子元素选择器    语法格式:   选择器1>选择器2{}   浏览器会加载选择器1下的所有子元素符合选择器2的条件

交集选择器    语法格式:   选择器1选择器2{}    要求标签同时具备选择器1和选择器2  里面的css样式才会起作用

相邻兄弟选择器    语法格式:   选择器1+选择器2{}

通用兄弟选择器    语法格式:   选择器1~选择器2{}

选中同级别的第一个标签    语法格式:   标签:first-child{}

选中同级别同类型第一个标签    语法格式:   标签:first-of-type{}

选中同级别中同类型的最后一个标签    语法格式:   标签:last-of-type{}

选中同级别第几个标签    语法格式:   标签nth-child(n){}

选中同级别中同类型的第几个标签    语法格式:   标签nth-of-type(n){}

文本系列样式

用于设置文本相关的一些样式

○ font-style:设置文字样式,常用取值为 斜体 italic 和 正常 normal

○ font-weight:设置文字的粗细,常用取值为light lighter,bold和boler.还可以使用数字表示 100-900

○ font-size:设置文字的大小取值默认单位为像素px,如font-size:30px

○ font-family:设置字体,如"宋体","楷体","微软雅黑"等

○ font:进行连写,如:设置字体为宋体,字体大小为20px,字体为斜体,字体加粗-->font:italic bolder 20px "宋体";

○ text-decoration:文本装饰属性,常用取值为underline下划线,overline上划线,删除线line-through,none什么都没有

○ text-align:水平方向的对齐方式,常用取值left center right

○ text-indent:缩进方式 em作为缩进单位 2em相当于往里面缩进两个文字的宽度

○ color:设置文字的颜色,英语单词,rgb(值1,值2,值3)#十六进制00~FF

背景系列样式:

设置标签的背景相关样式

○ background-color:设置标签的背景颜色

○ background-image:设置背景图像,他的属性值语法格式:url(相对路径)会自动平铺

○ background-repeat:设置平铺的方式有四个值,repeat默认值,no-repeat不平铺,repeat-x水平平铺,repeat-y垂直平铺

○ background-position:设置背景定位方式,格式:为水平方向数值,垂直定位数值

水平方向left center right 垂直方向

垂直方向有top center boottom,也可以是具体的像素值 100px 100px;

○ background-size:设置背景图像的尺寸大小,尺寸大小可以使用百分比,也可以使用具体的像素值

○ background-attachment:设置背景的关联方式,常用的有两个sroll(会随着滚动条的滚动而滚动) fixed(不会随着滚动条的滚动而滚动)

○ 连写 background:颜色 图片 平铺的方法 定位的方式…中间可以任意写

边框系列样式

border属性,连写--->格式:宽度 样式 颜色 倒角radius:设置边框四角的弧度

盒子模型(边框盒子border-box)

padding:内容到边框的距离,叫做内边距,内边距属性按照上右下左顺序进行设置,也可以分开设置

改变内边距的宽高会影响元素的大小

如果我们采用的内容盒子模型,content-box,那么设置内边距后元素自身的宽高也会发生改变

但是如果我们设置盒子模型为边框盒子 border-box,那么设置内边距后自身的宽高不会发生改变,但是内容的宽高会发生改变.

margin:元素边框与元素边框之间的间距就是外边距,设置的顺序也是上右下左,如果我们设置margin的值为:0 auto就代表距离上方的为0像素远,

距离左右两边为水平居中

如果相邻元素对同一方向设置外边距,则浏览器会取大值

盒子模型的构成

1.元素的宽度:左边的边框+左边的内边距+内容的宽度+右边内边距+右边边框--->width = padding +border+content

2.元素的高度:上边边框+上边内边距+内容的高度+下边内边距+下边边框--->height = padding+border+content

3.元素空间的宽度:左边的外边距+元素的宽度+右边的外边距

4.元素的空间高度:上边的外边距+元素的高度+下边的外边距