CSS样式表

作者: Max_M | 来源:发表于2018-06-17 19:06 被阅读0次

CSS初级
css
HTML+CSSday02
css基础01- 初识css
前端基础-CSS
H5：入门笔记二
CSS-常用属性
CSS基础笔记一
CSS简介,语法,选择器分类使用,属性设置
关于CSS样式部分介绍

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>

呈现的效果为