LearningHTML-Chapter2CSSBasics
时间：2023-04-02 22:25:23
HTML
/*cssstatement*/欢迎加入前端交流群获取视频资料和前端学习资料：749539640Chapter2CSSBasics一、CSS层叠样式表简介中文翻译层叠样式表，性能标准在WEB标准语言中，性能标准语言主要控制网页信息在网页中的显示，简单来说就是如何修改网页信息的显示样式。目前推荐遵循W3C发布的CSS3.0，这是一种用于表示XHTML或XML等样式文件的计算机语言。CSS2.0于1998年5月21日由w3C正式推出二、样式的建立：内部样式外部样式和内联样式1、内部样式：语法：/*cssstatement*/注意：使用style标签创建样式时，最好把标签写进去；2、外部样式语法：3、内联样式（interlinestyle、inlinestyle、embeddedstyle）语法：Thisisapieceoftext
4.@import方法引入style文件语法：
@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语法选择器{attribute：属性值；attribute:属性值；}div{height:4px;}注：1）每个CSS样式由两部分组成，即选择器和声明，声明分为属性和属性值；2）Attributes必须放在花括号中，Attributes和属性值用冒号连接。3)每条语句以分号结尾。4）当一个属性有多个属性值时，属性值和属性值不分先后。5）在写样式的过程中，空格、换行等操作不影响属性的显示。4、样式表的优先级内联样式表的优先级最高。内部样式表与外部样式表的优先级和书写顺序有关。具有高优先级。5.CSS选择器（selector）选择器表示定义样式的对象，可以是元素本身，也可以是元素的类型或指定名称的元素。常用的选择器大概有十种，id选择器、类选择器、通配符、组选择器、包含选择器、伪类选择器1.元素选择器/类型选择器（elementselector）语法：元素名{属性：属性值;}div{padding:0;}解释：a)元素选择器以文档语言对象类型为选择器，即以结构中的元素名称为选择器。比如body,div,p,img,em,strong,span...等等。b)所有的页面元素都可以作为选择器；用法：1）如果要改变元素的默认样式，可以使用类型选择器；2）当统一一个元素在文档中的显示效果时，可以使用类型选择2.id选择器语法：#idname{attribute:属性值;}#top{padding:0;}说明：1）当我们使用id选择器，我们应该为每个元素定义一个id属性，如：2）id选择器的语法格式为“#”加上自定义的id名称如：#box{width:300px;height:300px;}3）命名时一定要选择英文名称，不能使用关键字：（所有标签和属性都是关键字）如：head标签4）一个id名称只能对应一个特定的文档中的元素对象，因为id只能定义页面中唯一的元素对象。5）最大的用途：创建网页的外围结构。3.类选择器语法：.classname{attribute:属性值;}.top{padding:0;}说明：1）当我们使用类选择器时，首先要为每个元素定义一个类名，2）语法类选择器的格式为："eg:"用法：类选择器更适合定义一类样式；4.*通配符语法：*{attribute:attributevalue;}*{padding:0;margin:0;}说明：通配符选择符写成“*”，表示所有元素。用法：常用于重置样式。5.组选择器语法：选择器1、选择器2、选择器3{attribute:属性值;} .box,.name{padding:0;}注意：当有多个选择器应用相同的样式时，可以通过“,”分隔将选择器组合成一个组。6.包含选择器（descendantselector）语法：selector1selector2{attribute:属性值;}
