Front-end HTML&CSS study notes 4 (based on Shang Silicon Valley teaching video)

Thirty-one episodes (brother selector)

Next sibling selector

可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个{ }
例如：为p元素后的紧挨着的兄弟span元素设置背景颜色为绿色
p + span{
    background-color:green;
   }

After all siblings selector

可以选中一个元素后所有的指定兄弟元素
语法：前一个 ~ 后面所有{ }
例如：为p元素后面的所有兄弟span元素设置背景颜色为绿色
p ~ span{
    background-color:green;
   }

Episode Thirty-Two (Negative Pseudo-Category)

否定伪类：可以从已选中的元素中剔除某些元素
语法：:not(选择器){ }

例如：
选中所有p元素，并将他们的背景颜色设置为绿色，除了class值为hello的p元素
p:not(.hello){
    background-color: green;
   }
  
选中所有p元素，并将他们的背景颜色设置为绿色，除了id值为p1的p元素
p:not(#p1){
    background-color: green;
   }

Episode Thirty-three (Inheritance of Style)

1.祖先元素上的样式，也会被其后代样式继承
2.利用继承可以将一些基本样式设置给祖先元素，后代元素会自动继承
3.不是所有祖先元素中的样式都会被继承，例如背景，边框，定位相关的样式等

Episode Thirty-Four (Priority of Selectors)

当用不同的选择器选中同一个样式，并且设置相同的样式时，
最终到底采用哪种选择器所设置的样式，取决于选择器的优先级

优先级规则：
内联样式：优先级 1000
id选择器：优先级 100
类以及伪类选择器：优先级 10
元素选择器：优先级 1
通配选择器：优先级 0
继承样式 没有优先级

1.当选择器中含有多种选择器时，需要将选择器的优先级相加然后再比较
2.但是，选择器优先级计算不会超过他的数量级
3.如果选择器的优先级一样，则选择靠后的样式
4.并集选择器的优先级是独立计算的
5.可以在样式的分号前添加一个 !important ,则此时该样式会获得一个最高的优先级，但不建议使用

Thirty-five episodes (pseudo-category order)

1. :link和:visited必须放在:hover和:active的前面，否则:hover和:active将会失效
2. :hover必须在:active前面，否则:active将会失效（因为要求发生:active时，就意味着:hover和:active同时发生，如果此时:hover在后面，因为优先级相同，则会采用:hover）

In summary, the recommended order is: link :visited :hover :active

Episode thirty-six (text label)

1.<em></em>表示语气上的强调，通常以斜体显示

2.<strong></strong>表示内容上的强调，通常以粗体显示

3.<i></i>内容以斜体显示
4.<b></b>内容以粗体显示
注：h5中规定：对于不需要着重显示的内容，而只是想单纯的斜体或加粗就可以用元素i b来表示

5.<small></small>其中内容会比其父元素中的文字小一些
注：在h5中常用其表示一些细则类的内容，如网站版权声明，合同中的小字等

6.<cite></cite>表示引用内容（书名，音乐名等）

7.<q></q>表示一个短引用（行内引用），其中引用的内容浏览器会默认加上引号

8.<blockquote></blockquote>表示一个长引用（块级引用），内容会独占一行

9.<sup></sup>用来设置一个上标

10.<sub></sub>用来设置一个下标

11.<del></del>为内容设置删除线

12.<ins></ins>表示插入一个内容，且内容会自动添加下划线（类似于横线被填上内容的意思）

13.<pre></pre>预格式标签，会将代码中的格式保存，且不会忽略多个空格
14.<code></code>专门用来表示代码，但不会保存格式

注：一般结合使用pre 和code来表示代码，例如：
<pre>
    <code>
    	 System.out.println("如果能避开猛烈的狂喜");
    </code>
</pre>

Thirty-seven episodes (unordered list and ordered list)

列表就相当于去超市购物时的购物清单

unordered list

1.使用<ul> </ul>标签创建一个无序列表
2.使用<li> </li>标签在<ul></ul>中创建一个一个的列表项
3.通过<ul></ul>标签的type属性可以修改列表项的项目符号，默认的项目符号我们一般都不用
4.可以通过css选择器去掉项目符号，例如：
ul{
    list-style:none;
   }
5.如果需要项目符号，可以采用为<li></li>设置背景图片的方式
6.<ul></ul>和<li></li>都是块元素

ordered list

1.和无序列表类似，只不过用<ol></ol>来创建
2.有序列表通过有序的序号作为项目符号
3.type属性：
	1（默认值）采用阿拉伯数字作为序号
	a/A 采用英文字母作为序号
	i/I 采用罗马数字作为序号
4.<ol></ol>也是块元素
5.也可以去掉项目符号，类似无序列表

Thirty-eight episodes (definition list)

1.定义列表用来对一些词汇或者内容进行定义
2.使用<dl></dl>来创建定义列表

3.<dl></dl>中包含两个子标签
<dt></dt> 表示被定义的内容
<dd></dd> 表示对被定义内容的描述

例如
<dl>
    <dt>未来</dt>
    <dd>明天会好吗？</dd>
</dl>

Note: The above three lists can be nested within each other.

Thirty-nine episodes (length unit)

1. px 像素
2. n% 百分比（浏览器会根据其父元素的样式来计算该值，改变父元素时，子元素也会相应改变，所以创建自适应页面时，经常使用百分比作为单位）

3. em 类似于百分比（相对与当前元素的字体大小来计算 1em = 1font-size，常用来设置字体相关样式）
例如：通过css设置class值为"box"的div元素
.box{
    font-size: 100px;
    width: 1em;
    height: 1em;
    background-color: greenyellow;
   }

Forty-two episodes (RGB values)

颜色单位：
1.在css中可以用单词表示颜色
2.使用RGB值表示颜色（red green blue三原色，通过它们不同的浓度来表示不同的颜色）

3.颜色的浓度是一个0-255之间的值
用法例如：
background-color:rgb(255,0,0);

4.颜色浓度也可以采用一个百分数来设置（0%-100%），其实最后也是转换成了0-255
用法例如：
background-color:rgb(100%,0%,0%);

Forty episodes (hex RGB values)

1.也可以用十六进制的rgb值（00-ff）表示颜色，使用三组两位十六进制数,每组表示一种颜色浓度
2.语法：#颜色颜色颜色
例如：background-color:#ff0000;（像这种特殊的也可以写成 background-color:#f00; ）

Front-end HTML&CSS study notes 4 (based on Shang Silicon Valley teaching video)

おすすめ