Basics CSS

NOTE

The combination of CSS and HTML

Style nature

1.内嵌

<div style="background=color:#06F ; color:#F00">

“:” sign the attribute “;” to separate it。

2.put it inside the head

层叠式

3.built a new css and quote it in the source file.

@import url(div.css) //in html
div {
style="background=color:#06F ;
color:#F00"
}
//in div.css

整合

@import url(second.css) //in html
@import url(div.css)
@import url(span.css) //in second.css
//in div or other css it is the same as the former one


4.Link(html link)

<link rel="stylesheet" type="text/css" href="..\css\second.css">

【CSS　notes　/……/】

CSS继承

Basic selector and priority
选择容器，作用在哪个标签上。

a)html 标签选择器 html中的标签名

b)Class选择器 使用标签中的class属性

分类使用class属性
<p class="ced"> //in html
p.ced{
background-color: #172894;
color: #539207;
} //in p.css

还可以对不同标签进行相同样式设定
.ced{
background-color: #172894;
color: #539207;
}//in p.css

All the label with the same class will be selected.

预定义样式可以实现动态加载

c)id选择器使用标签中的id属性

通常id的取值在页面中是唯一的，support the css and java
【优先级：style>id>class>html (style 直接写入域中)】

拓展选择器（常见）

a)关联选择器：两个或多个选择器之间产生关系the selector inside the selector

span b{
background-color: #09F;
color: #FFFFFF;
}//in p.css


b)组合选择器：对多选择器进行相同样式设定

选择器之间用逗号隔开，对于多个选择器，只要是符合的样式都会同时改变。
.ced ,div b{
background-color: #A34829;
color: #B93434;
}//in p.css


c)伪元素选择器

标签的某些状态，找标签，结合

1.超链接标签，状态最明显

超链接的状态
未访问：
a:link{
background-color: #000000;
color: #FFFFFF;
text-decoration:none; /*取消下划线*/
font-size: 18px;
}

鼠标悬停：
a:hover{
background-color: #FFFFFF;
color: #000000;
}

/only change the element style you signed here./

点击：
a:active{
background-color: #314950;
color: #192474;
font-size: 72px;
}

访问后：
a:visited{
background-color: #FFFFFF;
color: #000000;
font-size:24px;
}
/*其他标签div p ……也可使用悬停等一系列动作
div:hover{
}

【一般顺序： L V H A】

2.p标签

First line:
div:first-line{
font-size: 64px;
color: #C18473;
}

First letter:
p:first-letter{
font-size: 36px;
color: #D48914;
}

3.Text box文本框焦点伪元素focus

<input type="text"/> /*建立文本框*/
input:focus{
background-color: #239865;
}
/*填写时候的背景