简介:
p{
font-size:12px;
color:red;
font-weight:bold;
}
优势:
<p>python的创始人为吉多·范罗苏姆(Guido van Rossum)。1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承。 </p>
<p>python的创始人为<span>吉多</span>·范罗苏姆(Guido van Rossum)。<span>1989</span>年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的<span>脚本解释程序</span>,作为ABC语言的一种继承。 </p>
span{
color:red;
}
CSS代码语法:
p{font-size:12px;color:red;}
注意:
1、最后一条声明可以没有分号,但是为了以后修改方便,一般也加上分号。
2、为了使用样式更加容易阅读,可以将每条代码写在一个新行内,如下所示:
p{
font-size:12px;
color:red;
}
CSS代码注释:
/*注释语句*/
来标明(Html中使用<!--注释语句-->
)。
<style type="text/css">
p{
font-size:12px; /*设置文字字号为12px*/
color:red;/*设置文字颜色为红色*/
}
</style>
CSS样式的位置
内联式CSS样式,直接写在现有的HTML标签中
<p style="color:red">这里文字是红色。</p>
<p>这里文字是红色。</p style="color:red">
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式CSS样式,卸载当前的文件中
<style type="text/css">
span{
color:red;
}
</style>
外部式CSS样式,写在单独的一个文件中
.css
”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内
<link href="base.css" rel="stylesheet" type="text/css" />
1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
href 和 src是不同的,对于浏览器来说,当识别到了href以后会先标记一下这里有个超链接,然后继续解释执行,但是当识别到了src以后,浏览器会暂停,先去执行一下src里面的内容,完成以后返回到当前网页里面再继续解释执行.
三种CSS样式的优先级
1、使用内联式
CSS设置文字为粉色
。
2、然后使用嵌入式
CSS来设置文字为红色
。
3、最后又使用外部式
设置文字为蓝色
(style.css文件中设置)。
粉色
。因为这三种样式是有优先级的,记住他们的优先级内联式 > 嵌入式 > 外部式
--就近原则(离被设置元素越近优先级别越高)
。选择器
选择器{
样式;
}
标签选择器
p{font-size:12px;line-height:1.6em;}
类选择器
.类选器名称{css样式代码;}
注意:
1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>胆小如鼠</span>
第二步:使用class="类选择器名称"为标签设置一个类,如下:
<span class="stress">胆小如鼠</span>
第三步:设置类选器css样式,如下:
.stress{color:red;}/*类前面要加入一个英文圆点*/
ID选择器
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
1、为标签设置id="ID名称",而不是class="类名称"。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)。
类选择器和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点:
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次。与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
<p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p>
<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p>
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年级</span>下学期时,我们班上了一节公开课...</p>
子选择器
.food>li{border:1px solid red;}
包含(后代)选择器
.first span{color:red;}
通用选择器
* {color:red;}
伪类选择符
a:hover{color:red;}
关于伪选择符:
关于伪类选择符,到目前为止,可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了。其实 :hover 可以放在任意的标签上,比如说 p:hover,但是它们的兼容性也是很不好的,所以现在比较常用的还是 a:hover 的组合。
分组选择符
h1,span{color:red;}
h1{color:red;}
span{color:red;}