CSS语法
格式:
【属性】:【属性值】;
例如:
设置背景颜色为蓝色
background-color:blue;
引入方式:
新建一个HTML文件,在主体部分先写上:
div
,然后使用内嵌式引入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: blue">div</div>
</body>
</html>
背景颜色变为蓝色!
CSS的选择器
标签选择器:【标签名】{};
ID选择器:#【ID值】{};
类选择器:.【类名】{};
使用內部式的方法来设置背景主体为灰色,这是标签选择器:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
background-color: grey;
}
</style>>
</head>
<body>
<div style="background-color: blue">div</div>
</body>
</html>
ID值选择器,ID值只能唯一,所以一个ID一个值。
<title>Title</title>
<style type="text/css">
body{
background-color: grey;
}
#div_id1{
background-color: red;
}
</style>
<body>
<div style="background-color: blue">div</div>
<div id="div_id1">div2</div>
</body>
类选择器,类可以有多个,一种类对多种标签:
<div class="div_class1">div3</div>
<div class="div_class1">div4</div>
.div_class1{
background-color: green;
}
CSS的常用样式
背景颜色:background-color:【颜色】;
背景图片:background-image:url(【图片地址】);
图片平铺:background-repeat:
repeat 水平垂直都平铺【默认】
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
插入图片:
图片与HTML位置在一起:
<style type="text/css">
body{
/*background-color: grey;*/
background-image: url("1.jpg");
}
#div_id1{
background-color: red;
}
.div_class1{
background-color: green;
}
</style>
最终的结果是:
选择其他样式的平铺方式:
<style type="text/css">
body{
/*background-color: grey;*/
background-image: url("1.jpg");
background-repeat: repeat-y;
}
#div_id1{
background-color: red;
}
.div_class1{
background-color: green;
}
</style>
字体大小:font-size:【具体大小】;
字体加粗:font-weight:
normal 正常(默认)
bold 加粗
lighter 变细
边框: borde:边框类型,尺寸,颜色;
最终的形式代码和结果入下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
/*background-color: grey;*/
background-image: url("1.jpg");
background-repeat: repeat-y;
}
#div_id1{
background-color: red;
font-size:72px;
font-weight:bold;
}
.div_class1{
background-color: green;
border:solid 1px yellow;
}
</style>
</head>
<body>
<div style="background-color: blue">div</div>
<div id="div_id1">div2</div>
<div class="div_class1">div3</div>
<div class="div_class1">div4</div>
</body>
</html>