属性选择器
属性选择器: 检索HTML页面中符合所设置的属性条件的元素。根据元素的属性和属性值来匹配元素。
属性选择器:通过[ ]设置被选元素的属性条件。其中包含属性名称,后跟可选条件以匹配属性的值。如下图所示,将选择HTML页面中所有包含了alt属性的img元素并为其设置CSS样式。
属性选择器分两类:
存在和值属性选择器 (匹配精确的属性值)
1. [attr]: 包含attr属性的所有元素
2. [attr=val]:选择属性attr被赋值为val的所有元素
3. [attr~=vall]:仅选择属性attr中,属性值包含val的所有元素
子串值属性选择器 (伪正则选择器)
1. [attr|=val]:选择attr属性的值是val或值以val-开头的元素
2. [attr^=val]:选择attr属性的值以val开头(包括val)的元素
3. [attr$=val]:选择attr属性的值以val结尾(包括val)元素
4. [attr*=val]:选择attr属性的值中包含字符串val的元素
font-size属性
您还可以使用像素(px)或相对尺寸单位(em)或 pt数值来操纵字体大小。
当您需要像素精度时,以像素值(px)设置字体大小是一个不错的选择,它可以让您完全控制文本大小。
PX特点:
- IE无法调整那些使用px作为单位的字体大小;
国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。
em(font size of the element)是指相对于父元素的字体大小的单位。em是相对长度单位。相对于当前对象内文本的字体尺寸。 如果您没有在页面上的任何位置设置字体大小,那么这是浏览器的默认大小,即16px。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。
要计算em大小,只需使用以下公式:em = px / 16,即 1em = 16px。
EM特点:
em会继承父级元素的字体大小。
温馨提示:
所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
盒模型
CSS通过盒模型来确定一个元素的大小以及如何放置它们。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
使用盒模型时,了解元素的总宽度是如何计算的非常重要。
当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和边距。
例如,带有填充(padding)的盒的总宽度将是宽度加上填充左侧(padding-left)和填充右侧(padding-right)的总和。
这是另一个有边距(margin),边框(border)和填充(padding)的盒。
总宽度是左右边距,左右边框,左右填充以及内容的实际宽度的总和。
当您使用CSS设置元素的宽度和高度属性时,可以设置内容区域的宽度和高度。
在盒模型中设置背景颜色时,将覆盖内容区域以及填充区域(padding)。
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度
元素的总高度的计算方式与宽度相同。
下面的例子与上一课有关填充(padding),边框(border)和边距(margin)的计算方式相同。
总而言之,总元素高度 = 高度(height) + 顶部填充(padding-top) + 底部填充(padding-bottom) + 顶部边框(border-top) + 底部边框(border-bottom) + 顶部边距(margin-top) + 底部边距(margin-bottom)
知识点普及:遇到内容div想居中与外部div中,可以使用 margin : 0 auto 这样会根据内部div宽度自动填充左右两侧的margin值以达到居中效果
设置链接样式
链接可以使用任何CSS属性(例如,color,font-family,background等)来设置样式。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
以下四个链接状态是:
a:link - 定义普通的、未被访问的链接
a:visited - 定义已被访问的链接
a:active - 链接被点击的时刻
a:hover - 鼠标指针位于链接的上方
下面的例子创建一个链接,当鼠标移到它上面的时候会改变样式。
a:hover {
color: red;
}
当为链接设置样式时,必须遵循以下规则:
- a:hover 必须在a:link和a:visited之后
- a:active 必须在a:hover之后
小技巧:“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .
cursor参数值
cursor属性规定要显示的光标的类型(形状)
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围)。
cursor属性还有许多其他的值,例如:
auto -默认,浏览器设置的光标
default - 默认光标
crosshair - 光标显示为十字准线
pointer - 光标显示手形图标
move -此光标指示某对象可被移动
e-resize -此光标指示矩形框的边缘可被向右(东)移动
ne-resize-此光标指示矩形框的边缘可被向上及向右移动(北/东)
nw-resize-此光标指示矩形框的边缘可被向上及向左移动(北/西)
n-resize -此光标指示矩形框的边缘可被向上(北)移动
se-resize-此光标指示矩形框的边缘可被向下及向右移动(南/东)
sw-resize-此光标指示矩形框的边缘可被向下及向左移动(南/西)
text -此光标指示文本
wait -此光标指示程序正忙(通常是一只表或沙漏)
help -此光标指示可用的帮助(通常是一个问号或一个气球)
cursor的值较多,以下用图片的形式列出。
Css3
CSS3 前缀
CSS3前缀用于区分并兼容各大主流浏览器对于CSS新功能的支持。
在了解这些前缀之前,先介绍一下各大主流浏览器的内核:
IE——trident(国内很多双核浏览器的其中一核就是trident)
Opera——Blink(presto已废弃)
chrome——Blink(之前是webkit)
Firefox——Gecko
Safari——webkit(Android手机使用频率最高的也是webkit内核)
而每个内核都有自己的前缀:
Trident内核:前缀为-ms-
Gecko内核:前缀为-moz-
Presto内核:前缀为-o-
Webkit内核:前缀为-webkit-
所以:
-moz- 代表firefox浏览器私有属性
-ms- 代表IE浏览器私有属性
-webkit- 代表safari、chrome私有属性
-o- 代表Opera私有属性
CSS属性需要带各浏览器的前缀,下面介绍一些常用的需要加上前缀的属性(新增属性):
例如,Safari和Chrome的前缀是-webkit。 Chrome,Safari和Mozilla目前支持border-radius属性,只要它带有浏览器前缀即可生效。
要在Chrome和Safari中指定边框半径,请使用以下语法:
HTML代码:
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div >W3cSchool</div>
</body>
</html>
CSS代码:
div {
border :1px solid green;
-webkit-border-radius: 24px;
}
通过添加前缀,能使CSS样式在不受支持的浏览器中生效。有时候为了兼容更多的浏览器,你可能需要对同一个样式属性进行重复定义增加不同的前缀。
CSS3伪类
CSS3伪类用于向某些选择器添加特殊的效果,它允许我们在不适用javascript等脚本的情况下去设置web页面中某些特定的元素的属性。
伪类通常以 ":"(冒号)开头。:first-child和:last-child是较为常用的伪类。
:first-child 将会匹配该元素中的第一个子元素。
:last-child 则反之,匹配最后一个子元素。
:nth-child(n) 将会选择该元素中的第n个子元素
:nth-child(2n) 将会选择该元素中的所有偶数子元素
:nth-child(2n+1) 将会选择该元素中所有的奇数子元素
HTML代码:
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div id="parent">
<p>First w3cschool</p>
<p>Second W3cschool</p>
<p>Third w3cSchool</p>
<p>Fourth W3cSchool</p>
<p>Sixth W3cSchool</p>
</div>
</body>
</html>
CSS代码:
#parent p:first-child {
color: green;
text-decoration: underline;
}
#parent p:last-child {
color: pink;
}
#parent p:nth-child(3) {
color: blue;
}
#parent p:nth-child(2n) {
font-size: 14px;
}
#parent p:nth-child(2n+1) {
font-size: 22px;
}
伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
在CSS中有五个伪元素,每个都以一个双冒号(::)开头:
::first-line- 选择器中文本的第一行
::first-letter - 选择器中文本的第一个字母
::selection - 选择用户选择的元素部分
::before - 在元素之前插入一些内容
::after - 在元素之后插入一些内容
注意 :伪元素和伪类的区别:
伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。
与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。
在下面的例子中,::first-line伪元素用于为文本的第一行设置样式。
HTML代码:
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<div id="parent">
<p>First w3cschool
<br>Second W3cschool
<br>Third w3cSchool
<br>Fourth W3cSchool</p>
</div>
</body>
</html>
CSS代码:
p::first-line {
color: #AE4141;
}
执行结果:
::selection 伪元素对选定的文本进行设置样式。
CSS代码:
p::selection{
background: #AE4141;
color: #fff;
}
p::-moz-selection{
background: #AE4141;
color: #fff;
}
执行结果:
使用-moz-前缀,因为Mozilla不支持:: selection元素。
background-clip属性
background-clip属性指定背景的绘画区域。
该属性有三个不同的值:
border-box - (默认)背景被绘制到边框的外边缘
padding-box - 背景被绘制到填充的外边缘
content-box - 背景被绘制在内容框中
在下面的例子中,带背景剪辑的第一个div被设置为填充框; 在第二个div中它被设置为内容框。
CSS代码:
.first {
border: 2px dotted black;
padding: 20px;
background: red;
color: #fff;
background-clip: padding-box;
}
.second {
border: 2px dotted black;
padding: 20px;
background: red;
color: #fff;
background-clip: content-box;
}
background-clip也适用于背景图像。
CSS代码:
div {
height: 60px;
background-image: url("https://7nsts.w3cschool.cn/images/w3c/index-logo.png");
background-clip: content-box;
}
background-clip的透明边框
css可以使用RGBA设置边框透明,RGBA在RGB的基础上多了控制alpha透明度的参数,我们使用RGBA设置边框颜色同时可以设置边框透明度。
在元素上设置透明边框会在边框下面显示元素自己的背景。
RGBA在RGB的基础上多了控制alpha透明度的参数。
R(红)、G(绿)、B(蓝)三个参数,正整数值的取值范围为:0 – 255或用百分数值的取值范围为:0.0% – 100.0%。
超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A参数,取值在0~1之间,不可为负值
在下面的示例中,我们使用RGBA将边框设置为透明,但实际上它们显示为纯灰色。
border: 20px solid rgba(0, 0, 0, 0.3);
width:200px;
position:absolute;
top:50px;
left:50px;
background-color:white;
执行结果:
通过将background-clip属性设置为padding-box,边框将变为透明。
div {
border: 20px solid rgba(0, 0, 0, 0.3);
-moz-background-clip: padding-box;
background-clip: padding-box;
width:100%;
position:absolute;
background-color:white;
}
执行结果:
透明效果是通过background-clip:padding-box实现的。 没有它,盒子的背景也在边界之下,使它不透明。
层叠的背景图
CSS3中支持同时使用多个背景图片。
通过","逗号分隔可以设置多个背景图。 第一个图像将出现在顶部,最后一个在底部。
在下面的例子中,我们有两个背景图片:第一个是w3cschool标识(对齐底部和右侧); 第二个是风景图像(与左上角对齐)。
CSS代码:
div {
width: 400px;
height: 300px;
background-image: url('https://7nsts.w3cschool.cn/images/w3c/header-logo.png'),url('https://7n.w3cschool.cn/attachments/image/20180125/1516870677823170.jpg');
background-position: right bottom, left top;
background-repeat: no-repeat;
}
使用background-position属性可以更改背景图像的位置。各个属性值如下:
可以通过使用background简写属性
例:background: url(w3cschool.png) right top no-repeat, url(w3cschool.jpg) left top no-repeat;
opacity属性
CSS中的opacity属性支持为元素增加一个不透明度。
利用opacity属性来改变图片的透明度,opacity 属性能够设置的值从 0.0 到 1.0。值越小,图片越透明。
下例中对同一张图片设置多种不透明度进行展示,可以明显看到差别。
CSS代码:
#img1 {
opacity: 1;
}
#img2 {
opacity: 0.5;
}
#img3 {
opacity: 0.25;
}
在Internet Explorer中设置opacity
要让opacity属性兼容所有的IE版本,请使用filter:alpha(opacity = x) 以及opacity属性。 x可以取值从0到100。
x设置为0则是完全透明,反之设置为100是完全不透明。
例如,为了使代码能够正常的使用IE,当图像的不透明度设置为0.4时,应该如下所示:
CSS代码:
#img {
opacity: 0.4;
filter: alpha(opacity=40);
}
alpha过滤器是一个仅限于微软的属性,而不是标准的css属性.
CSS3动画
动画让一个元素从一种风格逐渐转变为另一种风格。
您可以根据需要更改任意数量的CSS属性。
关键帧将保存元素在特定时间的样式
@keyframes规则
当您在@keyframes规则中指定CSS样式时,动画将在某些时间从当前样式逐渐变为新样式。
要使动画起作用,必须将动画绑定到元素。
以下示例将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时。
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: w3cschool;
animation-duration: 1s;
}
@keyframes w3cschool {
0% {background-color: red;}
50% {background-color: yellow;}
70% {background-color: blue;}
100% {background-color: green;}
}
执行结果:
w3cschool是为动画设置的名字,您可以设置任意的名字
@keyframes规则
作为使用百分比的替代方法,您可以使用from和to关键字,其中:
from - 为0%的起始点
to - 为100%的结束点
下面的两个例子是等价的,并产生相同的结果:
@keyframes w3cschool {
0% {background-color: red;}
100% {background-color: green;}
}
@keyframes w3cschool {
from {background-color: red;}
to {background-color: green;}
}
animation-name 属性指定要用于元素的动画。
animation-duration 属性指定所选动画的持续时间。
如果未指定animation-duration属性,则动画将不起作用,因为默认值为0。