4小时学会CSS3上Word文档下载推荐.docx
- 文档编号:16188121
- 上传时间:2022-11-21
- 格式:DOCX
- 页数:10
- 大小:106.04KB
4小时学会CSS3上Word文档下载推荐.docx
《4小时学会CSS3上Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《4小时学会CSS3上Word文档下载推荐.docx(10页珍藏版)》请在冰豆网上搜索。
原则性的东西更多的是精神或者是精髓,讲究学习效率的同学们可以忽略该小节,从下一小节开始学习。
等看完后再回过来读几遍体会体会。
CSS的核心是表现与结构分离。
页面中有的仅仅是内容,在没有修饰的情况下,看上去就像一张白纸,上面写着文字和图片。
这些文字仅仅按次序排列,没有任何样式。
当,我们加入样式以后它便成了最后我们看到的样子。
由于这个原因我们必须抛弃以设计试图为主导的思维方式,别为了“绘制”出静态页面而绘制,而要从程序员的角度出发去使用CSS。
Web标准并不是DIV+CSS,在必要的地方还需要使用<
table>
,用万能的DIV来替代一切的思想很可能是错误的。
不要滥用HTML标签,有时候会出现过度嵌套的使用结果。
一般情况为了达到控制内容和布局,需要嵌套一些<
div>
或<
span>
但是不要随意的去嵌套。
2定义CSS
语法1:
选择器{属性1:
值1;
属性2:
值2;
…}举例:
p{font-size:
18px;
}定义了p元素的字体大小是18像素。
.small-size{font-size:
12px;
}定义了一种名为small-size的样式,字体大小是12像素。
语法2:
选择器1,选择器2,…{属性1:
…}
这种语法叫“分组”,我们想让以下样式的值都是一样的,可以通过如下方式定义:
.small-size,
.middle-size,
.large-zie{color:
red}
上面例子定义了三种不同大小的样式,但是前景色都是red。
缩写:
当用到border边框,margin边距,paddin填充属性时,可以按照上右下左的顺时针顺序进行缩写定义,并且上不等于下,左等于右的时候可以简写为3个值。
4个值都相同时可以缩写为1个值。
p{
margin-top:
1px;
margin-right:
3px;
margin-bottom:
margin-left:
}
等于如下的缩写:
margin:
1px,3px,1px,3px;
1px,3px,1px;
另外
1px,1px,1px,1px;
等于
当下面一种情况也能使用缩写:
div{
background-color:
#fff;
background-repeat:
no-repeat;
background-position:
rightcenter;
等于下面的缩写:
#fff,no-repeat,rightcenter;
注释:
/*注释文字*/用类似于java中的注释符号就能进行注释
请看一个基础的例子:
使用上面的代码即可方便得对CSS进行测试。
运行效果如下:
3层叠和继承
层叠特性
CSS翻译成中文就是层叠样式表,其最重要的一个特性就是层叠。
同一个元素在满足多个CSS定义的情况下,所有的样式都会被加载,对于重复出现的定义,以最后的定义为准。
另外,标记有!
important的属性值将具有较高的权重,不会被后续出现的覆盖。
你可以定义两次下面这个CSS,而其最后的作用是颜色是绿色,字体大小是18px
.test-div{
color:
white;
font-size:
green;
但是如果前一个标记为更高权重,则颜色为白色。
white!
important;
继承特性
一般形况下,我们会好好规划一个页面的CSS继承关系。
只有这样才能有效得使用CSS,而不会出现非常多重复。
在HTML页面的document部分,所有元素都是HTML的子元素,同时Body中包含了页面的所有的可见部分。
CSS就是按照这种方式进行样式属性继承的。
但是,像背景色边框等属性是不被继承的。
你可以用inherit语法来强制使用继承属性。
例如:
inherit;
4选择器
4.1通配选择器*
通配选择器的作用是让所有的元素都符合某种样式。
请看下面例子:
*{
margin:
1;
padding:
本例子中,让所有元素的边距和留白在4个方向上都是0;
4.2类型选择器
类型指的是页面中“HTML元素”中的某个类型的元素,如<
h1>
<
p>
input>
等等。
一旦使用对该页面中所有的该类型元素都起作用(如果优先级高的话)。
4.3ID选择器
ID指的是“HTML元素”的id属性,可以通过该选择器来制定某个标记的CSS。
<
divid="
nav"
class="
test-div"
>
Test1<
/div>
menu"
Test2<
对于上面的两个div标记,可以使用下面的方法有针对性的定义CSS
#nav{
background-color:
red;
}
#menu{
black;
需要注意:
在同一个页面中,不能存在相同ID的标记,否则在触发某个JS的时候会找不到对应的对象。
4.4class选择器
这是我们最常用的选择器之一,语法是以点来定义CSS。
你可以使用类型+Class的方式来定义CSS。
请看下面例子:
div.test-bg{
p.test-bg{
body部分有如下两个元素:
test-bg"
pid="
para"
Test3<
/p>
当然,最常用的方式还是省略类型直接使用:
.test-bg{
4.5包含选择器
该选择器是和继承的结合体,在满足父子两级(所有层次的子节点)条件的情况下,CSS才匹配。
语法是父子两个节点间用空格隔开。
请看下面的例子:
divp{
yellow;
只有当div中包含的p元素才能符合该条件。
注意父节点这里不局限于类型选择器,你可以结合ID,class选择器进行更多种组合方式,来实现复杂的逻辑。
看到这里,CSS可不是简单的美工活吧,看来程序员更容易掌握这样的复杂逻辑。
4.6子元素选择器
该选择器比包含选择器更精确,它的作用范围面向了父元素的直接下一级子元素。
语法是在父子元素中使用>
符号间隔,请看下面例子:
em{
color:
grey;
4.7兄弟选择器
上面是父子关系,这是兄弟节点关系。
其定义为该元素的下一个紧跟的兄弟元素。
语法为在两者间用+号隔开。
div+p{
div的下一个p元素符合这个样式。
逻辑很清楚,不过实际中很少使用。
CSS3中新增了普通兄弟选择器。
只要求出现在其后的元素即满足条件。
语法是E~F{….}
4.8第一个子节点选择器
E:
first-child{…}表示该元素的第一个子元素将符合条件。
如:
p:
first-child{color:
red;
该选择器实际属于Pseudo-Classes类型,但是从其用法上来说应该放到这里。
4.9属性选择器
●属性存在即匹配。
语法是类型[属性名]
div[class]{
border:
1pxsolidgrey;
包含class属性的div都符合该条件。
●属性精确匹配。
语法是类型[属性名=属性值]
input[type="
password"
]{
仅当输入框是个密码框时才符合条件。
●属性模糊匹配。
语法是类型[属性名~=模糊属性值]
●属性特殊匹配。
语法是类型[属性名|=开头-]
这个需要解释一下,如div[class|=top-bar]表示以“top-bar-”开头的class属性值。
这用在符合某种命名规范的情况下是非常有效的。
●CSS3新增的属性选择器
E[att^=”val”]匹配E元素中att属性值以val开头的
E[att$=”val”]匹配E元素中att属性值以val结尾的
E[att*=”val”]匹配E元素中att属性值包含val的
target
当点击某个<
a>
连接后,发生某种样式改变。
这时需要使用该选择器。
对于这个样式:
target<
background:
body>
aname=”start-pos”>
开始<
/a>
…此处省略30页
ahref=”#start-pos”>
回到开始<
/body>
当点击超链接通过书签方式回到页面开头时,开始这个锚点的背景变成红色。
4.11其他不常用的选择器语法
Pseudo-Classes语言:
lang
Pseudo-Elements的:
first-line,:
first-letter,:
before,:
after
StructuralPseudo-Classes的E:
root,E:
nth-child(n),等等基于元素相对绝对位置的匹配方式。
否定匹配E:
not(s)
5多状态的CSS
有些地方又称做Pseudo-Classes实际可以理解为对class或元素的补充。
用来表示class或元素的多种状态(没有它实在讲不清楚该元素的状态了)。
链接<
有:
link和:
visited两种状态,表示未被当前用户访问和已访问过。
:
hover鼠标停留于某个元素
active鼠标按下但未松开的这个时间段
focus该元素获得了焦点
UI元素相关的一些状态有:
E:
enable和E:
diabled
checked
selection
6层叠的计算方法
在选择器小节,我们了解到有很多种方式来进行元素CSS的匹配,然而多个条件同时满足的时,会最终选用哪个值呢?
这就涉及到CSS的计算问题。
首先让我们直观的了解一下计算。
只要是IE10以上版本,按下F12按钮,能出现调试模式。
在这个模式下,可以很好的观察CSS的计算值和各元素上附加的CSS。
点击上面的按钮可以在页面上任意选取元素来查看其属性。
在“样式”标签下可以查看当前的样式,在已计算标签下可以查看该样式是从哪个定义中计算得来的。
在CSS3规范中对于各种选择器匹配的条件最后都作为一种加和的方式为每个样式特征进行计分,分数高的最终会被具体的元素所采用。
由于计算方法比较繁琐,就不再这里讨论了。
然而我们并不需要担心,因为浏览器最终帮我们计算出最终的值,多试几次不久出来了,难道不是吗?
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 小时 学会 CSS3
![提示](https://static.bdocx.com/images/bang_tan.gif)