CSS工作原理学习(1)
首先做个备注,css的注释是/* */
,html的注释时<!-- -->
。
另外sublime中添加了可以直接有模版的插件,sublime tmpl,可以直接选择html等选项就会新建成模版。可以直接在package control里面添加,也可以 点这里 。
1.为文档添加样式的三种方法:
- 行内样式:写在特定html标签的style属性里的。
<p style="font-size: 12px; font-weight:bold; font-style:italic; color:red;">By adding inline CSS styling to this paragraph, you override the default styles.</p>
只影响所在标签,总覆盖嵌入样式和链接样式。- 嵌入样式:嵌入的css样式放在html文档head元素中。应用范围式仅限于当前页面,页面样式会覆盖外部样式表中的样式,但是会被行内样式覆盖。
- 链接样式:用样式表,时一个扩展名为.css的文本文件。在用的时候要加一行类似代码:
<link href="styles.css" rel="stylesheet" type="text/css" />
作用范围可以时整改网站。还有在样式表中链接其他样式表的方法,用@import指令。必须出现在样式表中其他样式之前,否则不会被加载。
2.css规则命名惯例
选择符 声明 属性 值
- 多个声明包含在一条规则里。
p {color:red; font-size:12px; font-weight:bold;}
最好把值后面的分号带上,这样在继续添加声明的时候就不会忘记了。- 多个选择符组合在一起。
h1, h2, h3 {color:blue; font-weight:bold;}
特别注意选择符之间的逗号。- 多条规则应用给一个选择符。
h1, h2, h3 {color:blue; font-weight:bold;}h3 {font-style:italic;}
3.选择符
上下文选择符
descendant combinator selector,用空格分隔的标签名(分组选择符是逗号隔开的)。用于选择作为制定祖先元素后代的标签。要知道元素之间的关系,要知道文档对象模型和其对应页面中盒子嵌套关系。
是只有article后代的p元素才会应用后面的样式。
em必须有个祖先是h1,进而还要有个祖先时article,才能应用后面的样式。
特殊的上下文选择符:
- 子选择符>:
section > h2 {font-style:italic;}
,标签1必须是标签2的父元素,父元素之外的其他祖先元素都不行的。- 紧邻同胞选择符+:
h2 + p {font-variant:small-caps;}
,标签2必须紧跟在其同胞标签1的后面。- 一般同胞选择符~:
h2 ~ a {color:red;}
,标签2必须跟在其同胞标签1后面,也不一定是紧跟。- 通用选择符*:这个*按shift+8打出来。它匹配任何元素,会导致所有元素的文本和边框都变成绿色。
p * {color:red;}
,这是p所包含的所有变红色。section * a {font-size:1.3em;}
,这个是section的孙子元素应用。
真是醉了,学到这里。这肯定用起来无比复杂,考虑文档层次结构什么的真是,心累。还是赶紧来看ID和类选择符吧。
类属性与ID属性
类属性:就是class属性,body 标签中包含的任何 HTML 元素都可以添 加这个属性。
- 类选择符:
.specialtext {font-style:italic;}
,就是前面那个点,没有空格。- 标签带类选择符:
p.specialtext {color:red;}
,指定了带有这个类的段落。p.specialtext span {font-weight:bold;}
,更加精确地指定带有类的段落的span定义。- 多类选择符:
<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>
,像这样添加多个类,要用空格分开的。.specialtext.featured {font-size:120%;}
,没有空格,空格就是祖先/后代关系了。
ID属性:与class属性都用法一样,不过就是把点换成#。<p id="specialtext">This is the special text.</p>
,像这样。
ID也可以用在页内导航链接中。<a href="#bio">Biography</a>
,href的属性值是以#开头的,表示链接的目标在当前页面中。
- 什么时候用ID:其用途时在页面中唯一地标识一个元素。同一个页面中的每一个ID属性都必须有独一无二的值。
- 什么时候使用类:类的目的时为了标识一组具有相同特征的元素。
- 继承和上下文选择符能让不同的标签共享样式,从而降低你需要编写和维护的css量。
属性名选择符
基于html标签的属性选择元素。
上面是属性名选择符,下面是属性值选择符。
抄书的时候,才觉得集中。就是这样。
这是今天的作业链接,就是用了各种选择符更改了一些颜色,嘿嘿。马上学了伪类之后就可以给链接做不同状态了,嘻嘻。 https://littlebug-1251763827.cos.ap-guangzhou.myqcloud.com/littlebug/20150501/css_2.3.html