CSS入门
1.样式调用方式
(1)行内样式:
<any style="样式名:样式值;"></any>
常见样式:
对齐方式:text-align: center/left/right/justify;
字体大小:font-size:XXpx;
字体颜色:color:red;
背景颜色:background-color:pink;
首行缩进:text-indent:2em;
(2)页面内样式(在head中定义):
- P{}
<style>
p{
color:blue;
background: pink;
}
</style>
这时候<p>
中所有内容样式都按照在<style>
中定义的样式来,想要单独改变某一<p>
中的样式,单独在这个标签中添加style即可,因为行内优先级大于页面内。
- 类定义
<head>
<style>
.box{
color:lightblue;
}
</style>
</head>
<body>
<p class="box">
one
</p>
</body>
定义的格式:.自定义名称{}
调用时不加点,在页面中可以多次调用
- id定义
<head>
<style>
#box{
color:lightblue;
}
</style>
</head>
<body>
<p id="box">
</body>
整个页面中只能使用一次,多用于定义大框架
(3)链接式
链接页面外的样式,在CSS(File–New–Stylesheet)中定义:
.littlebox{
color:pink;
}
在HTML中链接:
<head>
<link rel="stylesheet" href="链接外部css文件路径" type="text/css"/>
</head>
<body>
<p class="littlebox">
one
</p>
</body>
(4)导入式
<head>
<style>
@import url(连接外部的css文件);
</style>
</head>
<body>
<p class="littlebox">
one
</p>
</body>
2.站点:包含css、img和html的工程叫做站点
创建站点的标准形式
3.DIV:<div></div>
在css中设置div的属性
.sky{
margin: 0 auto;/*外边距:居中;margin:a(上) b(右) c(下) d(左)*/
border: solid 1px red;/*边框线:实线 1像素 颜色*/
/*solid实线/dashed虚线/double双线/dotted点线*/
width: 800px;
height: 600px;
background: darkgray url(../img/1.jpg) no-repeat center top;
/*背景:颜色 图片(路径) 重复 水平位置 垂直位置*/
padding: 1px;/*内边距:padding:a(上) b(右) c(下) d(左)*/
}
在HTML中调用:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<div class="sky">
</div>
</body>
</html>
效果图:
4.定义图片属性:
p img{
float:left;/*左浮动*/
}
设置前:
设置后:
5.定义文本
p{
line-height: 25px;/*行间距*/
font-weight: bold;/*字体加粗*/
font-style: italic;/*斜体*/
font-style: normal;/*正常字体*/
text-decoration: none/underline/overline;/*去下划线/加下划线/加上边线*/
}
6.超链接的四种状态(伪对象)
- a:link 默认状态
- a:hover 鼠标悬停时的样式
- a:active 鼠标点击时的样式
- a:visited 超链接访问后的样式
写四种状态时的顺序:link>visited>hover>active
<style>
/*在head中定义*/
a:link{
color:black;
}
a:visited{
color:lightblue;
}
a:hover{
color:yellowgreen;
}
a:active{
color: brown;
}
</style>
默认状态:
悬停状态:
点击时状态:
访问后状态: