CSS基础之HTMLCSS学习

cssstatement优秀程序员web前端培训分享HTMLCSS之CSS基础学习，CSS（cascadingstylesheet）中文翻译为层叠样式表，用于控制网页在表现中的样式WEB标准的标准语言，在网页中主要控制网页信息的显示。目前推荐遵循的是W3C发布的CSS3.0版本；一种用于表示样式文件（如HTML或XHTML）的计算机语言。1998年5月21日，w3C正式推出css2.0HTML+CSS，弥补html语言的不足，减少页面代码，提高访问速度；代码减少，页面文件会更小，网络带宽会更少，客户端打开速度会更快。速度越快，用户体验就会越好。结构清晰，有利于SEO优化和搜索引擎优化。缩短改版时间，对网站改造有很好的支持。CSS语法由两部分组成：选择器和语句。声明包括：属性和属性值选择器{attribute：属性值；attribute:属性值}选择器描述:CSS选择器（selector）选择器表示定义样式的对象（标签名），可以是元素本身，也可以是元素的类型，也可以是指定名称的元素。简单的说，就是给对应的元素起一个名字。1）每个CSS样式由选择器和声明两部分组成，声明又分为属性和属性值；2）属性必须放在花括号中，属性和属性值用冒号连接。3)每条语句以分号结尾。4）当一个属性有多个属性值时，属性值之间用空格隔开，不分顺序。5）在写样式的过程中，空格、换行等操作不影响属性的显示。CSS样式表1：内部样式表语法：cssstatement注意：使用style标签创建样式时，标签最好写在;2：外部样式（1）语法：注意：当使用link元素导入外部样式时sheet，你需要把这个元素写在文档的头部，在和之间。rel：用于定义文档关联，代表关联的样式表；type：定义文档类型；(2)、导入外部样式表@importurl("目标文件的路径和全名");说明：@和import之间没有空格，url和括号之间没有空格；括号内加引号，结尾必须以分号结束；link@import区别一：老祖宗的区别：link是一个XHTML标签，而@import完全是CSS提供的一种方式。除了加载CSS，link标签还可以做很多其他的事情，比如定义RSS，定义rel连接属性等。@import只能加载CSS。区别二：加载顺序的区别：当一个页面被加载时（即浏览者浏览时），链接引用的CSS会同时加载，而@import引用的CSS会等待直到页面被完全下载后才被加载。所以有时候在浏览@import加载CSS的页面时，一开始是没有样式的。区别三：兼容性的区别。:@import是CSS2.1提出的，旧浏览器不支持。@import只能被IE5及以上识别，但是link标签没有这个问题。区别四：使用dom控制样式时的区别：使用javascript控制dom改变样式时，只能使用link标签，因为@import是dom不可控的。3：内联样式表CSS样式表的权重关系1）内联样式表的优先级最高2）内部样式表和外部样式表的优先级和书写顺序相关，并且后面写的优先级更高。3）还与样式表中的优先级和书写顺序有关，越靠后的优先级越高。(只涵盖相同属性的样式)CSS选择器CSS基础选择器：类型选择器、id选择器、类选择器(classselector)css选择器分类：类型选择器(markselector)类选择器(classselector)ID选择器(idselector))伪类选择器通配符(*)设置全局属性组选择器(集合选择器)包含选择器(后代选择器)属性选择器伪对象选择器类型选择类型选择器是html语言中直接根据标签定义语法：标签名{attribute:属性值;}a)类型选择器是使用文档对象html中的标签作为选择器，即使用结构体中的元素名称作为选择器符号。比如body,div,p,img,em,strong,span...等等。b)所有的页面元素都可以作为选择器；用法：(1)如果要改变元素的默认样式，可以使用类型选择器；（例如：改变一个p段落的样式）（2）当统一文档显示一个元素的效果时，可以使用类型选择器；（例如：改变文档中所有p段的样式）类（class）选择器语法：.classname{attribute:属性值;}用法：类选择器更适合定义一个Class样式；(1)当我们使用类选择器时，首先要为每个元素定义一个类名，(2)类选择器的语法格式：如：