css基础一

css(层叠样式表) Cascading Style Sheets
样式定义如何显示html,样式通常存储在样式表中,把样式添加到HTML4.0中,是为解决内容和表现的分离
外部样式表 1.能提高效率(能够同时控制多重页面的样式和布局) 2 通常存储在css中 多个样式可以层叠为
样式解决了一个普遍的问题(解决了定义文档内容和表现层的站点模糊)
原HTML的意义是定义文档内容,同时布局是由浏览器完成,不使用任何格式化标签
由于其中两个主流浏览器将很多表现层的标签,添加到HTML中,导致HTML的定义文档内容清晰地独立于文档表现层站点越来越困难
所以万维网联盟(W3C),在HTML4.0中创建出了样式(style)
层叠样式的次序(当某元素不止一次被定义时会取其最高权限的样式)
1.内联样式(最高):(由于会导致表现和内容混合,所以慎用)
例子:在HTML元素中,使用style属性进行样式的定义
2.内部样式:(当单个文件的特殊的样式时,使用内部样式),出现在文档头部
3.外部样式表:(当读到一个样式表时,浏览器会根据它来格式化HTML文档),使用,在文档头部标签连接到样式表
例子,mystyle.css为css文件名,用于格式化文档
css规则由主要的两个部分组成:选择器,以及一条或者多条的声明
选择器通常是需要改变样式的HTML元素
声明是由一个属性和属性值(当属性值为若干单词需加引号)组成,每个声明的结尾都需要添加分号(在英语中是分割的符号并不是结束符号)
样式颜色的表达(三种): 十六进制颜色值(#ff0000) css缩写形式(#f00)
RGB值rgb(250,0,0) 或者rgb(100%,0%,0%) [其中在百分比时0一定要加%]
css大小写不敏感,但是涉及到HTML文档一起,class和id名称对大小写敏感
选择器分组(用逗号将分组选择器分开),作用是为了共享同样的声明
继承:
父元素中定义的样式,如在子元素中有该此属性,那就和父元素的样式声明的属性值是一样的
派生选择器(也称上下文选择器):依据元素其位置的上下文来定义样式,使得标记简洁
id选择器:有特定id的HTML元素指定特定的样式,以"#“定义,在HTML文档中只能出现一次,通常用于建立派生选择器,或者单独选择器
class选择器:以”.“号显示,命名时首字符不能为数字,可建立派生和可单独作为选择器
属性选择器:对带有指定属性的HTML元素设置样式,用”[]"来包含[属性名],或者[属性名=属性值]
特殊:[属性名~=属性值]:当指定的属性有其属性值时,适用于有空格分开的属性值
[属性名|=属性值]:当指定的属性有其属性值时,适用于有连字符分割(title=en-un)的属性值
可以将元素选择器和属性选择器合并使用,(input[type=“text”])