Web前端好程序员分享CSS基础
时间：2023-04-05 22:16:48
HTML5
/cssstatement/程序员好Web前端分享CSS基础学习目标1.CSS简介2.CSS语法3.样式创建4.两者介绍外部样式表的区别?5.样式表的优先级和范围?6．CSS选择器?7。选择器重量?8。浮动属性的简单应用?9．HTML、CSS注释一、CSS简介css：cascadingstylesheet英文名称：cascadingstylesheets，WEB标准中的性能标准语言，性能标准语言主要控制网页信息在网页中的显示，它简单来说就是如何修改网页信息的显示样式。目前推荐遵循的是W3C发布的CSS3.0，一种用于修改XHTML或XML等样式文件的计算机语言。CSS2.0于1998年5月21日由w3C正式推出2.CSS语法CSS语法：selector{attribute:attributevalue;attribute：属性值；}选择器表示定义样式的对象，可以是元素本身，也可以是元素的一种类型，也可以是指定名称的元素。Attribute：Attribute是指定元素的属性。它是CSS的核心。CSS2中有150多个属性值：属性值包括法定属性值和常用数值加单位。如25px，或颜色值等。注：1）每个CSS样式由选择器和声明两部分组成，声明分为属性和属性值；2）属性必须放在花括号中，属性和属性值用冒号连接。3)每条语句以分号结尾。4）当一个属性有多个属性值时，属性值和属性值不分先后。5）在写样式的过程中，空格、换行等操作不影响属性的显示。3、样式创建（内部样式表、外部样式表、内联样式表）A、内部样式表语法：/cssstatement/注意：使用style标签时创建样式，标签最好写在；B.外部样式*方法一：创建外部样式表：注意：使用link元素时引入外部样式表，元素需要写在文档的头部，即和之间。rel（关系）：用于定义文档关联，代表关联的样式表；type：定义文档类型；*方法二：导入外部样式表@importurl（目标文件的路径和文件全名）；注意：@和import之间没有空格,并且url和括号之间没有空格；结尾必须以分号结尾；C、行内样式(interlinestyle,inlinestyle,embeddedStyle,embeddedstyle)语法：范例：
4.两种导入外部样式表link和import的区别扩展知识点：link和import导入外部样式的区别：区别一：本质区别：link属于XHTML标签，而@import完全由CSSWay提供。区别二：加载顺序的区别：当一个页面被加载时（即浏览者浏览时），链接引用的CSS会同时加载，而@import引用的CSS会等待直到页面在加载之前完全下载。.所以有时候在浏览@import加载了CSS的页面时，会出现没有样式（也就是闪烁）的情况，在网速慢的时候还是比较明显的。区别三：兼容性的区别：@import是CSS2.1提出的，旧浏览器不支持。@import只能被IE5以上识别，但是link标签没有这个问题。区别四：使用dom（文档对象模型documentobjectmodel）控制样式时的区别：使用javascript控制dom改变样式时，只能使用link标签，因为@import是dom不可控的。五、样式表优先级A，内联样式表优先级最高B，内部样式表与外部样式表的优先级和书写顺序有关，后写优先级更高。C.作用域：内联样式的作用域最小，只能作用于当前元素，其次是内部样式表，作用于当前HTML文件，最后是外部样式表，作用于当前元素所有链接的HTML文件。
