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

Twenty-one episodes (css syntax)

1.在<style></style>标签中的内容不属于HTML，应该都采用css语法（例如：注释为/*  */）

Selector

1.通过选择器可以选中页面中指定的元素
2.并且可以将声明块中的样式应用到选择器对应的元素中

declaration block

1.声明块紧跟在选择器后面，使用一对{ }括起来，
2.声明块中实际上就是一组一组的名值对结构（也称为声明）
3.声明的样式名和样式值之间用：隔开，
4.声明块中可以写多个声明，声明之间用；隔开

例如下面p为选择器，{ }中为声明块
  <style type="text/css">
   p{
    color:red;
    font-size:30px;
    }
 </style>

Episode 22 (Installing HBulider)
Please do your own research

Episode Twenty-Three (Inline Elements and Block Elements)
Block Elements <div></div>

1.所谓块元素就是会独占一行的元素，无论内容有多少都会独占一行
2.<div></div>本身并没有任何语义，就是一个纯粹的块元素，并且不会为他里面的内容设置任何默认样式
3.<div></div>主要用于页面布局
4.块元素还有<p></p> <h1></h1>等

Inline elements (inline elements) <span></span>

1.所谓行内元素指的是只占自身空间大小的元素，不会占一行
2.<span></span>没有任何语义，专门用来选中文字，并为文字设置样式
（例如：想为网页中的文字 “面对你，我永远是个二傻子” 设置样式，必须先将其放于一个标签中，
然而他本身又不属于任何标签，则可以写为<span style="color:blue;">面对你，我永远是个二傻子</span>）
3.常见的内联元素：<img></img> <a></a> <iframe></iframe>

1.一般只会使用块元素包含内联元素
例如：
<div>
	<span>
	</span>
</div>
2.元素<a></a>可以包含任意元素，除了他本身
3.元素<p></p>中不可以包含任何块元素

Twenty-four episodes (common selector)

element selector

1.选中对应的所有元素
2.语法：元素名{ }
例如：p{
	font-size:20px;
	}

id selector

1.通过元素的id值选中唯一的那个元素
2.语法：#id属性值{ }
例如：#p1{
	font-size:20px;
	}

class selector

1.通过元素的class属性值选择一组元素
2.语法：.class属性值{ }
例如：.p2{
	font-size:20px;
	}

Selector grouping (union selectors)

1.可以同时选中多个选择器对应的元素
2.语法：选择器1，选择器2，选择器n{ }
例如：h1,#p1,.p2{
	font-size:20px;
	}

wildcard selector

1.选中页面中所有的元素
2.语法：*{ }
例如：*{
	font-size:20px;
	}

Compound selector (intersection selector)

1.用来选中 同时满足多个选择器 的元素
2.语法：选择器1选择器2选择器n{ }
例如：h1#p1.p2{
	 font-size:20px;
	 }

Episode Twenty-Five (Child and Descendant Element Selectors)

Element relationship

1.父元素
2.子元素
3.祖先元素
4.后代元素

Descendant element selector

1.选中指定元素的指定后代元素
2.语法：祖先元素 后代元素{ }
例如：div span{
	 font-size:20px;
}

3.注：上例中在不同情况下，也可以灵活更改，如

只选中id为 div1 下的span元素

#div1 span{
  font-size:20px;
}

选中 div 下的 p1 下的 span 元素

div p1 span{
  font_size:20px;
}

Child element selector

1.选中指定父元素的指定子元素
2.语法：父元素 > 子元素{ }
例如：div > span{
	 font-size:20px;
	}
	
3.IE6及以下的浏览器不支持子元素选择器
4.写代码时要考虑代码的兼容型问题，要问清楚兼容哪些平台，哪些浏览器

Episode twenty-seven (pseudo-class selector)

1.伪类专门用来表示元素的一种特殊的状态，比如：访问过的链接，普通的链接（未访问的链接），获取焦点的文本框......
2.当我们需要为处在这些特殊状态的元素设置样式时，便可以使用伪类

Set green for unvisited links

:link 表示普通的链接（没访问过的链接）
例如
a:link{
 color:green;
 }

Set visited links to red

:visited 表示访问过的链接
例如：
a:link{
 color:red;
 }
 注：浏览器是通过历史记录来判断是否访问过，由于涉及用户隐私，只能设置字体颜色

Set the link moved by the mouse to blue

:hover 表示鼠标移入状态
例如：
a:hover{
color:blue;
}

Set the link clicked by the mouse to black

:active 表示被鼠标点击的状态
例如：
a:active{
color:black;
}

Note: ":hover" and ":active" can also set elements other than hyperlinks (but are invalid in IE6)

例如：设置段落元素
p:hover{
color:black;
}

p:active{
color:black;
}

Text box gets focus

:focus 获取焦点
例如：文本框获取焦点后背景颜色变为黄绿色
input:focus{
background-color:greenyellow;
}

注：文本框元素<input typet="text" />

Set styles for selection

::selection 为选中内容设置样式
例如：设置段落标签中被选中的内容 背景颜色为橘黄色
p::selection{
background-color:orange;
}

Episode twenty-eight (pseudo elements)

1.伪元素：使用伪元素表示元素中的一些特殊位置
例如：

为段落元素的第一个字母设置颜色
p:first-letter{
    color: yellow;
 }

为段落元素中的第一行设置背景颜色
p:first-line{
    background-color: yellow;
  }

:before 表示元素最前面的部分
例如：
p:before{
	content:"我大概，就是个二傻子叭";
	color:red;
}

:after 表示元素最后面的部分
p:after{
	content:"我大概，就是个二傻子叭";
	color:green;
}

注：一般before和after都需要结合content样式一起使用，通过content可以向before和after中添加一些内容，且这些内容在网页中无法被选中

Episode twenty-nine (attribute selector)

title属性：可以指定给任何元素，当鼠标移到该元素上时，title属性值将会作为提示文字出现
例如：<p title="大概是真的叭">我是个二傻子</p>

属性选择器：可以根据元素中的属性或者属性值来选取指定元素

Syntax: [attribute name] selects elements containing the specified attribute

例如：为具有title属性的p元素设置背景颜色为黄色
p[title]{
	background-color:green;
}

Syntax: [Attribute name = "Attribute value"] Select elements containing the specified attribute value

例如：为title值为hello的p元素设置背景颜色为绿色
p[title="hello"]{
    background-color:green;
   }
   
 也可以写为
 p[title=hello]{
    background-color:green;
   }

Syntax: [Attribute name^="Attribute value"] Select elements whose attribute value starts with the specified content

例如：为所有title属性值中开头是we的元素 设置背景颜色为绿色
p[title^="we"]{
    background-color:green;
   }

Syntax: [Attribute name $ = "Attribute value"] Select elements whose attribute value ends with the specified content

例如：为所有title属性值结尾是i的元素 设置背景颜色为绿色
p[title$="i"]{
    background-color:green;
   }

Syntax: [Attribute name*="Attribute value"] Select elements whose attribute value contains the specified content

例如：为所有title属性值中包含sad的元素 设置背景颜色为绿色
[title*="sad"]{
    background-color:green;
   }

Thirty episodes (pseudo-class of child elements)

:fist-child 可以选中第一个子元素
例如：为子元素是p标签（且还要是第一个子元素）设置背景颜色为绿色
p:first-child{
    background-color:green;
   }

:last-child 可以选中第一个子元素
例如：为子元素是p标签（且还要是最后一个子元素）设置背景颜色为绿色
p:last-child{
    background-color:green;
   }

:nth-child 可以选中任意位置的子元素
例如：为子元素是p标签（且还要是第三个子元素）设置背景颜色为绿色
p:nth-child(3){
    background-color:green;
   }
  
 注：括号中除了数字外，还可以填even(选中偶数位置的子元素),odd(选中奇数位置的子元素)

:first-of-type
:last-of-type
:nth-of-type
这三种和前三种非常类似，只不过child是在所有的子元素中排列选择，而type是在当前类型元素中排列选择

用法如下：
p:first-of-type{
    background-color:green;
   }

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

Guess you like