css-基础-浮动&对齐&选择器&伪类&伪元素
浮动
右浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列；
浮动对于图像和布局都有用；
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响；
如果图像是右浮动，下面的文本流将环绕在它左边：
img
{
float:right;
}
相邻的浮动元素
如果把几个浮动元素放在一起，如果有空间，它们将彼此相邻；
对图片轮廓使用float属性
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
清除浮动-clear
元素浮动后，周围元素会重新排列；
为了避免周围元素重拍，需要使用clear属性；
clear 属性指定元素两侧不能出现浮动元素
clear属性向文本中添加图片轮廓
.text_line
{
clear:both;
}
浮动属性
clear 指定不允许元素周围有浮动元素
float 指定一个盒子（元素）是否可以浮动
(水平)对齐
块元素对齐
块元素是一个元素，占用了全宽，前后都是换行符
<h1>
<p>
<div>
中心对齐(margin属性)
块元素可以把左，右页边距设置为"自动"对齐。
在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE
margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
这样设置和margin:auto;效果一样
position属性设置左右对齐
元素对齐的方法之一是使用绝对定位
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素
float属性左右对齐
使用float属性是对齐元素的方法之一：
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
使用浮动属性需要加!DOCTYPE声明，否则可能在ie中无法正常工作；
组合选择符
组合选择符说明了两个选择器直接的关系
四种组合方式
后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
后代选取器
匹配后代元素
以下实例选取所有
元素插入到
div p
{
background-color:yellow;
}
例子：这个css改变的是div中p的状态(貌似和p无关)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
子元素选择器
会区分那个子元素
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
以下实例选取了所有位于
元素:
div+p
{
background-color:yellow;
}
普通相邻兄弟选择器
选取所有指定元素的兄弟元素（而且是后面的）
div~p
{
background-color:yellow;
}
伪类Pseudo-classes
添加一些选择器的特殊效果
语法
selector:pseudo-class {property:value;}
//or
selector.class:pseudo-class {property:value;}
anchor伪类
链接的不同状态都可以以不同的方式显示
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
a:hover 必须在 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后
伪类的名称不区分大小写
伪类和CSS类
可以与 CSS 类配合使用
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS Syntax</a>
如果在上面的例子的链接已被访问，它会显示为红色。
CSS - :first - child伪类
first-child 伪类来选择元素的第一个子元素
例子：匹配第一个
元素
<html>
<head>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
例子：匹配所有
元素中的第一个 元素
<html>
<head>
<style>
p > i:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
例子：匹配所有作为第一个子元素的
元素中的所有 元素
<html>
<head>
<style>
p:first-child i
{
color:blue;
}
</style>
</head>
<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
</body>
</html>
CSS - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
IE8必须声明<!DOCTYPE>才能支持;lang伪类
在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型
<html>
<head>
<style>
q:lang(no) {quotes: "~" "~";}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
更多的伪类：
http://www.runoob.com/css/css-pseudo-classes.html
伪元素
添加一些选择器的特殊效果
语法
selector:pseudo-element {property:value;}
//css也可以使用伪元素
selector.class:pseudo-element {property:value;}
:first-line 伪元素
向文本的首行设置特殊样式
例子中，浏览器根据first-line样式对p元素第一样文本进行格式化（显示效果的第一行）
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
下面的属性可用于:first-line
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
用于向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
"first-letter" 伪元素只能用于块级元素
下面的属性可用于 "first-letter" 伪元素
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear
伪元素和CSS类
伪元素可以结合CSS类
p.article:first-letter {color:#ff0000;}
<p class="article">A paragraph in an article</p>
多伪元素
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
CSS - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个
元素前面插入一幅图片：
h1:before
{
content:url(smiley.gif);
}
CSS - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个
元素后面插入一幅图片：
h1:after
{
content:url(smiley.gif);
}
所有CSS伪类/元素
选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值
浙公网安备 33010602011771号