Cascading Style Sheet 层叠级样式表
CSS的写入
内嵌CSS : 在<head>中的<style>中写入css内容。(<style>中写的是CSS代码)
外链式: 在<link>设置对应的参数。(HTML)
<link href="XXXX.css" rel="stylesheet">
行内样式: 在标签元素中,编写一个style属性,编写样式即可。
导入式: 通过在<head>中添加import。(CSS 2.1)
<style>
@import url("XXX.css");
</style>
CSS使用的优先级原则:就近原则。
选择器
选择器分为:标签选择器,类选择器,id选择器。
类选择器的特点:可以多处使用且可以跨标签,同一个class,可以复用。
id选择器的特点: id必须保证全局唯一。
选择器之间的优先级为: id选择器 > class选择器 > 标签选择器(越精准级别越高,不符合就近原则)
层次选择器
1.后代选择器:在某个元素的后面。
body p{
/*参数设置*/
}
2.子选择器: 后一代。(只有后一代起效)
body>p{
/*参数设置*/
}
3.相邻兄弟选择器:向下一个兄弟级(同级且在该类的下面的一个选择器)。
.class + p{
/*参数设置*/
/*class同级选择器中的下面一个选择器的p标签受影响*/
}
4.通用选择器: 向下兄弟级(同级且在该类的下面的兄弟选择器)。
.class~p{
/*参数设置*/
/*class同级选择器中的p标签受影响*/
}
结构伪类选择器(伪类用于过滤一些条件,带":"基本都是为类)
例子为
ul li:first-child{
/*ul的第一个子元素*/
}
ul li:last-child{
/*ul的最后一个子元素*/
}
对应定位方法为下:
p:nth-child(1){
/*按顺序*/
/*(表示选中p1:定位到父元素,选择当前的第一个元素)选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效*/
/*以此类推number就表示对应的子元素序号*/
}
p:nth-of-type(1){
/*按类型*/
/*选择父元素中序号为number的类型为p的子元素*/
}
<a>标签的特殊效果
(重点)a:hover : 表示鼠标移到时产生的效果。
a:active : 表示鼠标点击没放的时候的效果。
a:visited :表示点击完后的效果。
a:link:表示未访问时的效果。
属性选择器(本质是正则表达式)
a[id]{
/*a标签中带有id的属性的元素会受影响,[]中的内容为判断y'jv*/
/* = 绝对等于*/
/* *= 包含*/
/* ^= 以什么开头*/
/* $= 以什么结尾*/
}
a[href^=http]{
/*选中href中以http开头的元素*/
/*^http为正则表达式*/
}
字体的设置
p{
/*oblique表示字体的样式,bolder 表示字体的粗细,12px表示字体的大小,"楷体"表示用什么字体*/
font: oblique bolder 12px "楷体";
}
/* font中的设置的属性为: 字体样式 字体的粗细 字体的大小 字体的种类*/
文本样式
颜色的使用:
RGB : 0~F
RGBA : A表示透明度。使用方法为color : rgb(number, number, number, 0~1),透明度的范围为0 ~ 1。
text-decoraction : 文字效果。(在a标签中可以通过text-decoraction : none 去除下划线)
text-align : 排版。
text-indent : 段落首行缩进。
line-height :行高。
text-decoration : 设置样式。(underline:下划线,line-through:中划线,overline:上划线)
vertical-align : 对齐方式。(middle:中间对齐)其使用时需要两个对象作为参考。
text-shadow : 阴影。
#price{
text-shadow: 水平偏移(必填,允许负值) 垂直偏移(必填,允许负值) 模糊距离(可选) 阴影颜色(可选)
}
list-style : 列表效果。(none : 去掉圆点, circle : 空心圆点,decimal : 数字,square : 正方形点)
样式属性
border : 边框。(边框的样式有 : solid, double, dashed(虚线))
div{
border : 边框粗细 边框的样式 边框的颜色
}
background : 背景效果。
div{
background:颜色 url("")(可选) x轴 y轴 平铺效果(可选)
}
background-image:用对应的图片覆盖背景。(默认是全部平铺的,也可以通过background : url("")直接使用)
div{
background-image: url("对应的文件路径")
}
background-repeat :平铺的方向(一般配合background-image使用)
div{
background-repeat: repeat-x(水平平铺)/repeat-y(垂直平铺)/no-repeat(不平铺)
}
渐变
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
盒子模型
margin : 外边框。
padding : 内边框。
border : 边框。
body 总有一个外边距值 ,为了美观,我们可以就其margin设为 : 0。
margin和padding 都可以设置上下左右的边框效果。(其对应的顺序为 :上右下左(顺时针旋转)。如果只有两个参数就代表: 上下,左右)
margin的妙用: 居中。(居中的条件:外部为块元素,且块元素有固定的宽度)
div{
margin:0 auto;
/*上下的外边距为0,左右自动对齐(auto),最终实现居中*/
}
圆角边框
border-radius : 圆角边框。(参数符合顺时针规律)
div{
border-radius: 50px(左上和右下) 20px(左下和右上)。
}
div{
border-radius: 50px(左上) 50px(右上) 50px(右下) 50px(左下)。
}
盒子阴影
box-shadow : 阴影。
#price{
box-shadow: 水平偏移(必填,允许负值) 垂直偏移(必填,允许负值) 模糊距离(可选) 阴影颜色(可选)
}
float & display & overfloat
display : 存在的属性为:inline , block, inline-blocked。
overfloat其对应的参数为: scroll(放不下的内容可以通过滚动条查询),hidden(将放不下的内容隐藏起来),auto(自动)
float和display:line-blocked的区别
不同之处:对元素设置display:inline-block ,元素不会脱离文本流,而float就会使得元素脱离文本流,且还有父元素高度坍塌的效果。
相同之处:能在某程度上达到一样的效果。
父级边框塌陷问题的解决方案
1.通过一个空的div标签,清除浮动。(程序里最好不要出现空的div,所以不推荐使用)
2. 增加父级元素的高度。(不建议使用)
3.在父级元素中添加overflow:hidden属性。(会隐藏掉内容,不建议使用)
4.在父类添加一个伪类。(和方法一一样,只是以编程的方式实现,推荐使用)
#father:after{
content:'';
dispaly:block;
clear:both;
}
定位(position)
相对定位:相对自己原来的位置进行偏移,相对定位的话,它仍然在标准文档流中,原来的位置会被保留。(position:relative, 然后设置方向,top表示:距离上边的距离,left表示:距离左边的距离,right表示:距离右边的距离,bottom表示:距离下边的距离)
绝对定位(position:absolute):
1.没有父级元素定位得前提下,相对于浏览器定位。(在父级元素没有设置position时)
2.假设父级元素存在定位,我们通常会相对于父级元素进行偏移。(只能在父级元素的范围内进行移动)
3.偏移方向:类似相对位置的偏移方向。
4.相对于父级或浏览器的位置进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留。
固定定位(position:fixed):位置始终固定,不会因为滚动条的移动或窗口的大小调整而改变位置。
z-index
z-index:表示层级。(z-index:number,number表示处于的层数,最低是0,最高无限制)
opacity
opacity:表示背景的透明度。(opacity: 0~1,0~1表示百分比,可以配合z-index使用)。
设置透明度的其他方法:
.div{
filter:Alpha(opacity=50)
/*opacity中的参数范围为0~100*/
}
此方法用于处理:IE版本兼容问题。