<1>CSS:层叠样式表
CSS具有对网页的布局,颜色,背景,宽度,高度,字体进行控制,
让网页按照您的美工设计布局的更加美观漂亮
样式开始最常见的是:*号,这里的“*”号是通配符,指网页html中所有标签的意思。
在*号定义的属性,一般是设置页面一些固定的属性
*{
margin: 0px;
padding: 0px;
}
<2>常见的CSS样式:
1)边框
1.1)Border边框样式的参数:
solid: 实线边框 none: 无边框 dotted: 边框为点线
dashed: 边框为长短线 double:边框为实线
groove: 根据border-color的值画3D凹槽
ridge: 根据border-color的值画菱形边框
inset: 根据border-color的值画3D凹边
outset: 根据border-color的值画3D凸边
1.2)Border四个边框
border-left : 设置左边框,一般单独设置左边框样式使用
border-right : 设置右边框,一般单独设置右边框样式使用
border-top : 设置上边框,一般单独设置上边框样式使用
border-bottom: 设置下边框
border-radius: 倒圆角
(1)border-radius的值可以为绝对单位px,相对单位em,rem
(2)可以设置单个角的弧度:
border-top-right-radius:5px;
border-bottom-left-radius:5px
在开发中我们一般这样写CSS边框,优化简写,
常见对对象设置使用属性代码:border:1px solid #blue;
1.3)box-shadow:阴影
box-shadow: X轴偏移值 Y轴偏移值 X轴阴影模糊半径 Y轴阴影模糊半径 阴影颜色
X轴和Y轴的偏移值可以为负值,但是不能共用一个,
X轴和Y轴的阴影半径可以共用一个,但是不能为负值
阴影半径是可以不写的,但是失去了模糊的效果,立体感减弱,一般不会使用
1.4) box-sizing:属性允许你以特定的方式定义匹配某个区域的特定元素
box-sizing:content-box/border-box/inherit
content-box:宽高的值为content的宽高
border-box: 宽高的值为border+padding+content,也就是盒模型的宽高
inherit: 父元素继承box-sizing的值
2) 盒子模型(Box Model):
Html中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,
从外向里依次是:margin(外边距) Border(边框) padding(内边距) content(内容)
2.1) margin:盒子的外边距,即盒子与盒子之间的距离
margin-top:对象上边外延距离;
margin-bottom:对象下边外延距离
margin-left:对象左边外延距离;
margin-right: 对象右边外延边距
margin可以写一个值,也可以写两个,三个,四个
margin: 24px 上下左右都是24px
margin: 24px auto 上下24px, 左右自动
margin: 24px auto 10px 上边距:24px, 左右自动,下边距:10px
当此属性为4个值的时候,就是具体到上边距,下边距,左边距,右边距
蓝色部分旁边的黄色部分是元素的margin值
2.2)padding:内边距,盒子与盒子内部元素的距离
padding-top:10px; 上边框留空白
padding-right:10px; 右边框留空白
padding-bottom:10px; 下边框留空白
padding-left:10px; 左边框留空白
2.3)content:属性与 :before 及 :after 伪元素配合使用,来插入生成内容
2.3.1):after 在元素内容之后插入内容
h1:after {content:url(/i/w3school_logo_white.gif)}
结果:
2.3.2):before在元素内容之后插入内容
h1:before{content:url(/i/w3school_logo_white.gif)}
<!DOCTYPE html>
<html>
<head>
<style>
a:after {content: " (" attr(href) ")";}
</style>
</head>
<body>
<p><a href="http://www.runoob.com">菜鸟教程</a> - 免费的编程学习网站。</p>
<p><b>注意:</b>仅当 !DOCTYPE已经定义 IE8支持 content属性</p>
</body>
</html>
3) background:设置背景
3.1)background-image:
可以为一个元素添加多张图片,写在前面的背景图会在上面
3.2)background-size:
调整背景图片的大小
background-size:60px 100px 宽 高
background-size:cover 将图片缩放到正好完全覆盖定义背景的区域。
3.3)background-position:
设置背景图像的位置,如果未设定,图像会被放在元素的左上角
left top: 默认 right bottom
3.4)background-repeat:
设置是否及如何重复背景图像,默认的背景图像在水平和垂直方向上重复
repeat: 默认,背景图片向水平、垂直两个方向上平铺
repeat-x:使图片只在水平方向上平铺。
repeat-y: 死图片只在垂直方向上平铺。
no-repeat:不重复平铺背景图片。
inherit: 规定应该从父元素继承 background-repeat 属性的设置。
3.5)background-attachment:
fixed: 网页滚动时,背景图片相对于浏览器的窗口而言,固定不动
scroll: 网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动
3.6)background-origin: 规定背景图片的定位区域
下图中,黄色是padding+content, 绿色是border
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
div{
float:left;
margin:30px;
width: 120px;
height: 150px;
background: yellow;
border: 20px solid green;
padding: 20px;
background-image: url(img/bg_flower.gif);
background-repeat: no-repeat;
}
.box1{
background-origin:content-box;
}
.box2{
background-origin:padding-box;
}
.box3{
background-origin:border-box;
}
3.7)background-clip: 规定背景的绘制区域
<div class="box1">啦啦啦啦,德玛西亚。啦啦啦啦,剑圣偷塔。啦啦啦啦,我要回家。啦啦啦啦,下雨不怕。啊啊!</div>
<div class="box2">啦啦啦啦,德玛西亚。啦啦啦啦,剑圣偷塔。啦啦啦啦,我要回家。啦啦啦啦,下雨不怕。啊啊!</div>
<div class="box3">啦啦啦啦,德玛西亚。啦啦啦啦,剑圣偷塔。啦啦啦啦,我要回家。啦啦啦啦,下雨不
div{
float:left;
margin:30px;
width: 120px;
height: 150px;
background: yellow;
border: 20px solid rgba(0, 0, 0, 0.1);
padding: 20px;
}
.box1{
background-clip:content-box;
}
.box2{
background-clip:padding-box;
}
.box3{
background-clip:border-box;
}
3.8)linear-gradient: 背景的颜色渐变(IE 10)
渐变(gradient)是由浏览器生成的, 颜色可以用多种表现形式 ,
包括带有透明度的raba()形式。
渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡,
你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),
你可以减少下载的事件和宽带的使用。
3.8.1)线性渐变
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
div{
float:left;
margin:30px;
width: 100px;
height: 150px;
border: 2px solid orange;
font-size: 14px;
line-height: 1.5;
}
.box1{ // 1、属性值最少为两种颜色
background: -webkit-linear-gradient(red, yellow); //Safari 5.1 - 6.0
background: -o-linear-gradient(red, yellow); // Opera 11.1 - 12.0
background: -moz-linear-gradient(red, yellow); // Firefox 3.6 - 15
background: linear-gradient(red, yellow); // 标准的语法
}
.box2{ //2、可以设置颜色渐变的方向,比如从左到右
background: -webkit-linear-gradient(left, green , yellow);
background: -o-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: linear-gradient(left, green , yellow);
}
.box3{ //3、也可以沿着对角的方向渐变
background: -webkit-linear-gradient(top left, blue , yellow);
background: -o-linear-gradient(top left, blue, yellow);
background: -moz-linear-gradient(top left, blue, yellow);
background: linear-gradient(top left, blue , yellow);
}
.box4{ //4、或者,我们直接用角度确定渐变的方向(12点钟方向为0deg)
background: -webkit-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));
background: -o-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));
background: -moz-linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));
background: linear-gradient(60deg, rgb(248, 182, 44), rgb(0, 159, 233));
}
.box5{ // 5、我们也可以定义多种颜色的渐变,之前的方向的设置方法不变
background: -webkit-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
background: -o-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
background: -moz-linear-gradient(45deg,red,orange,yellow,green,blue,indigo,violet);
background: linear-gradient(45deg, red,orange,yellow,green,blue,indigo,violet);
}
.box6{ // 6、当然,渐变可以是很多次的
background: -webkit-repeating-linear-gradient(red, red 10%, yellow 20%);
background: -o-repeating-linear-gradient(red, red 10%, yellow 20%);
background: -moz-repeating-linear-gradient(red, red 10%, yellow 20%);
background: repeating-linear-gradient(red, red 10%, yellow 20%);
}
3.8.2)径向渐变
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
div{
float:left;
margin:30px;
width: 150px;
height: 150px;
border: 2px solid orange;
font-size: 14px;
line-height: 1.5;
}
.box1{ //1、颜色结点均匀分布(默认情况下
background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(red, yellow, green); /* 标准的语法 */
}
.box2{ // 2、当然,对于颜色发辐射界限,我们也可以进行设置
background: -webkit-radial-gradient(red 5%, yellow 15%, green 60%);
background: -o-radial-gradient(red 5%, yellow 15%, green 60%);
background: -moz-radial-gradient(red 5%, yellow 15%, green 60%);
background: radial-gradient(red 5%, yellow 15%, green 60%);
}
.box3{ //3、shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。 默认值是 ellipse。*/
background: -webkit-radial-gradient(circle, red, yellow, green);
background: -o-radial-gradient(circle, red, yellow, green);
background: -moz-radial-gradient(circle, red, yellow, green);
background: radial-gradient(circle, red, yellow, green);
}
.box4{ // 4、size 参数定义了渐变的大小。它可以是以下四个值:closest-side farthest-side closest-corner farthest-corner,具体的不同大家可以自己尝试,这里只展示一种情况
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
.box5{ // 5、当然,也是有重复渐变这种情况
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
<3>文本
1)text-shadow文本阴影
text-shadow: X轴偏移值, Y轴偏移值,阴影模糊半径, 颜色
2)word-wrap | word-break 是否允许长单词换行,这两个可以一起使用
2.1)word-wrap:
normal: 只允许断点字换行
break-word:如果单词过长,截断强制换行
2.2)word-break:
normal: 浏览器默认的换行行为,一般是不允许长单词内部换行
break-all:允许在单词内换行
keep-all: 只能在半角空格或连字符处换行
<div class="box1">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box2">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box3">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
<div class="box4">aaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaa</div>
div{
float:left;
margin:30px;
width: 100px;
height: 150px;
border: 2px solid rgba(0, 0, 0, 0.5);
font-size: 14px;
line-height: 1.5;
}
.box1{
word-wrap: normal;
}
.box2{
word-wrap: break-word;
}
.box3{
word-break: keep-all;
}
.box4{
word-break: break-all;
}
<4>float:常跟属性值left, right, none
float: none 不使用浮动
float: left 靠左浮动
float: right 靠右浮动
清除浮动 :clear:none|left|right|both
<5>text-decoration: 参数 改变浏览器显示文字链接时的下划线
参数取值范围:
underline: 为文字家下划线
overline: 为文字加上划线
line-through: 为文字加删除线
blink: 使文字闪烁
none: 不显示上述任何效果
<6>position属性
static:默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)
absolute: 绝对定位,相对于static定位以外的第一个父元素进行的定位
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed: 绝对定位,相对于浏览器窗口进行定位
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative:相对定位,相对于其正常位置进行定位,
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。
inherit: 规定应该从父元素继承 position属性的值
<7>z-index:
在使用绝对定位 position:absolute属性条件下使用才能使用。
通常我们让不同的对象盒子以不同顺序重叠排列,我们就是要z-index样式属性
z-index的数值不跟单位。不用加上px.
z-index的数字越高越靠前,并且值必须为整数,如果两个div一起重叠,
这时设置你想要的div,可以将那个div的z-index设置大一点,这样就可以覆盖之前那个
<8>字体属性
1)color: 加上颜色
2) font-size: 20px
3) font-family: 规定元素的字体系列
用于某个元素的字体族名称或/及类族名称的一个优先表。
如果浏览器不支持第一个字体,则会尝试下一个
有两种类型的字体系列名称:
3.1)指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial"。
3.2)通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。
4) font-weight:
bold(粗体) lighter;(细体) normal;(正常),设置数字也是可以的 (100px,200px)
5) font-style:
oblique;(偏斜体) italic;(斜体) normal;(正常)
6) line-height: normal(正常)
line-height:50px; div的高度也是五十,这样你的内容结束平行居中
<9>区块
1)单词间距:
word-spacing: 间隔距离
2)字母间距:
letter-spacing: 字母距离
3)文本对齐:
text-align:
left:左对齐 right: 右对齐
center:居中对齐 justify: 相对左右对齐
4)垂直对齐:
vertical-align:
top:顶对齐 bottom: 底对齐
text-top: 相对文本顶对齐 text-bottom: 相对文本底对齐
baseline: 基准线对齐 middle: 中心对齐
sub: 以下标的形式显示 super: 以上标的形式显示
5)文本缩进
text-indent: 缩进距离
12px相当于一个文字距离
6)空格
white-space:
normal 正常 pre 保留 nowrap 不换行
7) 显示样式
display:
block:块级元素,在对象前后都换行
inline:在对象前后都不换行
list-item:在对象前后都换行,增加了项目符号
none:无显示
<10> div 和 span的区别:
1)两者都是用来划分区域的,
div是块级元素,不会与其他元素在同一行
span是内联元素,可以与其他元素位于同一行
2) span标签是不能改变大小的,span占用的是内容有多宽就占用多宽的空间距离,
如果想把span标签的大小想改掉就必须把它变为块级元素 display:inline-block;
块级元素有:div p form ul ol li ......
行内元素有:span img a......