CSS入门指南-1:工作原理
这是CSS设计指南的读书笔记,用于加深学习效果。 最近想做一个小程序,前端是必修课,那就从css开始吧。 css 工作原理 每个html元素都有一组样式属性,可以通过css来设定。当html元素的同一个样式属性有多种样式值的时候,css就要靠层叠机智来决定最终应用哪种样式。 HUGOMORE42 css规则 规则实际上是一条完整的css指令,规则声明了要修改的元素和要应用给改元素的样式。 为文档添加样式的三种方法: 写在元素标签里(也叫行内样式,只能影响它所在的标签,会覆盖嵌入样式和链接样式) 写在<style> 标签里(也就嵌入样式,应用范围仅限于当前页面,页面样式会覆盖外部样式表中的样式,但会被行内样式覆盖) 写在单独css样式表中(也叫链接样式,样式表是一个扩展名为.css 的文件,可以在任意多个HTML页面链接同一个样式表文件。链接样式的作用范围是整个网站) 除了这三种为页面添加样式的方法,还有一种在样式表中链接其他样式表的方法,使用@import 指令:例如 @import url(css/styles.css) @import 指令必须出现在样式表中其他样式之前,否则@吹灭;@import引用的样式表不会被加载。 对这个基本的结构有三种方法可以进行扩展 **第一种方法:**多个声明包含在一条规则里。 p {color: red; font-size: 12px; font-weight: bold;} **第二种方法:**多个选择器组合在一起。例如:如果想让<h1>、<h2>和<h3>的文本都变成蓝色粗体可以这么写: h1 {color: blue; font-weight: bold;} h2 {color: blue; font-weight: bold;} h3 {color: blue; font-weight: bold;} 也可以这么写: h1, h2, h3 {color: blue; font-weight: bold;} 分组选择符以逗号作为分隔符 第三种方法: 多条规则应用给一个选择符。 例如,写完上边的规则,还想把h3变成斜体,那么可以再为h3单独写一条规则: h1, h2, h3 {color: blue; font-weight: bold;} h3 {font-style: italic;} 选择特定元素的选择符 用于选择特定元素的操作符有三种 上下文选择符。基于祖先或者同胞元素选择一个元素。 ID和类选择符。基于id和class属性的值选择元素。 属性选择符。基于属性的有无和特征选择元素。 上下文选择符 比如我们想给article中的段落设置不同的字号,可以使用上下文选择符来解决。 上下文选择符的格式如下: 标签1 标签2 {声明} 其中标签2 是我们要选择的目标,而且只有在 标签1是其祖先元素的情况下才会被选中。 上下文选择符,叫后代组合式选择符,就是一组以空格分隔的标签名。用于选择作为特定祖先元素后代的标签。 article p {font-weight: bold;} 上边例子中,只有article后代的p元素才会应用后边的样式。 上下文选择符以空格作为分隔符 特殊的上下文选择符 子选择符 > 格式如下: 标签1 > 标签2 标签1 必须是 标签2 的父元素,不能是其它的祖先元素。 ...