什么是css 层叠样式表(Cascading Style Sheets)
干嘛用的 让网页的具体内容和样式分离
怎么写 3种方式
-
行内 直接在标签style属性中写。
<div style="font-size: 30px; color: blue">11111</div> -
页内 在本网页style标签中写
<head> <meta charset="UTF-8"> <style> body{ background-color: black; } div{ font-size: 30px; color: orange; } p{ background-color: yellow; } </style> <title></title> </head> -
外部样式 在单独的css文件中写 在网页中使用link标签引用
<link rel="stylesheet" href="css/index.css">
那么问题来了 当有多种写法用于同一个标签上时，怎么办？
css作用规律
- 就近 谁距离标签近，优先使用谁的样式
- 叠加 近的样式表没有设置的属性，可以叠加较远的样式表设置的属性
css选择器
用来找到标签的
类选择器
/*类选择器*/
.high{
color: yellow;
}
<div class="high">11111</div>
id选择器
/*id选择器*/
#idselector{
color: yellow;
}
<div id="idselector">selector</div>
并列选择器
h2, p {color:gray;}
属性选择器
a[href][title] {color:red;}
后代选择器
div p.test {
color: purple;
}
伪类选择器
a:hover{color: #FF00FF} /* 鼠标移动到链接上 */
CSS 水平对齐
-
使用 margin 属性来水平对齐
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } -
使用 position 属性进行左和右对齐
.right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; } -
使用 float 属性来进行左和右对齐
.right { float:right; width:300px; background-color:#b0e0e6; } 行内和行内块级在父标签中设置text-align: center;
垂直对齐
子控件的line-height设置和父控件高度一样即可
