学习CSS之前要对HTML有个基础的了解
CSS样式主要用于改变HTML内容在浏览器里显示的样式,如字体、颜色等,CSS样式可以让不同网页位置的文
字有统一的字体、字号或者颜色等
1.基本:
<head>
<style type="text/css">
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设
置字体加粗*/
}
</style>
</head>
CSS样式在<head><head/>里面编辑,同时注意<style type="text/css">不可少
运用CSS样式在<body></body>里面运用如下:
<body>
1.基本:
<head>
<style type="text/css">
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设
置字体加粗*/
}
</style>
</head>
CSS样式在<head><head/>里面编辑,同时注意<style type="text/css">不可少
运用CSS样式在<body></body>里面运用如下:
<body>
<p>
你好,世界
</p>
</body>
//其中'你好,世界'则运用CSS样式
2.CSS样式有多条声明的时候,用分号隔开;例如
p{font-size:12px;color:red;}
3.CSS样式用/*注释语句*/来注释
4.CSS样式代码插入有三个方式:内联式、嵌入式和外部式
内联式:<p style="color:red">文字为红色的</p>//样式代码要写在style=“”双引号中
嵌入式:<style type="text/css">
span{
color:red;
}
</style>
外部式:把CSS代码写在一个单独的外部文件中,这个样式文件以“.css”为扩展名,在<head>里
你好,世界
</p>
</body>
//其中'你好,世界'则运用CSS样式
2.CSS样式有多条声明的时候,用分号隔开;例如
p{font-size:12px;color:red;}
3.CSS样式用/*注释语句*/来注释
4.CSS样式代码插入有三个方式:内联式、嵌入式和外部式
内联式:<p style="color:red">文字为红色的</p>//样式代码要写在style=“”双引号中
嵌入式:<style type="text/css">
span{
color:red;
}
</style>
外部式:把CSS代码写在一个单独的外部文件中,这个样式文件以“.css”为扩展名,在<head>里
<style>外,使用<link>标签将CSS样式文件链接到HTML文件内,如下:
<link href="jichu.css" ref="stylesheet" type="text/css"/>
其中rel="stylesheet" type="text/css" 是固定写法不可修改
5.CSS样式3种方式的优先级:内联式>嵌入式>外部式 //其中嵌入式和外部式遵循就近原则,离被设置元素
<link href="jichu.css" ref="stylesheet" type="text/css"/>
其中rel="stylesheet" type="text/css" 是固定写法不可修改
5.CSS样式3种方式的优先级:内联式>嵌入式>外部式 //其中嵌入式和外部式遵循就近原则,离被设置元素
越近优先级别越高
6.类选择器:.类选择器名称{css样式代码;} 如.stress{color:red}
使用class="类选择器名称"为标签设置一个类 如<span class="stress">你好</span>
//可以多次使用
7.ID选择器:#setGreen{
color:green;
}
<span id="setGreen">你好</span>
为标签设置id="ID名称",而不是class="类名称"。
ID选择符的前面是井号(#)号,而不是英文圆点(.)。
//仅可以使用一次
8. .stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期</p>
类选择器可以叠加使用
但是ID选择器不可以如上使用只能单独使用
9.子选择器
.food>li{border:1px solid red;}//这行代码会使class名为food类下的子元素li加入红色实线边框,
6.类选择器:.类选择器名称{css样式代码;} 如.stress{color:red}
使用class="类选择器名称"为标签设置一个类 如<span class="stress">你好</span>
//可以多次使用
7.ID选择器:#setGreen{
color:green;
}
<span id="setGreen">你好</span>
为标签设置id="ID名称",而不是class="类名称"。
ID选择符的前面是井号(#)号,而不是英文圆点(.)。
//仅可以使用一次
8. .stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期</p>
类选择器可以叠加使用
但是ID选择器不可以如上使用只能单独使用
9.子选择器
.food>li{border:1px solid red;}//这行代码会使class名为food类下的子元素li加入红色实线边框,
如下:
<ul class="food">
<li>水果
</li>
</ul> 即为类class小的li增加了红框
<ul class="food">
<li>水果
</li>
</ul> 即为类class小的li增加了红框
10.包含选择器
空格作用于元素所有后代
对比上两图即可知道区别所在