今日内容:
? 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.元素的空间高度:上边的外边距+元素的高度+下边的外边距