1、什么是CSS
层叠样式表(cascading style sheets),用来定义如何显示HTML元素。
有三种方法在HTML中使用CSS样式:
内联样式表:CSS代码写在现有的HTML标签中,直接使用style属性改变样式。
案例1:内联式设置
内容
嵌入式样式表:CSS样式代码写在标签之间,表示可以文档通用,一般情况下CSS写在之间。
案例2:嵌入式设置
div{
background-color:red;
color:white;
}
外部样式表:CSS代码写在一个单独的外部文件里面,这个CSS样式文件以“.CSS“为扩展名,在内使用标记来将css样式文件链接到HTML文件。
案例3:外部样式表
因为head优先级高于body,如果是相同的属性,可以使用嵌入式,如果是特殊要求的,可以使用内联式。
2、CSS选择器:
选择器通常是需要改变样式的HTML元素,每条声明由一个属性和一个值组成。包含以下几种类型:
标签选择器,比如div,找到所有的div标签,然后赋值样式,也可以用p、dr等
ID选择器,以#开始,后加名称,如"#i1",ID标签不能重复
class选择器,以点开始,后加名称,如“.c1”
多级选择器,以.class名称+空格+标签+空格...+.+子class名称
案例4:选择器
/*标签选择器*/
div{
color:red;
}
/*ID选择器*/
#i1{
font-size:56px;
color:green;
}
/*class选择器*/
.c1{
background-color:yellow;
}
/*多级选择器,可以使用--.c2 div p a--*/
.c1 div p .c2{
background-color:green;
}
内容
id选择器
class选择器1
class选择器2
class选择器3
oo
多级标签
效果:
属性选择器,跟随class,.class[属性名='属性值'];选取class选择器下的属性
案例5:属性选择器
.sp[qita='a']{
color:red;
}
1
2
3
4
效果:
3、CSS的属性值:
4-1 颜色属性color来定义文本:
颜色名称,如color:green
十六进制,如color:#ff6600
简写方式,如color:#f60
RGB方式,如rgb(255,255,255),
RGBA方式,如color:rgba(255,255,255,1)
4-2 字体属性
字体大小:font-size:14px
字体:font-family:微软雅黑,serif
字体加粗,font-weight,定义字体加粗,可以使用名称,如normal、bold(粗)、bolder(更粗)、lighter(更细),还可以使用数字,700=bold
4-3 背景属性
主要包括背景颜色、背景图片、背景重复、背景位置。
背景颜色:background-color用来定义背景的颜色
背景图片:background-image,none表示不适用
背景重复:background-repeat,no-repeat,repeat-x在x轴上重复,repeat-y在y轴上重复。
背景位置:background-position。横向为left、right、center;纵向top、center、bottom;
4-4 文本属性
可以用文本属性设置行高、缩进和字符间距,
text-align 设置文本对齐方式,属性值可以取left、center、right
line-height 设置文本行高,属性值可以是具体的数值
text-indent 代表首行缩进
letter-spacing设置字符间距,比如letter-spacing:3px;
4-5:边距:
(Box Model) 规定了元素框处理元素内容、内边距、边框和外边距 的方式:
案例6:边框,去空格
效果:
4-6 position 属性
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
fixed:按窗口固定,比如网页的头部图片固定
absolute:找上级position,会根据块级框定位,滚动时会移动
relative:单独的是没有作用的,需要和absolute结合使用,absolute相对于relative去定位
案例7:位置
其他
返回底部
返回顶部
返回中部
4-7 漂浮 属性
案例8:漂浮,一列显示
aa
bb
aa
bb
效果:
4-8 display属性
display:block
block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。
display:inline
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
display:inline-block
将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。
4-9 其他案例:
案例9:小尖角的实现,主要是transparent的应用
.icon{
display:inline-block;
border-top:15px solid green;
border-bottom:15px solid red;
border-left:15px solid transparent;
border-right:15px solid transparent;
}
效果:
案例10:关于布局的实现,上侧固定标题栏,左侧目录栏,右侧内容栏
/*去body空格*/
body{
margin:0;
}
/*header格式*/
.pg-header{
height:48px;
background-color:rgb(22,121,81);
}
/*body左边栏目*/
.pg-body .body-menu{
position:absolute;
top:48px;
left:0;
bottom:0;
width:200px;
background-color:rgb(140,199,159);
}
/*内容栏目*/
.pg-body .body-content{
position:absolute;
top:48px;
left:210px;
right:0;
bottom:0;
background-color:rgb(76,172,199);
overflow:auto;/*如果超出内容则自动添加滚动条*/
}
效果:
案例11:z-index类图层作用
.model{
width:500px;
height:300px;
background-color:green;
position:fixed;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-150px;
z-index:10;
}
.shadow{
position:fixed;
left:0;
right:0;
bottom:0;
top:0;
background-color:black;
opacity:0.4;
z-index:9;
}
领取专属 10元无门槛券
私享最新 技术干货