CSS:cascading style sheets层叠样式表,用于美化页面 css的三种表现形式: 1、行内样式(内嵌样式):结构的内部,即写在标签内的样式;写在标签的开始部分内部,style属性当中; 2、内部样式(内联样式):写在HTML页面内部,存放于head标记当中,样式写在style标记内; 3、外部样式(外联样式):写在css文件内; color:设置文本颜色; 属性值:1、表示颜色的英文单词。 2、十六进制表示法:#ff0000; 0表示颜色的最低值,f表示颜色的最大值; 3、rgb表示法:color:rgb(0,0,0);取值0-255; 4、rgba表示法: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给标签命名类名; 4、id选择器:给某一个标签添加样式;要先取一个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、百分比(继承)、em、rem; 高度:height;单位px、百分比(继承)、em、rem; 背景--背景色:background-color;颜色单词、十六进制表示法、rgb、rgba; 背景图片:background-image:url(路径); 背景图片重复:background-repeat;no-repeat(不重复)、repeat-x(水平重复)、repeat-y(垂直重复)、repeat(水平垂直重复、默认); 背景定位:background-position:left、center、right、top、center、bottom、具体的数值(单位px) 背景连写:background:背景颜色 背景图片 背景图片重复 背景定位;可以只单写某一个属性; 2、填充:上填充--padding-top 下填充--padding-bottom 左填充--padding-left 右填充--padding-right 填充连写--padding:1个值--》上、右、下、左全部是这个值; 2个值--》第一个值表示上下,第二个值表示左右; 3个值--》第一个值表示上,第二个值表示左右,第三个值表示下; 4个值--》依次为上、右、下、左;(顺时针方向) 注意:padding会改变盒子的大小,要想在添加padding的同时保持盒子的大小不变,应将padding的值从盒子的大小中减去; 3、边框:边框粗细--border-width 边框颜色--border-color 边框样式--border-style:solid(实线)、dashed(虚线)、dotted(点线) 边框连写--border:width style color; 可以单独只写某一边的边框--border-top、border-bottom、border-left、border-right 注意:边框的对齐方式为向外对齐,所以边框会改变盒子大小; 4、外边距:上边距--margin-top 下边距--margin-bottom 左边距--margin-left 右边距--margin-right 外边距连写--margin:1个值 2个值 3个值 4个值(参照padding); 默认标准流布局下,父子级上边距塌陷问题解决办法 1、使用padding; 2、给父级使用border; 3、给父级添加属性--overflow:hidden; 4、浮动; 5、定位; 外边距塌陷:在垂直方向上上下边距会合并,取最大值; 盒子水平居中:margin:0 auto; 样式的继承:width、color、font-、text-、line-height都可以被继承; 文本修饰:text-decoration--underline;下划线 line-through;删除线 none;无/没有修饰; 文本对齐:text-align--left;左对齐 center;居中对齐 right;右对齐 文本缩进:text-indent;指的是文本的首行缩进; 单位px、em; 行高:line-height--用于设置一行文本的高度,常用于设置一行文本在容器当中垂直居中; 单位:1、px; 2、百分比; 3、em; ; 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、给父级设置overflow:hidden; 3、使用伪元素after .clearfix:after { content:"";/*内容为空*/ height:0;/*高度为0*/ line-height:0;/*行高为0*/ display:block;/*块级元素*/ visibility:hide;/*隐藏*/ clear:both;/*清除浮动*/ } .clearfix { zoom:1;/*IE678*/ } 4、使用双伪元素after和before .clearfix:afer,.clearfix:before { content:""; display:table; clear:both; } .clearfix { zoom:1; } 列表样式:list-style 定位: 1、静态定位--static;按照标准文档流进行布局; 2、相对定位--relative;相对自身;以自身的坐上角(坐标点)为参考;会保留原来的位置不被其他元素侵占; 3、绝对定位--absolute;参考的是页面的左上角;绝对定位位置不会被保留; 如果父级有定位,则参考父级的坐标点;如果父级没有定位,则会一级一级向上查找,直到html标签,中途有定位就会参照这个定位元素的坐标点; 4、固定定位--fixed;相对于浏览器窗口的左上角;
|