CSS3(一)、介绍和选择器
1、css3的基本规则
css主要是由两种部分组成:选择器(selector)和声明(declarations);
选择器:英文(selector),是开发者选择要修改样式的元素。
声明:英文(declarations),是开发者制定修改元素的规则,声明由属性和值组成。
属性:英文(property),是开发者希望设置的样式属性。
值:应为(value),是属性的具体内容。
属性和值之间使用冒号(:)分开,声明和声明之间使用分号(;)分开。
声明需要用花括号包({ })起来。
css中的注释开头为(/*)结束为(*/)。
2、css3的选择器
(1)、id选择器
html代码:id="值",标签的id属性值是有且只有一个的,就好像人的身份证号码一样,没有相同的。
<p id="intro">This is a paragraph of introduction</p>
css代码:ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
#intro {font-weight:bold;}
(2)、class选择器(类选择器)
class中文:班、种类。
html代码:class="值",多个标签的class属性值是可以一样的,即是可以和其他元素一同使用该类样式。
<h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p>
css代码:类选择用一个“.”英文点表示
.important{ color: #0000FF; }
(3)、属性选择器
html代码: 标签属性名=属性值,一个标签有多属性,一个属性可以给多个标签使用,下面是以title属性列子
<div title="hello"> 你好 </div> <div title="hi"> 您好 </div>
css代码:用中括符表示:[],也可以直接匹配属性与属性值“[属性=属性值]”,中间多了一个“~”表示选择该属性的属性值包含单词"h"的所有元素
[title]{ color: #0000FF; } [title=hi]{ background: #FFFF00; }
[title~=h]{
background: #333333;
}
(4)、标签选择器
html代码:已标签名为选择器
<p> 你好 </p> <div class="important"> 您好 </div> <div title="fine"> 我也好 </div>
css代码:直接使用标签名:标签名{css代码},也可以联合属性选择器使用
p{ color: #0000FF; } div[class]{ background: #FF0000; } div[title=fine]{ background: #0000FF; }
(5)、子代选择器
html代码:子代元素选择器,就是寻找子节点,可以标签名、类名、id名选择子节点,注意子节点不包括后代节点
<div> <p>你好</p> <h1> <p>我没有样式</p> </h1> </div>
css代码:用 “>” 号表示 下面代码表示选择了所有的div标签下的所有p标签,但是包括后代节点
div>p{ background: yellow; }
(6)、后代选择器
html代码:选择在当前标签的所有后代
<div> <p>你好</p> <h1> <p>我也被选中了</p> </h1> </div>
css代码:用一个空格表示,下面表示选择了所有的div下的所有的p标签
div p{ background: yellow; }
(7)、相邻兄弟选择器
html代码:两个相邻的元素,下面就是一个p标签和一个h1标签是相邻的
<div> <p>你好</p> <h1> 您好 </h1> </div>
css代码:用一个英文 “+” 号表示,选择了所有h1标签和p标签是相邻的两个标签
h1+p{ color: #0000FF; }
(8)、通用选择
通用选择是相对于所有标签的“*”
css代码:选择了所有标签的颜色为#0000FF,
*{ color: #0000FF; }
(9)、伪类选择器
a标签的伪类
a:link:选择还没有访问的链接
a:visited:选择所有已经访问过的链接
a:active:选择活动的链接
a:hover:选择鼠标悬浮在元素上的标签
input:focus:选择具有焦点的输入元素
p:first-letter:选择p标签的文本第一个文字
p:first-line:选择p标签的文本最后一行
p:first-child:选择p标签是其父元素的第一个子标签的样式,第一个子元素
伪类选择器还有很多。我就不一一列出来了。
(10)、伪元素
p:before:在p标签之前插入元素
html代码:
<p> 你好啊 </p>
css代码:content这个属性一定要写,可以为空,如果没有这个属性,该样式无效
p:before{ content:"hi"; color: #0000FF; }
结果:
p:after:在p标签后面插入元素
html代码:
<p> 你好啊 </p>
css代码: content这个属性也是一定要写
p:after{ content:"hello"; color: #0000FF; }
结果:
伪元素可以做很多事情,不只是文字也还可以将伪元素设置成方框,毕竟在css里面一切皆为框。