——样式表,css基本概念
(用于美化页面)
样式表:主要描述元素的字体颜色,背景颜色,边框等
Css(层叠式样式表):
1. 元素内嵌:
直接将样式写入元素的style属性中,如:
<inputtype="text"value="任意初值"readonly="readonly"style="background-color:Red"/>
适用于样式没有可复用性的场合
2. 页面嵌入:
在head标签中加入:
<styletype="text/css">
input {border-color:blue;color:red}
</style>
表示页面中所有input都是采用指定的样式,适用于样式复用,减小页面体积
3. 外部引用:
在head标签中引用写有css内容后缀为css的文件:
<linktype="text/css"rel="stylesheet"href="css1.css">
表示页面中都采用在css1中设置好的指定样式,适用于样式复用
——常见样式
1. Css中的计量单位:
Px:像素
%:百分比
em:相对单位
2. background-color:背景颜色
3. color:文本颜色
4. border-style:边框风格(默认为none)
5. border-color:边框颜色
6. border-width:边框宽度(默认0)
border类整合实例:
<div><style=border-color="Red"border-width="1px"border-style="dotted">你好</div>
7. Display:元素是否显示
可选值:
None:不显示
Block:显示为块级元素,此元素前后会带有换行符
Inline:显示为内联元素,元素前后没有换行符
8. Cursor:鼠标在元素上时显示的光标图标
可选值:
<listyle="cursor:可选值">你好</li>
Cuisor:默认光标
Pointer:超链接上的手
Text:输入bean
Wait:忙沙漏
Help:帮忙
9. LI:不显示圆点:list-style-type:none,一般设在li或ul上
——样式选择器
(在<styletype="text/css"></style>标签内)
(对于非元素内联的样式需要定义样式选择器,通俗的说就是这个样式适合于哪些元素)
1. 标签选择器:对于指定的标签采用统一的样式
2. Class选择器:自定义一个命名的样式,然后再爱用到它的时候设定元素的class属性为样式的名称,还可以同时设定多个class,名称之间加空格
规则:样式名称开头加”.“+自定义名+{自设置属性}
例如:.highlight {font-size:xx-large;color:blue}
引用:<liclass="highlight">你好</li>
3. 标签+class选择器:因为class选择器针对不同标签,所以同样的样式对于不同的标签有不同的样式,只要标签名后加样式名即可
规则:样式名称中有html中的标签名+”.”+{自设置属性}
例如:input.highlight {font-size:xx-large;color:blue}
引用:<inputclass="highlight"type="button"value="确定"></input>
4. Id选择器:为指定的元素设定样式
规则:在id前必须加#
例如:#username {font-size:xx-large;color:blue}
引用:<input id="username"class="highlight"value="你好"></input>
5. 伪选择器:为标签的不同状态设定不同的样式
规则:
A:visiter:超链接点击过的样式
例如:A:visited {text-decoration:none}
A:active:选中超链接时的样式
例如:A:active {text-decoration:none}
A:link:超链接未访问时的状态
例如:A:link {text-decoration:none}
A:hover:鼠标移到超链接的状态
例如:A:hover {text-decoration:underline}
6. *关联选择器:
规则: 标签名+空格+自定义名称+{自设置属性}
例如:phighlight {background-color:yellow}
引用:</p><highlight>你好</highlight></p>
7. *组合选择器:同时为多个标签设定一个样式
规则:标签名1+”,”+标签名2{自设定属性}
例如:h1,h2,input {font-size:xx-large;color:blue}
引用: <h1class="highlight">你好</h1>
<h2class="highlight">你好</h2>
<inputclass="highlight"value="你好"></input>
——样式优先级
最后设置的属性优先级最高
当style与class冲突时,style优先级最高