2019.10.11CSS
CSS(层叠样式表)
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
外部样式表:<link rel="stylesheet" type="text/css" href="">
内部样式表:<style type="text/css"></style>
内联样式表:<p style="color: red">内联样式表</p>
通用属性:id,name,class,title,lang,dir
注意:
1.name和id的属性值必须是英文字母开头,其余部分可以包含数字、下划线、点等符号;
2.width和height的属性值在style中必须注明单位px,在其他地方可以不加单位;
css语法:
①一个元素中多个属性用分号隔开,多个元素之间用逗号隔开;
②元素中属性的值一般不加引号,但是当值是若干个单词,就要给值加引号;
③注释:/*```*/ (快捷键是ctr+?);
④优先级:内联样式>内部样式>外部样式;但是!important是强制优先的作用;
选择器:
【CSS中常用选择器】
① 标签选择器
写法: HTML标签名{}
作用:选中页面中所有与选择器同名的HTML标签。
li{
/*color: red;*/
}
②类选择器(class选择器)
* 写法: .class名{}
* 调用: 在需要应用这套样式的标签上,使用class="class名"调用选择器。
* 优先级: class选择器>标签选择器
*/
.ji{
/*color: blue;*/
}
③ID选择器:
* 写法: #ID名{}
* 调用: 在需要应用这套样式的标签上,使用id="ID名"调用选择器。
* 优先级: ID选择器>class选择器
*/
#two{
/*color: yellow;*/
}
/* 【class选择器和ID选择的区别】
* 1. 写法不同:class选择器用.声明,ID选择器用#声明;
* 2. 优先级不同:ID选择器>class选择器
* 3. 调用次数不同: class选择器可以调用多次; ID选择器只能调用一次(同一页面,不能出现同名ID)。
*/
④通用选择器
* 写法: *{}
* 作用: 作用于页面中所有的HTML标签;
* 优先级: 最低!低于标签选择器。
*/
*{
/*background-color: yellow;*/
/*color: pink;*/
}
⑤并集选择器
* 写法: 选择器1,选择器2,……选择器n{} 多个选择器之间逗号分隔。
* 生效规则: 多个选择器取并集,只要标签满足其中任何一个选择器,样式即可生效
*
* (其实相当于多个选择器拆开写)
*/
li,.ji{
/*color: red;*/
}
【特殊选择器:伪类选择器】
1、 写法: 伪类选择器,在选择器的后面,用:分隔,并紧接伪类状态;
eg: a:hover{}
2、超链接的伪类状态:
:link - 未访问状态 :visited - 已访问状态
:hover - 鼠标指上状态 :active - 激活选定状态(鼠标点下未松开)
注意: 当超链接多种伪类状态共存时,必须按照link-visited-hover-active 的顺序排列,否则会导致某些状态不能生效。
3、 input的常用伪类状态:
:hover :focus - 获得焦点的状态 :active
注意: 当input多种状态共存时,必须按照上述顺序