A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

蠢蠢。

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© 蠢蠢。 初级黑马   /  2019-3-18 21:30  /  1030 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

CSS:cascading style sheets层叠样式表,用于美化页面
css的三种表现形式:
1、行内样式(内嵌样式):结构的内部,即写在标签内的样式;写在标签的开始部分内部,style属性当中;
2、内部样式(内联样式):写在HTML页面内部,存放于head标记当中,样式写在style标记内;
3、外部样式(外联样式):写在css文件内;
color:设置文本颜色;
属性值:1、表示颜色的英文单词
2、十六进制表示法:#ff0000
0表示颜色的最低值,f表示颜色的最大值;
3rgb表示法:colorrgb(0,0,0);取值0-255
4rgba表示法:color:rgba(0,0,0,0);前三个值的取值0-255,第四个值的取值0-1
a--alpha
font-family:设置字体格式;可以设置多个字体格式,之间用“,”隔开,字体格式用“”包含;
font-size:设置字体大小,单位像素(px);
font-style:设置字体样式
normal--正常的,没有任何样式;
italic--斜体字;只有字体本身有斜体才能倾斜,否则不能倾斜;
oblique--倾斜的;可以强行倾斜字体;
font-weight:设置字体字重,即字体的粗细;
100-900取整百,700相当于粗体(bold),900相当于更粗(bolder);
bold--粗体
bolder--比粗体更粗;
lighter--细体;
选择器:选择对应的标签,将样式给到对应的标签
1、标签选择器:给同一种标签添加样式;
2、通用选择器(通配符):给所有的标签添加样式;
代码:
3、类选择器:给同一类(同一个群体)标签添加样式;要先给同一类标签取一个名字;
属性--class给标签命名类名;
4id选择器:给某一个标签添加样式;要先取一个id
属性--id
5、后代选择器:选择的是某一个元素的后代元素;
6、子选择器:选择某个元素的直接后代;
7、并集选择器:将两个不相干的元素同时添加相同属性;
代码:
8、交集选择器:当标签和类名(ID名)都冲突的时候,使用交集选择器;
css三大特性:
1、继承:父级的样式会被子级继承;!important不会被继承;
2、层叠:当样式发生冲突的时候,样式会产生覆盖(层叠);
3、优先级:!important(最高级)>行内样式>id>>标签>*>继承;
同级样式遵循“就近原则”;就近指定是谁离内容进谁的优先级就高;
权重:标签选择器
类选择武器--10
id选择器--100
行内样式--1000
!important--1/0(无穷大)
数标签:先数id,比较完id再数类,比较完类再数标签;
盒子模型:
1、内容--宽度:width;单位px、百分比(继承)、emrem
高度:height;单位px、百分比(继承)、emrem
背景--背景色:background-color;颜色单词、十六进制表示法、rgbrgba
背景图片:background-image:url(路径)
背景图片重复:background-repeatno-repeat(不重复)repeat-x(水平重复)、repeat-y(垂直重复)、repeat(水平垂直重复、默认);
背景定位:background-positionleftcenterrighttopcenterbottom、具体的数值(单位px
背景连写:background:背景颜色 背景图片 背景图片重复 背景定位;可以只单写某一个属性;
2、填充:上填充--padding-top
下填充--padding-bottom
左填充--padding-left
右填充--padding-right
填充连写--padding1个值--》上、右、下、左全部是这个值;
2个值--》第一个值表示上下,第二个值表示左右;
3个值--》第一个值表示上,第二个值表示左右,第三个值表示下;
4个值--》依次为上、右、下、左;(顺时针方向)
注意:padding会改变盒子的大小,要想在添加padding的同时保持盒子的大小不变,应将padding的值从盒子的大小中减去;
3、边框:边框粗细--border-width
边框颜色--border-color
边框样式--border-stylesolid(实线)、dashed(虚线)、dotted(点线)
边框连写--borderwidth style color;
可以单独只写某一边的边框--border-topborder-bottomborder-leftborder-right
注意:边框的对齐方式为向外对齐,所以边框会改变盒子大小;
4、外边距:上边距--margin-top
下边距--margin-bottom
左边距--margin-left
右边距--margin-right
外边距连写--margin1个值 2个值 3个值 4个值(参照padding);
默认标准流布局下,父子级上边距塌陷问题解决办法
1、使用padding
2、给父级使用border
3、给父级添加属性--overflowhidden
4、浮动;
5、定位;
外边距塌陷:在垂直方向上上下边距会合并,取最大值;
盒子水平居中:margin0 auto
样式的继承:widthcolorfont-text-line-height都可以被继承;
文本修饰:text-decoration--underline;下划线
line-through;删除线
none;无/没有修饰;
文本对齐:text-align--left;左对齐
center;居中对齐
right;右对齐
文本缩进:text-indent;指的是文本的首行缩进;
单位pxem
行高:line-height--用于设置一行文本的高度,常用于设置一行文本在容器当中垂直居中;
单位:1px
2、百分比;
3em
b--在有继承的情况下:
i、父级的行高有单位em,则会先计算好行高,然后将行高的数值直接继承给子级,子级本身不会再计算行高;
ii、行高没有单位,则父级会直接将行高继承给子级,然后子级根据行高值自行计算行高;
font连写--font:样式/粗细 大小 格式;大小和格式必须都有,缺少任何一个都不行;
元素的显示方式:
1、块级--block;独占一行,支持宽高;
2、行内--inline;和其他行内元素在一行显示,不支持宽高;
3、行内块级--inline-block,既有行内元素特性,又有块级元素的特性;同样在一行中显示,并且支持宽高;
display:block/inline/inline-block
以上为默认标准流下的情况;
在有链接的情况下,a标记无法继承父级的color样式;
伪类选择器:
a:link--链接的原本的样式(没有访问过);一旦访问过后就失效;
a:hover--鼠标移入时的样式;
a:active--鼠标按下时的样式(鼠标没有松开);
a:viseted--链接访问过后的样式;
L--H--V--A
浮动:让默认(标准)文档流下的元素漂浮起来水平排列;
float--left左浮动;
right右浮动;
none不浮动;
浮动排列的顺序不会改变,默认时谁在第一个,浮动就会排在第一个;
浮动的影响:
1、行内元素浮动之后可以支持宽高;
2、文本会给浮动的元素让位;可以制作文本绕排的效果;
3、在父级没有给高度的情况下,子级浮动后父级会没有高度;
清除浮动:
1、在父级内容的最后添加一个空的div,添加clear属性;
clear--left清除左浮动;
right清除右浮动;
both清除所有(左/右)浮动;
clear是清除上一个元素带来的影响;
不推荐使用,因为会在页面上添加太多的无用标签,让页面的布局变得更复杂;
2、给父级设置overflowhidden
3、使用伪元素after
.clearfix:after {
content:"";/*内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*块级元素*/
visibility:hide;/*隐藏*/
clear:both;/*清除浮动*/
}
.clearfix {
zoom:1;/*IE678*/
}
4、使用双伪元素afterbefore
.clearfix:afer,.clearfix:before {
content:"";
display:table;
clear:both;
}
.clearfix {
zoom:1;
}
列表样式:list-style
定位:
1、静态定位--static;按照标准文档流进行布局;
2、相对定位--relative;相对自身;以自身的坐上角(坐标点)为参考;会保留原来的位置不被其他元素侵占;
3、绝对定位--absolute;参考的是页面的左上角;绝对定位位置不会被保留;
如果父级有定位,则参考父级的坐标点;如果父级没有定位,则会一级一级向上查找,直到html标签,中途有定位就会参照这个定位元素的坐标点;
4、固定定位--fixed;相对于浏览器窗口的左上角;

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马