2001CSS基础
基本语法
选择器
id选择器:
class选择器:
元素选择器(标签)
选择器分组(并集选择器):同时设置多个选择器
通配选择器 *
复合选择器(交集选择器)(同时满足)
属性选择器:元素选择器的特殊用法
后代选择器(空格)
子元素选择器 >
兄弟选择器
伪类选择器:
锚伪类选择器(超链接常用)
否定伪类
CSS基础
定义:
- ss是层叠样式表.css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。
- 层叠:可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。
- css可以分别为网页的各个层次设置样式。
作用 :
- 渲染页面
- 提高工作效率
后缀名:
- .css 独立的css(样式)文件
注释:/**/
- CSS的注释,作用和HTML注释类似,只不过它必须编写在
style
标签中,或者是css文件
中
样式位置:
- 内联样式表通过标签的style属性设置样式(直接在标签上,不建议使用)
<div style="background-color: #f00;">天佑中华-内联</div>
- 内部样式表 在当前页面中使用的样式;通过
head
标签的style
子标签导入
<head> <style type="text/css"> #divId2{ <!--设置ID --> background-color: #0f0; } </style> </head>
- 外部样式表 有独立的css文件(最推荐)
将CSS样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存,加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件
1.创建以css结尾的文件; <link rel="stylesheet" href="css/1.css" type="text/css"/>
基本语法
CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成。
- 选择器
通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器对应的元素上
- 声明块:
声明块紧跟在选择器的后边,使用一对
{}
括起来,声明块中实际上就是一组一组的名值对结构,
在一个声明块中可以写多个声明,多个声明之间使用
;
隔开,声明的样式名和样式值之间使用
:
来连接
选择器
注意:
- 若多个样式作用于一个元素的时候
- 不同的样式,会叠加
- 相同的样式,最近原则(在下方的实现)
- 若多个选择器作用于一个元素的时候
- 越特殊优先级越高
id
>class
>属性>标签
id选择器:
通过元素的id属性值选中唯一的一个元素
语法:
#id属性值 {}
例如:
<xxx id="id1"></xxx>
#id1{...}
class选择器:
通过元素的class属性值选中一组元素
可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开,只要满足的class都会实现
语法:
.class属性值{}
例如:
.cls1{...}
<xxx class="cls1"/>
<p class="p2 hello">锄禾日当午</p>
元素选择器(标签)
通过元素选择器可以选则页面中的所有指定元素
p{
color: red;
}
<p>锄禾日当午</p>
选择器分组(并集选择器):同时设置多个选择器
通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}
#p1 , .p2 , h1{
background-color: yellow;
}
拥有这三个选择器中的任意一个都会调用这个选择器
通配选择器 *
可以用来选中页面中的所有的元素
语法:*{}
*{
color: red;
}
所有的文字都会变成红色
复合选择器(交集选择器)(同时满足)
可以选中同时满足多个选择器的元素,只有同时拥有这几个选择器的元素才调用这个
对于id选择器来说,不建议使用复合选择器(id已经能够唯一确定了)
语法:选择器1选择器2选择器N{} 中间没有空格(没有空格严格是下一级,有空格,可以是下n级)
span元素,同时class为p3的元素,设置
span.p3{
background-color: yellow;
}
属性选择器:元素选择器的特殊用法
要求: html元素必须有一个属性,不论属性是什么,且有值 <xxx nihao="wohenhao"/>
(初始化)
作用:可以根据元素中的属性或属性值来选取指定元素
语法1: 不用元素、引号
语法 | 定义 |
---|---|
[属性名] | 选取含有指定属性的元素 |
[属性名=属性值] | 选取含有指定属性名和属性值元素 |
[属性名~=属性值] | 选属性名包含指定内容的值的元素 |
[属性名|=属性值] | 选属性名包含指定内容的开头的值的元素 |
案例:
[title~=flower]{
border:5px solid yellow;
}
<img src="../i/eg_tulip.jpg" title="tulip flower" />
语法2:有元素名
语法 | 定义 |
---|---|
元素名[属性名] | 选取该属性名中含有指定属性的元素 |
元素名[属性名="属性值"] | 选取该元素中属性名中含有指定属性值的元素 |
元素名[属性名^="属性值"] | 选取该元素中属性名中属性值以指定内容开头的元素 |
元素名[属性名$="属性值"] | 选取该元素中属性名中属性值以指定内容结尾的元素 |
元素名[属性名*="属性值"] | 选取该元素中属性名中属性值以包含指定内容的元素 |
span[att="val"]{ /*属性选择器,att="val"是随便写*/
background-color: #ff0;
}
调用:
<span att="val">天佑中华</span>
/*---------------------------------*/
p[title^="ab"]{ /*包含开头*/
background-color: yellow;
}
调用:
<p title="abbc">我是一个段落</p>
后代选择器(空格)
选中指定元素的指定后代元素,在祖先元素中的后代选择器添加样式;
语法: 祖先元素 后代元素{} (使用空格)
可以多层设置 :元素1 元素2 元素3 。。。{}
注意:祖先元素中的所有后代元素都会添加这个样式---多层的也会添加(直接或间接包含);
#d1 span{
color: greenyellow;
}
---------------
<div id="d1">
<span>我是div标签中的span</span> 直接包含:调用
<p><span>我是p标签中的span</span></p> 间接包含:调用
</div>
-------多层设置-----------
#d1 p span{
font-size: 50px;
}
子元素选择器 >
选中指定父元素的指定子元素(孙元素不会)
IE6及以下的浏览器不支持子元素选择器
语法:父元素 > 子元素
div > span{
background-color: yellow;
}
----div下的span添加样式,孙元素不会调用
兄弟选择器
语法:
语法 | 定义 |
---|---|
兄弟元素 + 兄弟元素{} | 查找后边一个兄弟元素择器 |
兄弟元素 ~ 兄弟元素{} | 查找后边所有的兄弟元素 |
为span后的一个p元素设置一个背景颜色为黄色
span + p{ background-color: yellow;}
伪类选择器:
有时候,你需要选择本身没有标签,但是仍然异于识别的网页部位,比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器:伪类和伪元素。
伪类:专门用来表示元素的一种的特殊的状态,比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框;当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类
伪类的顺序:
涉及到a的伪类一共有四个,而这四个选择器的优先级是一样的。
伪类 | 定义 |
---|---|
:focus | 获取焦点(单击之后) |
::selection 火狐: ::-moz-selection |
选中(区域) |
:first-child | 元素的第一个子元素,(先判断第几个,在判断类型) |
:last-child | 元素的最后一个子元素 |
:nth-child | 选中任意位置的子元素, 该选择器后边可以指定一个参数,指定要选中第几个子元素 p:nth-child(2){} 第2个子标签,同时是p标签 even 表示偶数位置的子元素 odd 表示奇数位置的子元素 |
:first-letter | 元素中第一个字符 |
:first-line | 元素中的第一行 |
:before | 指定元素前 表示元素最前边的部分,一般before都需要结合 content 这个样式一起使用,通过content可以向before或after的位置添加一些内容,无法选中 |
:after | 指定元素后 |
:first-of-type | 第一个指定元素;(先判断类型,在判断第几个) |
:last-of-type | 最后一个 |
:nth-of-type | 第n个 |
input:focus{
background-color: yellow;
}
p:before{
content: "我会出现在整个段落的最前边";
color: red;
}
<p>,可以看</p>
content中的内容出现在最前面,无法选中
锚伪类选择器(超链接常用)
有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4种不同的状态。
语法 | 定义 |
---|---|
:link | 未访问的链接 |
:visited | 已访问的链接 |
:hover | 鼠标移动到链接上 |
:active | 链接被点击 |
:xxx的内容其他标签也可以使用
浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题,
visited伪类只能设置字体的颜色;
hover和:active也可以为其他元素设置;IE6中,不支持对超链接以外的元素设置:hover和:active
否定伪类
可以从已选中的元素中剔除出某些元素
语法: :not(选择器)
为所有的p元素设置一个背景颜色为黄色,除了class值为hello的
p:not(.hello){ background-color: yellow;}