CSS基础
1.注释
/*注释内容*/
2. 应用方式
-
内联样式 处于标签内部,放在style属性中
<img src="..." style="height:100px" /> <div style="color:red;">中国联通</div>
-
内部样式 在head标签中写style标签
<style type="text/css"> p{ align:center; color:red; font-size:30px; font-family:黑体; } </style>
-
外部样式
处于文件外部,外部文件的引用一般放在head部分的link标签中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="common.css" /> </head> <body> <h1 class='c1'>用户登录</h1> <h1 class='c2'>用户登录</h1> <h1 class='c2'>用户登录</h1> <h1 class='c1'>用户登录</h1> </body> </html>
3. 选择器
-
类选择器
.c1{ } <div clss='c1'></div>
-
ID选择器
#c1{ xxx } <div id='c1'></div>
-
标签选择器
div{ } <div>xxx</div>
-
属性选择器
input[type='text']{ border: 1px solid red; } .v1[xx="456"]{ color: gold; }
-
选择器组
div,.a,#b{ font-family:"黑体"; font-size:16px; }
选择器声明为以逗号隔开的选择器列表,将一些相同规则作用于多个元素
-
派生选择器
-
后代元素选择器: 选择某元素所有后代(子孙)元素
语法:父选择器 后代选择器
#div p{ font-family:"黑体"; font-size:16px; } /* 以上样式起作用于页面中的id="div "中嵌套的所有p元素 */
-
子元素选择器:选择某元素的所有子元素
语法:父选择器>子选择器
#div>p{ font-family:"黑体"; font-size:16px; } /* 以上样式起作用于页面中的id="div "中仅嵌套第一层的所有p元素 */
-
-
伪类选择器
以冒号区分对象及其状态,用于设置某元素在不同状态下的样式
/*
常用伪类:
link:向未被访问的超链接添加样式
visited:向已被访问的超链接添加样式
hover:当鼠标悬停至元素上方时,向该元素添加样式
active:向被激活的元素添加样式
focus:当元素获取焦点时,向该元素添加样式
*/
/*未被访问的*/
a:link{
color:blue;
}
/*鼠标悬停上方的状态*/
a:hover{
color:green;
}
/*已访问*/
a:visited{color:red;
}
/*选择激活的原则,正被点中的元素*/
#bnt:active{
background-color:blue;
}
/*获取焦点*/
#txt:focus{
background-color:red;
}
4. 块级和行内标签
示例:块级和行内标签的设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div style="display: inline;">中国</div>
<span style="display: block;">联通</span>
</body>
</html>
- 行内标签:如
|
- 行内标签的高度、内外边距,默认无效。
5. 字体设置
-
颜色
-
大小
-
加粗
-
字体格式
-
文字对齐方式
- 文本居中,文本会在这个区域中居中。
text-align: center; /* 水平方向居中 */ line-height: 59px; /* 垂直方向居中 */
-
区域居中,自己要有宽度 + margin-left:auto;margin-right:auto
.container{ width: 980px; margin: 0 auto; }
6.浮动
让元素脱离流定位,将其放置在父元素的左边或者右边
float:left | right
div默认块级标签(霸道),如果浮动起来,就不一样了。
如果你让标签浮动起来之后,就会脱离文档流。
说明:clear属性可以消除浮动所带来的影响,有4种取值:
- none:默认值,即不消除影响
- left:元素的左边不允许出现浮动元素
- right:元素的右边不允许出现浮动元素
- both:元素的两边均不允许出现浮动元素
如果存在浮动,一定记得加入 :
<div class="clear:both"></div>
7.内边距
自己内部设置的距离。
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding: 20px;
}
</style>
<style>
.outer{
border: 1px solid red;
height: 200px;
width: 200px;
padding: 20px 10px 5px 20px;
}
</style>
8. 外边距
我与别人加点距离。
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>
9. 伪类
<style>
.c1 {
color: red;
font-size: 18px;
}
.c1:hover {
color: green;
font-size: 50px;
}
.c1:after{
content: "大帅哥"; /*会在其尾部自动加上一些东西*/
}
</style>
10. position
- fixed
- relative
- absolute
11. 注
-
body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除:
body{ margin: 0; }