css样式表主要可以有效的对页面布局、字体、颜色、背景和其他效果实现更加精细的控制。
css的基本语法为: 选择符{样式属性：取值； 样式属性：取值；.........}
文字属性
对文字的属性主要有：字体font-family、字号font-size、风格font-style。可以看出他们的公共部分为font。
外边框与内边框
主要是使内容规整，内容与内容区分一块块的分开，有外边框属性margin、内边框属性padding、边框属性border。
运用代码如下：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>外边距与内边距</title>
<style type="text/css">
<!--
.d {
padding:40px 40px 10px 10px;
border-top-style:dashed;
border-bottom-style:dotted;
border-left-style:double;
border-right-style:groove;
line-height:60px;
border-width:thick;
border-top-color:#F00;
border-bottom-color:#CF9;
}
-->
</style>
</head>
<body>
<div class="d">10分通过学习考试，参考学习网址里面的案例，各团队提供属于自己团队的创新创意具体的方案设计，可以涉及图像与视觉、语音技术、自然语言处理、个性化推荐的某个方面，比如柳州螺蛳粉相关创意（智能螺蛳分拣机）、科大校园地图语音搜索、学生宿舍人脸识别、课程考试智能预测，学生食堂饭菜个性推荐等等。</div>
</body>
</html>
image.png
定位属性
定位属性：用于对元素在网页的位置的控制，类似于文本框。主要属性有：定位position、叠成顺序z-lidex。
对属性的运用代码如下
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>外边距与内边距</title>
<style type="text/css">
<!--
.f{
position: absolute;
top: -4px;
right: 20px;
left: 839px;
bottom: 20px;
clip:rect(top right bottom left)
z-index: 1;
}
.g{
position: absolute;
font-size: medium;
top: 387px;
left: 857px;
right: 20px;
bottom: 25px;
z-index: 2;
width: 441px;
height: 229px;
overflow: scroll;
}
-->
</style>
</head>
<body>
<div align="center" class="f"><img src="tooopen_sy_234303751591.jpg" width="482" height="382" /></div>
<div class="g">10分通过学习考试，参考学习网址里面的案例，各团队提供属于自己团队的创新创意具体的方案设计，可以涉及图像与视觉、语音技术、自然语言处理、个性化推荐的某个方面，比如柳州螺蛳粉相关创意（智能螺蛳分拣机）、科大校园地图语音搜索、学生宿舍人脸识别、课程考试智能预测，学生食堂饭菜个性推荐等等。 </div>
</body>
</html>
呈现的效果为
image.png
还可以制作为：
image.png
网友评论