你这问题就像是在问:我可以先吃碗底的饭吗?反正都是要把一碗饭吃完,先吃碗底的还是先吃碗面的有啥区别呢。
CSS3只是CSS的一个技术标准,本质上还是CSS,也就是说,你学CSS3也就是在学习CSS。
因此,最重要的是你先要知道怎么张口吃这碗饭,而不是从碗底开始吃还是先从碗顶先吃。
只要你把CSS的基本概念搞清楚了,那么一切都不是问题,CSS3也只是比CSS1多了许多可以简化开发而且效果极其酷炫的新玩意而已,这一切都可以通过查询文档来查找而不需要专门的学习,而CSS1和CSS2的许多基础内容(比如定位,比如盒模型)却在实际开发中常常用到,即使你先学CSS3,你也不可避免地要使用它们。因此,谁先谁后又有啥关系呢。
个人建议,学习,最重要的还是要注重实践,书中来的终觉浅,多尝试你会发现更多。
说到这份上,貌似你不能跳过CSS1和CSS2直接学CSS3了,width、height、margin这些都不是CSS3的内容,还有标签选择器、类选择器这些基础选择器。直接上手CSS3,连一个像样的盒子都写不出来的。
1. 打开文档,然后打开“CSS样式”面板。
2. 在“CSS样式”面板中,点击右下角的“新建 CSS 规则”按钮,打开“新建 CSS 规则”对话框。
在“选择器类型”中选择“复合内容(基于选择的内容)”项。
在“选择器名称”中点击右边的下拉箭头,我们可以看到:
a:link:未访问的超链接。
a:visited:已经访问过的超链接。
a:hover:鼠标指针移动到上面时的超链接。
a:active:正在访问的超链接。
3. 在“选择器名称”中选择“a:link”项,然后点击“确定”按钮,打开“CSS 规则定义”对话框。
4. 在“CSS 规则定义”对话框中,在“分类”下拉框中选择“类型”,然后在右边“类型”部分设置链接字体的颜色、大小和修饰等。
5. 设置好以后单击“确定”按钮,完成“a:link”项的设置。
css 样式表分类
一,样式表分类
(1)内联样式【优先级最高】【常用】【代码重复使用性最差】
(当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。)
(2)内嵌样式表【优先级第二】【最不常用】【代码重复使用性一般】
(当单个文件需要特别样式时,就可以使用内嵌样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。)
(3)外部样式表【优先级最低】【最常用】【代码重复使用性最好】
(当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。)
I。先创建一个样式表
II。写入样式表内容,调整样式表位置
二。选择器
每一条css样式定义由两部分组成,形式如下:
选择器
{样式}
在{}之前的部分就是“选择器”。
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
选择器是选择器,外部样式表只是代码位置
(1)类别选择器( class选择器)【第二优先级】【最常用】
前面以"." 来标志,如:
.d1
{
color:red;
}
在HTML页中:
【1】<div class="d1";>文字</div> 文字颜色为红色
【2】<p class="d1";>文字</p > 文字颜色为红色
定义了一个class类,将样式应用到了元素中。
(2)id选择器【第一优先级】【最常用】
前面以"#"来标志,如:
#d2
{
color:blue;
}
在HTML页中:
<div class="d1" id="d2">文字</div> 文字颜色变为蓝色 【id选择器优先级高于类别选择器】
(3)标签选择器(根据标签名选择)【第三优先级】【如果同时出现类别选择器和id选择器,按照优先级来及执行】【最不常用】
前面以"标签名"来标志,如:
div
{
color:red;
}
在HTML页中:
<div>文字<div> 文字颜色变为红色
(4)复合选择器【有id第一优先级/都是类别选择器第二优先级】【最最常用】
[1]群组选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔。
.d1,#d2
{
color:red;
}
在HTML页中:
【1】<div class="d1";>文字</div> 文字颜色为红色
【2】<p id="d2";>文字</p > 文字颜色为红色
使用群组选择器,将会大大的简化CSS代码,将具有多个相同属性的元素,合并群组进行选择,定义同样的CSS属性,这大大的提高了编码效率,同时也减少了CSS文件的体积。
[2]后代选择器
后代选择器也称为包含选择器,用来选择特定元素或元素组的后代,将对父元素的选择放在前面,对子元素的选择放在后面,中间加一个空格分开。
.d1 #d2
{
color:blue;
}
在HTML页中:
<div class="d1" id="d2">文字</div> 文字颜色变为蓝色
后代选择器是一种很有用的选择器,使用后代选择器可以更加精确的定位元素。
其实css3是CSS的升级版本。CSS是从CSS1.0、CSS2.0、CSS2.1和CSS3.0这几个版本一直升级而来,其中CSS2.1是CSS2.0的修订版,CSS3.0是CSS的最新版本(了解CSS版本问题也是非常必要的)。
我们平常所说的CSS其实指的是CSS2.1,而CSS3特指相对CSS2.1“新增加的属性”。
CSS3.0相对于CSS2.1来说,新增了很多属性和方法,最典型的就是圆角、变形与动画等。在CSS2.1中,为标签设置圆角是一件很头疼的事情,实现动画效果也是通过jQuery等实现。
Copyright © 广州京杭网络科技有限公司 2005-2024 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有