css基础课程总结

原创 2018-11-10 08:05:12 4
摘要:第一节css基础css选择器有很多种,比如常用的标签选择器,id选择器,类选择器,派生选择器(结合上下文关系),属性选择器css样式设置在哪些地方呢?有三种内联样式:直接给元素添加style属性,在style属性内编写css样式内部样式:在head标签内,写上style标签<style type="text/css">此处写样式</style>外部导入:

第一节css基础

css选择器有很多种,比如常用的标签选择器,id选择器,类选择器,派生选择器(结合上下文关系),属性选择器

css样式设置在哪些地方呢?有三种

内联样式:直接给元素添加style属性,在style属性内编写css样式

内部样式:在head标签内,写上style标签<style type="text/css">此处写样式</style>

外部导入:在head标签内写如下代码

<link rel="stylesheet" type="text/css" href="url链接地址" />

第二节 盒模型

盒模型是由元素内容本身的宽和高、内边距、边框、外边距组成

第三节 css边框样式

统一设置属性如: border:1px solid red;

1px为边框宽度 

solid为边框样式,表示实线,其他样式还有虚线,点线,双实线

red为边框颜色

单独设置边框可以用border-left border-right等属性

第四节 背景设置

background-color 背景颜色

background-image: url() 背景图片

background-repeat: repeat-x repeat-y no-repeat和repeat几个属性值,设置背景图片是否平铺或怎样平铺

background-position:水平方向 垂直方向两个属性值同时设置,可以用关键字center top等,也可以用像素

第五节 块级和行内元素

两者之间的转换

display:inline转为行内元素

display:block转为块级元素

display:inline-block转为行内块级元素

第六节 css中的定位

有两种方式position:relative 和position:absolute

相对定位和绝对定位

其中绝对定位使元素脱离文档流,他的位置取决于带有相对定位的父级元素

相对定位相对于自己本身偏移的位置,偏移前的空间依然占用,不脱离文档流

第七节 浮动

浮动分为左浮动和右浮动

浮动可以让块级元素并排于一行,并脱离文档流

使用时注意定义一个空div设置其样式为clear:both


附上小案例 下拉菜单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{width: 100px;height: 30px;text-align: center;line-height: 30px;background:#ccc;position: relative;}
.box1{width: 100px;height: 100px;background: pink;display: none;position: absolute;}
.box:hover .box1{display: block;}
</style>
</head>
<body>

<div>
大菜单
<div>小菜单</div>
</div>

</body>
</html>


批改老师:韦小宝批改时间:2018-11-10 09:32:20
老师总结:写的很认真啊!不错不错!继续保持下去哦!加油吧!

发布手记

热门词条