块和内联
块元素:独占一行的元素。无论内容多少,独占一行。
p h1 h2 h3
div:没有任何语意,就一个块元素并且不会为里面的元素设置默认样式。主要对页面进行布局
内联元素:(行内元素)
只占用自身大小的元素,不会独占一行。会自动换行
span:没有任何语意,专门用来选中文字为文字来设置样式
img a 超链接(可以包含任意元素,除了a本身)
p元素中不能包含其他任何块元素,只能放内联元素。
一般情况下只用块元素去包含内联元素,而不会使用内联元素去包含一个块元素。
元素选择器:
通过元素选择器可以选中页面中的所有指定元素
语法:标签选择器
p{color: red;
}
id选择器:通过元素的ID属性值,来选中唯一的一个元素。
#p1{
font-size: 10px;
}
可以为元素设置class属性:和id属性类似。但是可以重复。拥有相同class值得元素,是一组元素。
类选择器:通过元素的class属性值,选中一组元素
语法
p class = "p2">hsishisi</p>
.p2{
font-size: 50px;
}
可以同时唯一元素设置多个class值,多个值之前用空格隔开
<p class = "p2 hello">hsishisi</p>
.hello{
font-size: 5px;
}
选择器分组
同时选择多个选择器对应的元素:
p,p2,h1{
background-color: aquamarine;
}
通配选择器
*{
color: red;
}
伪类选择器
伪类专门用来表示元素一种特殊的状态,比如访问过的超链接,获取焦点的文本框。当我们需要为处在这些特殊状态的元素设置样式时候,使用伪类。
浏览器是通过历史记录来判断是否访问过。
a:link{
color: forestgreen;/*没访问过的*/
font-size: 90px;
}
a:visited{
color: beige;/*访问过的 ,由于涉及到用户隐私问题,visited伪类只能设置字体颜色*/
}
为没访问过的链接设置颜色为绿色
鼠标移入
a:hover
a:hover{
color: chartreuse;
}
点击的一个状态
a:active{
color: black;
}
hover和active也可以为其他元素设置
IE6中不支持对超链接以外的元素设置hover和active
使用input可以创建一个文本输入框
<input type="text" />
获取焦点 :focus
文本框获取点击后变色
input:focus{
background-color: #7FFFD4;
}
为选中的文字设置样式::selection
p::selection{
background-color: aqua;
}
在火狐中
p::-moz-selection{
background-color: aqua;
}
伪元素选择器
标签就是元素,元素就是标签。
使用伪元素来表示元素中的一些特殊的位置。
为p中的第一个字符设置特殊样式,首行设置
p:first-letter{
color: red;
font-size: 40px;
}
p:first-line{
color: gray;
}
before都需要结合content这个样式一起使用,通过content可以向before或after的位置添加一些元素。不可选中。
p:before{
content: "wohuichuxainzais";
color:red;
}
p:after{
content: "wohuichuxainzais";
}
属性选择器
属性:
title属性可以给任意标签指定。
当鼠标移入到元素上时,元素中title属性的提示,将会作为提示文字显示。
可以根据元素的属性或者属性值来选取元素。
选取含有指定属性的元素,
p[title]{
background-color: aqua;
}
为title属性值是hello的元素设置一个背景颜色为黄色
p[title = "hello"]{
background-color: aqua;
}
属性名=属性值:选取含有指定属性值得元素
p[title^="a"]{
background-color: aqua;
}
以c结尾的元素
p[title$="c"]{
background-color: aqua;
}
属性名*=属性值 选取属性值以包含指定内容的标签
p[title*="c"]{
background-color: aqua;
}
子元素选择器
第一个子元素
body>p:first-child{
background-color: aquamarine;
}
最后一个子元素:
p:last-child{
background-color: #7FFFD4;
}
d选中任意位置的子元素(该选择器后边可以指定一个参数,指定要选中第几个元素)
p:nth-child(3){
color: azure;
}
偶数even
p:nth-child(even){
color: azure;
}
基数odd
p:nth-child(odd){
color: azure;
}
first-of-type
last-of-type
nth-of-type
是在当前类型的子元素当中排列
p:first-of-type{
color: rosybrown;
}
兄弟元素选择器
后一个兄弟元素选择器:可以选中后一个兄弟元素的第一个元素
+
span+p{
background-color:red ;
}
选中后面的所有兄弟元素
span~p{
background-color:red ;
}
否定伪类
可以从已经选中的元素中剔除某些元素
p:not(.hello){
background-color: red;
}