css语法:css样式由选择符和声明组成,而声明又由属性和值组成。
选择符,又称选择器,指明网页中要应用样式规则的元素;声明,在英文大括号“{ }”中的就是声明,属性和值之间用“:”分隔。当有多条声明时,中间可以用英文分号“;”分隔。
如下:
p{color:blue;font-size:20px}
说明:p为选择符。{}里面的为声明,color为属性,blue是值。
CSS的三种样式
1、内联式:css样式表就是css代码直接写在现有的html标签中
2、嵌入式:就是把css样式代码写在<style type="text/css">...</style>之间。
3、外部式css样式(即外联式):就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内。
如<link href="XX.css" rel="stylesheet" type="text/css" />
PS:1、css样式文件名字以有意义的英文名字命名;
2、rel="stylesheet" type="text/css"是固定写法,不可修改。
优先级:内联式>嵌入式>外联式。但是嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。(可根据覆盖来考虑)
例子:
<div style="text-align:center"><img src="http://img.mukewang.com/3245.jpb" /></div>
等于
<head><style type="text/css">div{text-align:center;}</style></head>
<body><div><img src="http://img.mukewang.com/3245.jpg" /></div></body>
CSS选择器
形式:选择器{
样式;
}
三种:
1、标签选择器:标签选择器其实就是html代码中的标签,如<html>、<body>、<h1>、<p>、<img>
2、类选择器:格式:.类选择器名称{css样式代码},其中类选择器名称可以任意起英文名。
用法:①使用合适的标签把要修饰的内容标记起来;②使用class="类选择器名称"为标签设置一个类。
3、ID选择器:类似于类选择器,区别在于:①为标签设置id="ID名称",而不是class="类名称"。②ID选择符的前面是(#),而不是(.)
注释:类选择器和ID选择器的区别:http://www.imooc.com/code/1585
另三种
1、子选择器:用大于符号(>),用于选择制定标签元素的第一代子元素。
2、后代选择器:加入空格,用于指定标签元素下的后背元素。
PS:请注意后代选择器和子选择器的区别,子选择器(child selector)仅指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代血案则其是作用于所有子后代选择器。后代选择器通过空格来进行选择,而子选择器是通过">"进行选择。
3、通用选择器:通用选择器是功能最强大的选择器,它使用一个(*)指定,它的作用是匹配html中所有的标签元素。
4、伪类选择符:参考http://www.imooc.com/code/2036。
5、分组选择符:当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)。如:h1,span{color:pink;}
CSS中的权值问题:标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。还有一个权值比较特殊——继承也有权值但也很低,可以理解为继承的权值最低,有的设定它为0.1。
CSS样式层叠:就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。可以理解为后面的样式会覆盖前面的样式。
特殊样式:!important,如p{color:red!important;}。浏览器默认的样式<网页制作者样式<用户自己设置的样式<!important
CSS常用属性
字体:funt-family。值有"Microsoft Yahei"
字体大小: font-size。
字体粗细: font-weight。
字体样式: font-style。
文本修饰: text-decoration:underline(下划线)/line-through(删除线);
段落缩进:text-indent:2em;
行间距:line-height:1.5em;
文字间隔、字母间隔:letter-spacing;单词间距:word-spacing。
段落排版——对齐:text-align:center/left/right。
热门评论
字体:funt-family。值有"Microsoft Yahei"
应该是font-family吧