Web标准 _样式_甘肃龙网

用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就会获得输入焦点。
用户名：
控件（文本域）

【Web标准】 下拉表单：
下拉选择框，表示默认显示;
籍贯
表单域：
查文档：
W3C :非官方
MDN :国外网站
CSS（层叠样式表）
1、行内样式表
好好学习，天天向上
2、内部样式表
好好学习，天天向上
3、外部样式表
CSS文件里不用写
CSS基础选择器：
1、标签选择器：可以把某类标签全部选择。div,h4,a
2、类选择器：上面点声明，下面class调用。最大的优势是可以为一个或多个元素对象定义相同的样式。使用最多。
KHB
4.、通配选择器： * 代表所有标签。
CSS复合选择器
1、后代选择器：P是div的后代
KHB
2、子代选择器：
选中 li 的子代，一级菜单
子代ul li > a {color: red;}

一级菜单二级菜单二级菜单二级菜单

3、交集选择器：div 标签下的类名为aa下的

交集div.aa {color: red;}交集选择器交集选择器交集选择器

交集选择器

4、并集选择器：用逗号隔开，适合于相同样式集体声明。

并集div, .aa, span {color: red;}并集选择器并集选择器

并集选择器并集选择器并集选择器

5、伪类选择器：下面顺序不能换位置。
a:link未访问过的链接
a: 已访问过的链接
a:hover 鼠标经过链接的样子
a: 鼠标按下的样子
CSS字体样式：
font-size ：16px;字体大小
font- : "微软雅黑"，Arial ;中文和字体名中包含空格或特殊字符则需要加引号。根据本地浏览器已有字体依次选择，都未找到，使用默认字体。建议使用字体。
font- : bold / 700; 字体加粗。
/ 400 ; 正常字体。建议用数字。
font-style :/字体风格斜体/正常
字体连写 font : stylesize/line- ;
font : { 40020px"微软雅黑" }必须按顺序，必须保留font-size和font- 。
CSS文本外观属性：
color : red / # /rgb(255,0, 0)文本颜色
line- : 24px;行高
text-align: left // right文字水平对齐方式
text- : 2em；中文段落首行缩进, 1em就是一个字的距离
text- : none // line- 装饰线无 / 下划线 / 贯穿线
line- :设置行高=自身高度值
开发者工具（）
排错---F12
背景颜色：
-color: #000;
背景图片：
-image: url(..//11.jpg);
-: no-;不平铺，只显示一张图
-: ; 平铺，在一定尺寸内复制图片（默认）
-: -x;横向平铺
-: -y; 纵向平铺
背景位置：
-: right top;右上角
-: ; 居中
-: 50-50; 只显示在盒子里边，超出盒子不显示；
-image: url(..//11.jpg);
背景复合属性：属性不分前后顺序
:pink url(..//11.jpg) no- ;
img标签和背景图片的区别：
img 标签是一个标签，不设置宽高默认会以原尺寸显示，用来实现比较重要的图片
背景图片需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
元素（标签）显示模式：
块级元素：
独占一行；宽度默认是父元素的宽度，高度默认由内容撑开；可以设置宽高。
行内元素：
一行可以显示多个；宽度和高度默认由内容撑开；不可以设置宽高。
行内块元素：
一行可以显示多个；可以设置宽高。
元素模式转换：
: block; 转换成块元素
: -block; 转换成行内块元素
: ; 转换成行内元素
CSS特性：
1、继承性：子元素有默认继承父元素的特点。
文字控制属性都可以继承。color、font-style、font-、text-、line-.........（不是控制文字的都不能继承）。注意：a标签的color会继承失效；h系列标签的font-size会继承失效。
2、层叠性：
（1）给同一个标签设置不同的样式--样式会层叠叠加--会共同作用在标签上
（2）给同一个标签设置相同的样式--样式会层叠覆盖--写在最后的样式会生效
注意--当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

Documenta {display: inline-block;转换为行内块width: 50px;height: 50px;background-color: red;背景颜色color: #fff;文字颜色text-decoration: none;text-align: center;文字水平居中line-height: 50px;文字垂直居中}a:hover {background-color: yellow;鼠标放置转黄色}导航1导航2导航3导航4

CSS布局
优先级：
不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式