css概述
- css嵌入方式
- 内联式（<p style="color:red">这里文字是红色</p>）
- 嵌入式（使用<style>...</style>嵌入到页面头部<head>中）
<head>
<style type=“text/css”>
input{border-color: Yellow;color: Red}
</style>
</head>
- 文件式（<link rel=“stylesheet” href="basic.css" type="text/css" />（<head>中））
<head>
<link type=“text/css” rel=“Stylesheet” href=“s1.css” />
</head>
- 导入式（<style type="text/css" media="all">@import url()basic.css;</style>（<head>中））
- CSS样式选择器
- 对于非元素内联的样式需要定义样式选择器(标签选择器 & class选择器 & 标签+class选择器 & id选择器)
- 标签选择器:对于指定的标签采用统一的样式
input{border-color: Yellow;}
- class选择器: 以定义样式类名的方式结合class属性为元素设定样式(样式名前加”.”(如 .warning(background-color: Red;))/元素可同时定义多个class(中间以空格隔开))
<head>
<style type=“text/css”>
.warning{border-color: Red;}
.change{color: Yellow;}
</style>
</head>
<body>
<input type=“text” class=“warning change” />
</body>
- 标签+class选择器: class选择器针对不同的标签可以实现样式名相同而样式不同
<head>
<style type=“text/css”>
label.warning{border-color: Red;}
input.warning{background-color: Yellow;}
</style>
</head>
<body>
<input type=“text” class=“warning”/>
<label class=“warning”/>
</body>
- Id选择器: 为指定id的元素设定样式(id前加#)
<head>
<style type=“text/css”>
#username{border-color: Red;}
</style>
</head>
<body>
<input type=“text” id=“username” />
</body>
- 其他选择器: 关联选择器(p strong{color: Red;} //p标签内的strong标签内的内容使用的样式)/组合选择器(h1,h2,input{color: Red;} //同时为多个标签设定一种样式)
- 伪选择器(只部分标签适用): 为标签的不同状态设定不同样式(如a:active选中超链接时 a:visited超链接点击过 a:link超链接未访问时 a:hover鼠标移到超链接时)
a:visit{TEXT-DECORATION: none}
a:link{TEXT-DECORATION: none}
a:hover{TEXT-DECORATION: none}
a:active{TEXT-DECORATION: underline}
