CSS是层叠样式表的缩写,它可以对页面进行精细的设置,精确到像素级别,是描述元素的皮肤。
一.设置方法
设置CSS有三种方法
(1) 元素内联,就是在元素属性里定义CSS。
在元素标签内部用style="background-color:Red"来设置
(2) 页面嵌入
在<head>中加入<style type="text/css">
input{background-color:green;border-bottom-color:white}
</style>
(3) 外部引用
新建样式表,在样式表中写CSS,然后通过在页面中<head>里加上
<link type="text/css"rel="Stylesheet" href="CSS1.css"/>
(4) 常见样式
① background-color: 背景颜色
② color:文本颜色
③ border-style:solid:边框风格,实线,dotted(点)
④ border-color:边框颜色
⑤ border-width:宽度
⑥ display:元素是否显示,可选值:none(不显示),block(块级元素,此元素前后会带有换行符),inline(内联元素,元素前后没有换行符)
⑦ cursor,鼠标在元素上显示的光标图案,cursor(默认光标),pointer(超链接的手),text(输入光标),wait(沙漏),help(问号),cursor:url(光标路径),页面加载时将光标变成特定图案
⑧ li不显示原点:LIST-STYLE-TYPE:none
(5) 样式选择器
(a) 标签选择器:在标签内部定义CSS
(b) class选择器:命名一个class,如 .warning{background:yellow;}
然后在用到这个样式的地方加上class=“warning”,当两个以上的class时,中间用空格隔开
(c) 标签+class选择器:可以针对不同标签,实现同样的格式名对于不同的标签有不同的样式,只要在样式名前加标签名就行
input.name{text-align:right;color:red;}
label.name{font-style:italic;}
<input class="name" type="text"value="efce"/>
<label class="name">decfrwsv</label>
(d) id选择器
#name
{
font-size:xx-large;
}
然后在需要用到的地方填上id="name"就行
(e) 其他选择器
1) 关联选择器
P strong{color:red}
表示P标签内的name标签内的内容使用的样式
<strong>srgfrg</strong>
<p><strong>fwesf</strong></p>
2) 组合选择器
H1,H2,Input{}
表示H1,H2都采用这种样式
3) 伪选择器
类似