1.什么是CSS?级联样式表。HTML负责结构,CSS美化HTML,添加各种样式如:宽高间隔,大小颜色,动画等装饰效果2.导入方式有3种:内联样式:写在label元素中,在style=""的形式,优先级最高(不推荐,显得太复杂)内联样式:写在这对标签中,如果样式少,直接写在这里outlinestyle:写在.css文件中,然后使用导入样式(推荐,但也有@import)link和@import移动方式的区别:1.loadingsub的限制-resourceslink是XHTML标签,除了加载css文件外,还可以加载其他东西比如RSS,比如加载模板而@import只能加载css文件2.加载方式link导入css文件,同时加载页面加载时,即同步加载@import引用css文件,需要等到页面完全加载完毕后,再加载css文件,即异步加载3、兼容性链接是一个XTHML标签,有没有兼容性问题@import是css2.1提出的,不支持低版本4.改变样式link标签是一个DOM元素,支持用JS控制DOM和修改样式。@import是方法,不支持控制DOM和修改样式。3、CSS选择器CSS选择器分为简单选择器和复合选择器简单选择器简单选择器一般包括:标签选择器、类选择器、id选择器、通配符选择器标签选择器:使用div、span、p等标签作为选择器类选择器:.colorRed{},为给标签添加这个类添加样式id选择器:#colorRed{},带有样式id的标签会有样式(唯一)通配符选择器:*{},作用范围为整个页面,一般用作CSS初始化注意:类选择器可以用在不同的标签上;类名就像人的名字,多个人可以使用同一个名字,所以类选择器可以用在多个标签上。ID选择器一般用在唯一标签上;id就像一个人的身份证号,每个人都有一个唯一的身份证号,所以每个标签的id也是唯一的,所以一个id选择器只对一个标签使用所以,类选择器和id选择器最大的区别在于使用次数。复合选择器基于简单选择器。它由两个或多个选择器组成。1.后代选择器ulli{...}由空格分隔的两个元素,也就是说ul标签中所有li标签中的第二个可以是子元素也可以是孙元素,只要在ul中就可以层层嵌套,多个简单选择器2,子选择器div>p{...}选择距离div最近的一级子元素p,孙元素p甚至更远的都不会被选择注意:p必须是parentchild3.联合选择器p,a{...}所谓union就是两个并列,也就是p和a都加上这个样式。两个标签之间用逗号(,)隔开,可以理解为同4.伪类选择器伪类选择器是在某个选择器Effect上加一个特殊的选择器,它的格式是加一个冒号(:)选择器之后的链接伪类选择器a:link{...}/*选择所有未访问过的链接*/a:visited{...}/*选择所有已经访问过的链接*/a:hover{...}/*选择鼠标指针所在的链接*/a:active{...}/*选择活动链接(鼠标按下不弹出链接)*/focus伪类选择器这个选择器用于获得焦点的表单元素,也用于一般的表单元素/*修改表单获得焦点时的颜色*/input:focus{color:blue}在weightCSS中使用较少优先级为as如下:!important>inlinestylestyle>id(weight100)>class(weight10)>label(weight1)4、font、文本属性fontstyle1、font-family:定义文本的字体系列commonFontfamily:`body{font-family:Arial,'MicrosoftYaHei',Tahoma,'HiraginoSansGB';}`2.font-size:字体大小px像素是我们最常用的单位,em,remem:相对于容器的字体大小,会继承父元素的字体大小rem:相对于根元素(通常是HTML元素)的字体大小,谷歌浏览器默认为16px3,font-weight:字体粗细/*bold*/p{font-weight:bold}默认值:normal,等于400bold:粗体,等于700推荐数字,数字不加单位4、font-style:文字样式p{font-size:normal}normal:默认值,浏览器会显示Displaythestandardfontitalic:显示斜体,平时用得少,改为将斜体标签(em,i)改为不倾斜5、font:font复合属性p{font:font-stylefont-sizefont-weightfont-family;}注意:文本属性的顺序不可替换1.文本颜色color:定义文本颜色p{color:red;}颜色属性值表示:预定义颜色值:red、blue等十六进制:#333333、#ffffff等RGB:rgb(255,0,0)2.对齐文本text-align:用于设置水平对齐方式元素中文本内容的排列div{text-align:center;}left:左对齐right:右对齐center:居中对齐3.装饰性文本text-decration:给文本添加的装饰,如:上划线、下划线、删除线a{text-decration:none}none:默认值,即没有装饰线underline:下划线,链接a会有自己的下划线overline:overlineline-through:常用删除线text-decration:none去除链接本身underline4、文字缩进text-indent:用于指定第一行文字的缩进,常用Paragraphheaderp{text-indent:32px;}默认一个单词缩进16px,两个单词缩进32px。也可以使用2em,relativeindent5,line-height:用来设置行高p{line-height:normal}p{line-height:26px}p{line-height:1.5}p{line-height:1.5em}p{line-height:150%}normal:默认值26px:字体高度为16px,则行间距为10,上下5px数字:行高为数字*字体大小,所以1.5为29pxem:浏览器font默认是16px,那么1.5em就是29px,- 比较特殊,它是用来放文本的,里面不能放块级元素,特别是div