前面几天我们学习了html的基本标签，可以实现基本的网页制作，只是内容不够丰富，也就是所谓的丑陋，那么今天我们学习前端课程美化系列之css，css是控制我们html标签的样式及布局的；本讲课程我们主要学习如下部分，css概述，css基本选选择器，边框与尺寸；
css概述
1>，css也叫层叠样式表，主要作用是控制标签的样式，以及页面的布局；让内容与表象分离，提高了代码的复用性和维护性；html只用于构建网页的结构，css构建html标签的样式；
css的几种引入方式
1>,标签内引用，及我们在html标签中使用style属性，style属性对应的值就是css样式；
2>,内部引用，即在head标签里面加入一个style标签，style标签里面书写css样式表；
3>,外部引用，即新建一个.css的文件，在文件内书写css样式表，并在html文档head标签内使用link标签引入css文件；
css语法
1>,标签内引用语法，直接在标签内，添加style属性，属性值为css样式，每个css样式之间用;分割;如下所示：
<p style="background-color:red;color:green;">测试标签内部饮用css语法</p>
2>,内部饮用和外部引用语法，直接选择器{css样式表每个样式用;隔开}，如下所示：
h1{backgroung-color:red;color:green;}
3>css的特征和优先级，css大部分样式能被继承，即子标签拥有父标签的的样式；可以定义多个样式对一个标签进行操作，如果不冲突的情况下，多种样式可以同时展现出来，如果冲突则根据优先
级，优先级高的覆盖优先级低的；三种饮用css样式的优先级分别为标签内部引用最高，内部引用次之，最低是外部引用；
css选择器
1>,通用选择器，即代表统配所有的标签，如下：
*{ margin:0; padding:0; }
2>,元素名选择器，根据元素名称找到对应的元素：如下：
h1{ color:red; }
3>,id选择器，找到id为对应名称的选择器，如下：
#zouhao { background-color:blue; }
4>,类名选择器 找到class为对应名称的选择器，如下：
.zouhao{ color:red; }
5>,后代选择器，找到对应的后代标签，如下：
div p{ font-size:10pt; }
6>,子代选择器，不同于后代，后代的意思是不管嵌套多少层，只要在里面即可，但是子代必须是亲儿子的意思，如下：
div>img { width:100px; }
7>,伪类选择器，在不同的状态下需要不同的布局使用的，那么我们这里不做意义说明，用的比较多的是hover，当鼠标悬浮的时候会触发的选择器，如下：
a:hover { background-color:red; }
选择器的优先级，这里用一张图片解释，如下所示：
选择器的优先级
尺寸和边框
1>尺寸单位简介如下：
尺寸单位简介
2>,颜色单位简介如下：
颜色单位简介
3>,可以设置尺寸的有块级元素，特殊元素里面的img，table；
4>,内容溢出，overflow：当内容溢出标签后对应的处理，hidden益出部分隐藏，auto自动模式，当内容超出尺寸显示滚动条，不超出不显示；scroll不管内容是否超出始终显示滚动条；overflow-x控制的是左右边缘，overflow-y控制的是上下边缘；
5>,边框这个不做过多说明，说多了太深，说浅了很简单，所以不做这些不必要的麻烦；
今天的课程就到这里，明天我们继续css的第二节；
网友评论