1、定义样式
嵌入式, 标签需对应,注释用/* */
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS代码语法</title>
<style type="text/css">
p{
font-size:12px;
color:red;
font-weight:bold;
}
</style>
</head>
<body>
<p>服务及时</p>
</body>
</html>
内联式写法
<p style="color:red;
font-size:12px">这里文字是红色。</p>
外部css引用,
在<head>内使用<link>标签将css样式文件链接到HTML文件内
rel="stylesheet" type="text/css" 是固定写法不可修改。
<link href="base.css" rel="stylesheet" type="text/css" />
引用css:
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
stylesheet.css:
p {
color: red;
}
span {
color:blue;
}<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>
优先级:内联式 > 嵌入式 > 外部式,嵌入式>外部式有一个前提:嵌入式css样式的位置一定在外部式的后面。
设置边框颜色
selector {
border: 2px solid red;
}
td{
height:50px;
border:1px dashed blue; //虚线
}
table{
border:1px solid black; //实线
}
border-radius:5px; //圆角
div{
height: 50px;
width: 120px;
border-color: #6495ED;
background-color: #BCD2EE;
border-radius:5px;
margin:auto;
text-align:center;
}
仅改变在三个div里面的h2
div div div h2{}
所有元素增加样式
<span style="font-family:Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace;font-size:12px;color:#1f2426;">* {
border: 2px solid black;
}</span>
2、使用类选择器、ID选择器、子选择器、包含选择器、通用选择器、伪类选择器、分组选择器
.类选器名称{css样式代码;}
与class配合使用
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
.stress{
color:red;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时,我还是一个<span class="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
</body>
</html>
可同时使用两个样式
.stress{ color:red; } .bigsize{ font-size:25px; } <p>到了<span class="stress bigsize">三年级</span>下学期时,我们班上了一节公开课...</p>
ID选择器,前加#配合使用, 一个html中,ID选择器只可使用一次
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识html标签</title>
<style type="text/css">
#stress{
color:red;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p>三年级时,我还是一个<span id="stress">胆小如鼠</span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
</body>
</html>
子选择器>
会使子元素(如li,span)加入红色实线边框,作用于第一个直接后代
例
.food>li{border:1px solid red;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子选择符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年级时,<span>我还是一个<span>胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>卷心菜</li>
</ul>
</li>
</ul>
</body>
</html>
包含选择器,加入空格,作用于元素所有后代
.first span{color:red;}通用选择器,匹配html中所有标签元素
* {color:red;}
伪类选择器,设置鼠标滑过的样式
a:hover{color:red;}
a:link,a:visited也是
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>伪类选择符</title>
<style type="text/css">
a:hover{
color:red;
}
</style>
</head>
<body>
<h1>勇气</h1>
<p class="first">三年级时,我还是一个<a href="http://www.imooc.com">胆小如鼠</a>的小女孩</p>
</body>
</html>
分组选择器,同样样式的写在一起,如first所有,seconed下的span
.first,#second span{color:green;}
h1,span{color:red;}
选择第一个p的元素
p:first-child {
color: red;
}
选择第二个元素
p:nth-child(2){
font-family:Tahoma;
}