CSS基础第一讲

前面几天我们学习了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样式之间用; 分割; 如下所示:
测试标签内部饮用css语法

2>,内部饮用和外部引用语法,直接选择器{css样式表每个样式用; 隔开},如下所示:
h1{backgroung-color:red; color:green; }
3>css的特征和优先级,css大部分样式能被继承,即子标签拥有父标签的的样式;可以定义多个样式对一个标签进行操作,如果不冲突的情况下,多种样式可以同时展现出来,如果冲突则根据优先
级,优先级高的覆盖优先级低的;三种饮用css样式的优先级分别为标签内部引用最高,内部引用次之,最低是外部引用;
css选择器 1>,通用选择器,即代表统配所有的标签,如下:
*{ margin:0; padding:0; }
2>,元素名选择器,根据元素名称找到对应的元素:如下:
h1{ color:red; }
【CSS基础第一讲】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; }
选择器的优先级,这里用一张图片解释,如下所示:
CSS基础第一讲
文章图片
选择器的优先级 尺寸和边框
1>尺寸单位简介如下:

CSS基础第一讲
文章图片
尺寸单位简介 2>,颜色单位简介如下:

CSS基础第一讲
文章图片
颜色单位简介 3>,可以设置尺寸的有块级元素,特殊元素里面的img,table;
4>,内容溢出,overflow:当内容溢出标签后对应的处理,hidden益出部分隐藏,auto自动模式,当内容超出尺寸显示滚动条,不超出不显示;scroll不管内容是否超出始终显示滚动条;overflow-x控制的是左右边缘,overflow-y控制的是上下边缘;
5>,边框这个不做过多说明,说多了太深,说浅了很简单,所以不做这些不必要的麻烦;
今天的课程就到这里,明天我们继续css的第二节;

    推荐阅读