1、基础知识
CSS定义:cascading style sheet 层叠样式表。
语法:
选择器 {
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
属性名4:属性值4;
}
CSS使用:
1、通过选择器选择上标签
2、在选择的标签上设置样式
选择器分类:
标签选择器: p{}
类选择器: .className{}
id选择器: #id{}
一些常见的样式:
color:red; 文字颜色
font-size:40px;
background-color:blue;
text-decoration:underline;
text-decoration:none; //去掉下划线
2、css简单应用
.yellow{
color: yellow;
}
.red{
color: red;
}
.big-font{
font-size: 50px;
}
.underline{
text-decoration: underline;
}
#green{
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/my.css" />
<style type="text/css">
.blue{
color:blue;
}
</style>
</head>
<body>
<h1 class="yellow ">周老师</h1>
<h1 class="blue underline">朱老师</h1>
<h1 class="red big-font underline" >高老师</h1>
<h1 id=green>洪老师</h1>
</body>
</html>
在css中定义的.yellow .big-font,可以通过class="?"来调用,可以在class中调用多个css以达到自己要求的格式。
3、盒模型
盒子中主要的属性就5个:width、height、padding、border、margin。
padding:内边距 margin:外边距
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding: 40px 50px 60px; // 上右下左(顺时针方向,某一个方向没写就取对边的值)
padding-bottom: 30px;
/border: 8px solid #000000;/
border: 8px solid #000;
}