首页 > 代码库 > css以及选择器基础
css以及选择器基础
CSS样式基础了解
1.css基础语法
CSS样式的出现是为了将内容和表现分离极大的提高了工作效率
内联样式（在 HTML 元素内部）
<p style="margin-left: 10px；margin-right:10px"></p>
<标签名 style="属性:属性值;属性:属性值;" 属性="属性值"></标签名>
内部样式表（位于 <head> 标签内部）
<style type="text/css">
h1
{color: maroon}
h2
{color: blue}
</style>
外部样式表（实现了内容与表现的分离，推荐使用）
先建立外部样式表文件（*.css）使用HTML的link对象
<link href="http://www.mamicode.com/ceshi.css" rel="stylesheet" type="text/css" />
rel="stylesheet"描述了当前页面与href所指定文档的关系
三、CSS选择器【重点】
1.css基础先择器
①元素选择器（有特殊功能的标签做）
h1{
color: yellow;
}
②类选择器（class）
.a{
background-color: #00ABFF;
}
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>Web开发</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="one">Web开发</span>
第三步：设置类选器css样式，如下：
.one{color:red;}
样式层叠
③ID选择器（id）
#b{
background-color: red;
}
Id和class的区别主要在于，在一个文档中【重点】
Id不能重复使用，指一个元素的唯一标识符
Class可以重复使用，指同一类的多个对象
用class表现共性，表示一类带有共同特征的对象，class可以复用
用id作为唯一标识符，同一网页中id不能重复出现
三种基本选择器的组合形态：
元素.{}
元素#{}
④包含选择器
选择所有被E1包含的E2。中间用空格分隔。
语法： E1 E2
#content p{
color: green;
}
⑤选择器分组
将同样的定义应用于多个选择符
语法： 选择器1，选择器2，选择器3
p,h2,h1{
background-color: pink;
}
可以避免重复写代码
⑥子元素选择器
X>Y：子元素选择器(不能跳级)
页面布局常见命名规范
参考：http://wenku.baidu.com/link?url=ZErK6r8GecSTpcrKUfnmW_ks1VhZyvuW9yiUVS83c_40fImZ4ZUG2_nBSA4i-j7tkEXaPdUrdR3_ABc3PYaB2AduDZzzuXa577OQii9zXyS
⑦css高级选择器
通用元素选择器
*{
}
相邻元素选择器
需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
X + Y：X之后的第一个Y类型兄弟元素
X ~ Y：X之后的所有Y类型兄弟元素
⑧伪类【重点】
锚伪类
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
文本伪类（伪元素）伪元素只能用于块级元素。
:first-line用于向文本的首行设置特殊样
:first-letter用于向文本的首字母设置特殊样
:before在元素之前添加内容。
:after在元素之后添加内容。
结构性伪类(什么情况下比较常用)
:first-child 选择器表示的是选择父元素的第一个子元素
:last-child 选择器选择的是选择父元素的最后一个子元素
X:nth-of-type(n) X:nth-child(n)
X:only-of-type X:first-child
X:first-of-type X:last-child
X:last-of-type(n) X:only-child
属性选择器（表单样式设计常用）
input[type=text]{
border-color: red;
}
css以及选择器基础