CSS样式

HTML标签

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的元素上，可以同时生效。
• 好处：
  1. 功能比较强大
  2. 将内容展示和样式控制进行分离
     • 降低耦合度，解耦
     • 分工协作更方便
     • 提高样式的可复用性
• 使用:

<style type="text/css">
    选择器 {
        属性1:属性值;
        属性2:属性值;
        属性3:属性值1 属性值2 属性值3...;
        ...
        ...
    }
</style>

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”] —>控制password密码输入框设定样式

不太常用的选择器

• 后代选择器 语法格式：选择器1 选择器2{} 浏览器加载样式的时候会首先找选择器1对应的标签在不在，如果存在会找选择器1里面的嵌套的的选择器2对应的标签。

• 子元素选择器 语法格式：选择器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和bolder。还可以使用数字表示 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 bottom,也可以是具体的像素值 100px 100px;\

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

• background-attachment：设置背景的关联方式，常用的有两个scroll（会随着滚动条的滚动而滚动），fixed(不会随着滚动条的滚动而滚动)

• 连写–>background：颜色 图片 平铺方式 定位方式… 中间可以任意写。

边框系列样式

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

盒子模型

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

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

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

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

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

如果相邻元素对同一方向设置外边距，则浏览器去大值。

盒子模型的构成;(边框盒子border-box)

1. 元素的宽度：左边边框+左边内边距 +内容宽度+右内边距+右边边框---->width = padding+border+content
2. 元素的高度：上边边框+上边内边距+内容的高度+下边内边距+下边边框 height = padding+border+content
3. 元素空间的宽度：左边的外边距+元素的宽度+右边的外边距
4. 元素空间的高度：上边的外边距+元素的高度+下边的外边距

练习：定义两个div，一个宽高为500px,一个宽高为200px，让小的在大的正中央。