CSS的概念
层叠样式表
主要控制网页的样式和布局
能够使样式、布局和标记能够分离的语言
CSS的基本语法
选择器{
属性1:值1;
属性2:值2;
....
属性n:值n;
}
注意:
1、每个属性/值一对的后面加上分号
2、web浏览器将会忽略空格和回车
CSS颜色的四种表示方法
color:颜色值,设置字体的颜色
1)、16进制的数字。
2)、英文单词
3)、rgb颜色,格式为:rgb(红,绿,蓝);
4)、rgba颜色,格式:rgba(红,绿,蓝,透明度);
透明度:0~1之间,0为完全透明
CSS的使用方式
内联方式
在HTML的body标签中使用属性来设置CSS样式
格式:
<标签名style="属性1:值1;属性2:值2...."></标签名>
特点:仅作用于本标签
内嵌方式
在head标签中使用<style>标签来设置CSS样式
特点:作用于当前整个页面
格式:
<style>
选择器{
属性1:值1;
属性2:值2;
.........
}
</style>
外部导入方式
格式:
<linkhref=
"文件名.css"type="text/css"rel="stylesheet"/>
href,哪个CSS样式文件。
type,text/css这是一个css文件。
rel,样式表。
特点:
如果整个网站都引入这个CSS文件,文件中的CSS将可以作用到整个网站的页面中。
注意:
1、以上三种方式,当样式冲突时,采用就近原则。如果没有属性冲突的时候将会叠加。
CSS的注释符:
/*注释的内容*/
选择器
HTML选择器(标签选择器)
用HTML标签作为选择器的名称来选择
ID选择器
在HTML标签中定义一个ID属性,然后在CSS中使用#ID属性对应的值
作为选择器来使用。
方式:#ID值
class选择器
在HTML标签中定义一个class属性,然后在css中使用.class属性对应的值来选择。
注意事项:
1、ID选择器在规范中一个ID的值只能在一个页面中出现一次。
2、类选择器,class选择器,因为,他们属于一类。一类中可以包含多个。
3、一个标签可以属于多个类:使用的时候:class="类1类2"
.类名
组合选择器
将所有的选择器一并写出来,一起选择。
选择器1,选择器2,选择器3
层次选择器
后代选择器:EF
选择匹配的F元素,且匹配的F元素被包含在E元素内。
子选择器:E>F
选择匹配的F元素,且匹配的F元素是E元素的子元素。
(这俩是兄弟,必须得是同辈的)
相邻兄弟选择器:E+F
选择匹配的F元素,且匹配的F元素仅位于匹配的E元素的后面。
通用选择器:E~F
选择匹配的F元素,且位于匹配的E元素后面的所有的F元素。
伪类选择器
伪:不存在于HTML中,只有当用户和网站交互时才会体现出来。
E:link
匹配的E元素,且E元素未被访问过。
E:visited
匹配的E元素,且已经被访问过。
E:hover
匹配的E元素,且用户鼠标悬停在上面。
E:active
匹配的E元素,用户点击的那一刹那。
注意:必须遵守一个“爱恨原则”,LoVe/Hate(?)
Link-->visited->hover->active
E:focus:
选择匹配的E元素,当E元素获得焦点时。
E:target:
锚点指向的时候会触发。
background-color:背景颜色
结构性伪类选择器
E:first-child:
选择父元素的第一个子元素且元素为E的元素。
E:last-child:
选择父元素的最后一个子元素且元素为E的元素。
E:nth-child(n):
选择父元素的第n个子元素且元素为E的元素。
n,表示一个整数,也可以是关键字odd奇数,even偶数。
E:first-of-type:
选择父元素中第一个E元素。
E:last-of-type:
选择父元素最后一个E元素
E:nth-of-type(n):
选择父元素的第n个E元素。
属性选择器
E[attr]:
选择匹配具有attr属性的E元素。
E[attr='val']:
选择匹配具有attr属性的E元素,且attr属性的值为val
E[attr*='val']:
选择匹配具有attr属性的E元素,且attr属性的值的任意位置出现了val
E[attr^='val']:
选择匹配具有attr属性的E元素,且attr属性的值以val开始。
E[attr$='val']:
选择匹配具有attr属性的E元素,且attr属性的值以val结束。
选择器优先级
计算优先级:
1、一个标签选择器1分
2、一个类选择器10分
3、一个ID选择器100分
4、一个内联方式1000分
5、一个伪类选择器10分
6、属性选择器10分
7、层次选择器,先拆开然后进行相加。
注意事项:
1、数值越大,权重越高。
2、权重值相同时候最后一个样式胜出。
3、如果要忽略权重值时,需要在属性后面加上!important(一般不用)。
字体属性
font-family
指定想要的字体。
格式:font-family:字体1,字体2,字体3....
注意:
1、使用的是客户端的字体。
2、如果客户端没有这个字体,将会使用浏览器默认的字体。
3、可以使用多个字体,方便客户端无此字体的话可以直至找到想要的字体,如果第一个没有找到就看第二个能不能找到,如果第二个找到了那么就直接使用不再向下寻找。
存储字体的位置
C:\Windows\Fonts中存储的是你的所有字体。
font-size
设置字体的大小
px:像素值。
百分比:按照基准文本尺寸的百分比来进行计算。62.5%=10px
em:按照基准尺寸来进行计算。1em=16px;
font-style
字体风格
格式:
font-style:值
值:
normal,默认值
italic,斜体
font-weight
定义字体粗细
格式:
font-weight:粗细
值:
normal,默认值
bold,定义粗体字体。
line-height
定义行高
格式:line-height:值
值:
px
em
%
数值,没有单位,表示以数值乘以文本的大小来计算。
font-size
font-family
font-style
font-weight
简写方式:
font:styleweightsize/line-heightfamily;
注意:
1、必须指定字体大小和字体的系列
2、注意顺序。
文本属性
color
设定文字颜色
格式:color:值
值:
单词
16进制
rgb
rgba
text-transform
定义字母大小写
格式:text-transform:值
值:
none,默认,标准
capitalize,每个单词以大写字母开头
uppercase,都大写
lowercase,都小写
text-decoration
修饰文本
格式:text-decoration:修饰值
值:
none,标准文本
underline,文本的下划线
overline,上划线
line-through,贯穿线
注意:可以使用多个值:text-decoration:underlineoverlineline-through;
text-shadow
文本阴影
格式:text-shadow:左右阴影上下阴影模糊度颜色
注意:
1、左右阴影为负数放在文本左侧,正数放在文本右侧。
2、上下阴影为负数表示放在文本上,正数文本下。
3、模糊度值越大表示越模糊,0px表示完全不模糊
4、IE9之前不支持。
text-align
对齐文本
格式:text-align:值
值:
left:默认的,左边。
right:右边
center:居中。
注意:只能用于块状元素。
text-indent
首行文本缩进
格式:
text-indent:值
值:
px
em
百分比,基于父元素的宽度的百分比来进行缩进。
width:宽度
height:高度
border:1pxsolidgreen;
overflow
规定内容溢出元素框时候发生的事情
格式:overflow:值
值:
visible,默认值,内容不会更改。
hidden,超出的内容被隐藏。
scroll,带滚动条。
word-break
用于设置对象内文本的换行行为。
格式:word-break:值
值:
normal,默认值,根据语言自己的规则确定换行方式。
break-all:自动进行换行。
列表属性
list-style-type
列表项的标志。
格式:list-style-type:值
值:
none,无标记
list-style-image
使用图片作为列表项的标志。
格式:
list-style-image:url('图像地址');
list-style-position
设置列表项标记的位置。
格式:list-style-position:值
值:
inside,放置在文本以内。
outside,默认值,放置在文本以外。
简写:
list-style:list-style-imagelist-style-typelist-style-position
注意:如果有image会将type的值给覆盖掉。
表格选项
border-collapse
设置表格的边框是否显示为单一边框。
格式:border-collapse:值
值:
separate,默认值,边框会被分开
collapse,边框合并为一个单一的边框。
注意:怎么使用通常先给table标签设置border-collapse,然后给table、th、td设置border边框属性:border:1pxsolidred;
border-spacing
设置相邻单元格之间的距离
格式:border-spacing:值
值:
一个值,表示水平和垂直距离。
两个值,第一个值表示水平距离,第二个值表示垂直距离。
注意:border-spacing只能用在border-collapse为默认值的时候用。
caption-side
设置表格标题的位置
格式:caption-side:值
值:
top:上,默认值
bottom:下
left,左
right,右
vertical-align
垂直对齐方式:
格式:vertical-align:值
值:
top,上对齐
middle,垂直居中,默认值
bottom,底端对齐。
盒子模型
盒子模型的概念
浏览器把每个元素都做一个盒子模型,任何的标签都是里面装有东西的盒子。包括文本、包括图像。
盒子模型的组成
每个盒子都是由宽度、高度、内边距、边框、外边距组成。
width:
定义元素内容的宽度。
格式:width:值
值:
auto,浏览器会自动的计算出实际的宽度。
px
%,包含他的块级元素(父元素的百分比宽度)。
注意:行内元素标签会忽略width属性
height:
定义元素内容的高度。
格式:height:值
值:
auto,默认
px
%,包含他的块级元素(父元素的百分比高度)。
注意:行内元素标签也会忽略height属性
padding:
内边距,定义内边距距离
格式:
1、padding-top:设置上内边距
2、padding-right:右内边距
3、padding-bottom:下内边距
4、padding-left:左内边距
简写方式:
padding:上内边距右内边距下内边距左内边距
4值:上-》右-》下-》左
3值:上-》右左-》下
2值:上下-》右左
1值:上右下左
采用“顺时针”原则
border:
是围绕元素内容和内边距的一条或多条线
border-style:
定义了边框的样式。
格式:
border-top-style:上边框样式
border-right-style:右边框
border-bottom-style:下边框
border-left-style:左边框
值:
none,无边框
border-style:顺时针原则
4值:上-》右-》下-》左
3值:上-》右左-》下
2值:上下-》右左
1值:上右下左
border-width:
定义边框的宽度
格式:
border-top-width:上边框宽度
border-right-width:右边框
border-bottom-width:下边框
border-left-width:左边框
简写:border-width:
4值:上-》右-》下-》左
3值:上-》右左-》下
2值:上下-》右左
1值:上右下左
border-color:
定义边框的颜色
格式:
border-top-color:上边框颜色
border-right-color:右边框
border-bottom-color:下边框
border-left-color:左边框
简写:border-color:
4值:上-》右-》下-》左
3值:上-》右左-》下
2值:上下-》右左
1值:上右下左
颜色:
颜色名
rgb
rgba
十六进制
transparent:
透明颜色。默认值
border:宽度样式颜色;
border-top:
border-right:
border-bottom:
border-left:
border-radius:
边框圆角
格式:border-radius:值
值:
1个值:左上、右上、右下、左下
2个值:左上、右下-》右上、左下
3个值:左上-》右上、左下-》右下
4个值:左上-》右上-》右下-》左下
注意:
img标签是特殊的行内元素标签。它能够应用width和height并且多个img不会产生换行。
box-shadow:
盒子阴影
格式:box-shadow:
水平阴影的位置垂直阴影的位置模糊度阴影的尺寸
阴影的颜色阴影的类型
值:
水平阴影的位置:正值右边,负值到左边。
垂直阴影的位置:正值下边,负值到上边。
阴影的类型:不填的时候为外阴影,inset表示内阴影。
background:
背景属性
background-color:
设置元素的背景颜色
格式:background-color:颜色值
注意:使用背景的时候会连同边框一起覆盖。
opacity:
透明属性
格式:opacity:值
值:默认为1,可以使用0~1之间的任意浮点数,值为1时,完全不透明,为0的时候完全透明。
rgba和opacity的区别:
1、rgba是用来对元素设置透明度,针对元素的背景色、文字颜色、边框颜色。
2、opacity,只能给整个元素背景设置一个透明度,并且其透明度会直接继承给后代元素。
background-image:
设置元素的背景图片。
格式:background-image:url('图像地址');
background-repeat:
设置是否及如何重复背景图像
格式:background-repeat:值
值:
repeat:默认值,背景图像将在垂直方向和水平方向重复。
repeat-x:水平方向重复
repeat-y:垂直方向重复
no-repeat:不重复。
background-attachment:
设置背景图像是否固定或随着页面的其他部分滚动
格式:background-attachment:值
值:
scroll,默认值。背景图像随着页面其余部分的滚动而滚动。
fixed,当页面的其余部分滚动时,背景图像不会移动。
background-position:
设置背景图像的开始位置,默认的时候是从左上角开始。
值:
Xpx,Ypx,第一个值是水平位置,第二个值是垂直位置。
0px0px
简写方式:
background:colorimagerepeatattachment;
margin:
设置元素的外边距
1、margin-top:
2、margin-right:
3、margin-bottom:
4、margin-left:
简写格式:margin:值;
4值:上-》右-》下-》左
3值:上-》右左-》下
2值:上下-》右左
1值:上右下左
box-sizing:
规定两个并排的带边框的框,以特定的方式匹配某个区域内的特定元素。
格式:box-sizing:值;
值:
content-box:默认的时候width和height中不包括padding
border-box:widht和height中。包括边框和padding
供应商前缀:
各个浏览器对新属性的支持程度不同,有些还在测试阶段。所以每个浏览器厂商使用特定的前缀来进行标记。
firfox:-moz-
safari:-webkit-
opera:-o-
ie:-ms-MicroSoft
浮动与页面设计规范指导
display
改变元素的类型:
值:
none,该元素不显示。
block,显示为块级元素。
inline,行内元素。
float
浮动:
定义元素往哪个方向浮动。
格式:float:值;
值:
left,元素向左浮动,元素下的内容移动到元素的右边。
right,元素向右移动,元素的内容移动到元素的左边。
none,无浮动。
注意事项:
1、由于浮动框不在普通的文档流中,所以对于普通的文档流就像不存在一样。
2、如果父元素包含浮动元素,并且父元素没有设定高度值,那么父元素的高度将会被压塌。
3、任何一个元素设置为浮动都会自动的被设置为块状元素。
clear属性
清除哪一侧的浮动:
格式:clear:值
值:
none,允许浮动元素出现在两侧。
left,左侧不允许出现浮动元素。
right,右侧不允许出现浮动元素
both,两侧都不允许出现浮动元素。
position
规定元素的定位类型:
格式:position:值
值:
static,默认值,没有定位,按照文档流自己的位置来进行处理。
absolute,来生成绝对定位,网页上面的其他正常的元素不知道他的存在。设定为position为absolute时自动变为块状元素。
relative,生成相对定位,相对于它在HTML流中的本来的位置来进行定位。
fixed,生成绝对定位的元素,并且元素的位置永远按照浏览器窗口的位置进行定位。
注意事项:
1、absolute靠body的左上角定位。
2、relative靠元素的本来的位置来进行定位。
3、如果一个标签的位置是绝对定位的,且它又不存在于其他任何设定了absolute、relative、fixed定位的标签里面。他就是相对于浏览器的body进行定位。
4、如果一个标签的位置是绝对定位的,且它在另外一个设定了absolute、relative、fixed定位的标签内,那么他就是相对于它父类的标签的位置来进行定位。
设定元素的位置
1、top,规定元素的上边缘
2、bottom,规定元素的下边缘
3、left,规定元素的左边缘
4、right,规定元素的右边缘
px
%,设置以包含元素的宽度的百分比计算。
注意:postion为static时不起作用。
z-index
设置元素的堆叠顺序。
格式:z-index:数值
注意:
1、z-index仅能在定位的元素上有效。
2、值越大,元素就会出现在越顶部的地方。默认的时候z-index为0
常用的套路性问题
居中
1)、行内元素居中:设置父级元素属性text-align:center;
2)、块级元素居中:设置元素margin:0auto;
3)、块级元素中的内容垂直居中:只有一行的情况下line-heihgt等于height
4)、如果一个块级别元素的内容垂直居中并且有多行,那么这个时候将父元素设置为display:table-cell,然后使用vertical-align:middle
5)、块状元素垂直居中:
步骤
1、设置父元素为position:relative
2、设置子元素position:absolute
3、设置子元素top:50%;
4、设置子元素上边距为margin-top:负子元素高度的一半
书写顺序
注释的写法:
/*头部开始*/
头部的修饰内容
/*头部结束*/
位置属性
position\top\right\left\bottom\display\float\z-index\margin
大小属性
width、height、padding、margin
文字系列
font\line-height\letter-spacing\color\text-align
背景
background\border