目录
DIV+CSS简介
DIV+CSS简介
DIV介绍
概述:div是html的一个标签、全称是DI version 意味着划分的意思、它可以将我们网页分成若干个块状的区域。它本身是没有任何形态效果、需要我们使用css样式配合才可以凸显其形态。我们可以把它简单的理解为图层或者容器。在这个容器的内容我们就可以写html标签
CSS介绍
概述:层叠样式表、可以用来美化页面
CSS引入方式
css语法:
选择器{属性:属性值;属性:属性值}
行内引入
内部引入
外部引入
1、提前定义好css样式文件
2、引入样式文件
在同一个标签上 同时作用3种引入方式 哪个优先级高?
结论:
行内>内部 | 外部(后加载会覆盖前加载的)
CSS样式规则
CSS选择器
概述:选择器相当于快速获取到符合条件规则的某一类标签
id选择器:Id为xx的某一个标签作用此样式
类选择器:作用此类型的某一类都有此样式
标签选择器:当前页面下的此标签都会作用相同的样式
当三种选择器中的样式同时作用于一个标签 优先级怎么样?
id选择器>类选择器>标签选择器
常用CSS样式
字体样式
字体大小:font-size
字体风格:font-frmaily
字体类型:font-style
字体粗细:font-weight
字体颜色: color
文本样式
文本颜色:color
文本对齐:text-align left 左对齐 right 右对齐 center 居中对齐
文本装饰:text-decoration overline 上划线 underliner 下划线 line-throgh穿过线 none 没有效果
设置行高:line-height
超链接伪类样式
概述:超链接在不同状态下的颜色标识
鼠标未访问 :link
鼠标访问过后 :visited
鼠标悬浮 :hover
鼠标点击 :active
注意事项:
1、a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
2、a:active 必须被置于 a:hover 之后,才是有效的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1 {
/*文本颜色:*/
color: royalblue;
width: 400px;
height: 400px;
border: 1px solid;
/*文本对齐
left
center
right
* */
text-align: left;
/*文本装饰
上划线overline、下划线underline、穿过线 line-through
none:去除样式
* */
text-decoration: none;
/*设置行高:*/
line-height: 70px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">点我哦</a> <br /><br />
<div id="d1">
床前明月光,地上鞋两双。<br /> 床上狗男女,其中就有你。
</div>
</body>
</html>
边框样式
border-top-style 样式 实线solid 虚线 dashad 点线 dotted 双实线 double
border-top-width
border-top-color
简写
border-top:dashad 1px red;
设置圆角边框:
border-radius 像素|百分比
设置一个值表示4个角都是一样的弧度
设置两个值 第一值表示左上、右下 第二值表示 右上、左下
设置三个值 第一值表示 左上、第二值表示右上、左下 第三值表示右下
设置四个值 顺时针方向 左上、右上、右下、左下
注意:给多个值的时候 不要加任何符合直接空格值 如 75px 30px…
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*边框
style线条:实线 solid、虚线dashad、点线dotted、双实线double
width粗细: px
color颜色:
* */
.a1{
/*div大小*/
width: 200px;
height: 200px;
/*设置上边框*/
border-top:dashed 2px rgb(63,72,204);
/*设置左边框*/
border-left:solid 2px rgb(34,177,76);
/*设置下边框*/
border-bottom: 2px dotted black;
/*设置右边框*/
border-right:rgb(237,28,36) 2px double;
/*圆角 取值百分百 | 像素 */
border-radius: 75px 30px 80px 30px;
}
</style>
</head>
<body>
<div class="a1">
</div>
</body>
</html>
背景样式
背景颜色:background-color
背景图片:background-image-url(图片地址)
背景大小:background-size
背景是否平铺:background-repeat
repeat-x 横向重复 repeat-y纵向重复 no-repeat不重复
背景偏移:background-position:30px 50px
30px 横向偏移:正数向右偏移、负数向左偏移
50px 纵向偏移:正数向下偏移、负数向上偏移
盒子模型
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型。
w3c:规定元素框如何去处理元素体、内边距、外边距的方式
布局样式
浮动:将我们div由垂直分布变为水平分布
float:
left:左浮动
right:右浮动
clear
left:清除左浮动 以左侧的容器高度为参照物、在左侧容器高度下添加标准文档流的内容
right:清除右浮动 以右侧的容器高度为参照物、在由侧容器高度下添加标准文档流的内容
both:清除两侧浮动
定位技术
position:定位
相对定位 relative 以自身为参照物移动 xx
绝对定位 absolute 以父容器body为参照物移动 xx
转换样式与列表样式
概述:在我们html中每一个标签都可以找到所属的归类、不同分类下标签的特点是不一样的。
行级标签:1、在标签上设置大小没有形态变化 2、不换行 典型: span、a
块级标签:1、在标签上设置大小后又形态变化、2、换行 典型: div、p
行内块标签:在一行中表现块级的特征 1、在标签上设置大小有形态变化、2、不换行 典型:input、img
转换 dispaly
行级转块级 block
块级转行级 inline
转行内块 inline-block