CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
<html>
<head>...</head>
<body>...</body>
</html>
<head>标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签
在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
css夹杂在<head>中。
对段落设置:
<style type="text/css">
p{
font-size:12px; 文字大小
color:red; 文字颜色
font-weight:bold; 文字格式
border:1px solid red; 加入边框为1像素的红的边框
body{font-family:"宋体";} 设置字体
}
</style>
对个别文字设置:
<style type="text/css">
span{
font-size:12px; 文字大小
color:red; 文字颜色
font-weight:bold; 文字格式
}
</style>
内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码:
<p style="color:red">这里文字是红色。</p>
注意要写在元素的开始标签里,下面这种写法是错误的:
<p>这里文字是红色。</p style="color:red">
并且css样式代码要写在style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。如下代码:
<p style="color:red;font-size:12px">这里文字是红色。</p>
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内。
<link href="base.css" rel="stylesheet" type="text/css" />
rel="stylesheet" type="text/css" 是固定写法不可修改。
<link>标签位置一般写在<head>标签之内。
他们的优先级:内联式 > 嵌入式 > 外部式。
选择器
标签选择器其实就是html代码中的标签。
类选择器:
.类选器名称{css样式代码;}。在html代码中运用时在<标签后+空格+class=“类选择器名称”>如
.stress{
color:red;
}
<span class="stress">勇气</span>
可以使用类选择器词列表方法为一个元素同时设置多个样式。
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">
ID选择器:
和类选择器格式用法和格式差不多
1、为标签设置id="ID名称",而不是class="类名称"。·
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)
ID选择器只能在文档中使用一次。
后代选择器:
.first span{color:red;} (Span就是first的后代元素)
<p class="first">三年级时,我还是一个<span>胆小如鼠</span>的小女孩</p> (胆小如鼠变成红色。)
子选择器
.food>li{border:1px solid red;}
和后代选择器类似
子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
伪类选择符
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{}
<a href="http://www.imooc.com">胆小如鼠</a> (胆小如鼠变色)
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
p{color:red!important;}
!important具有最高权值