学习CSS初识
2018-06-20 本文已影响0人
小猪Harry
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<style>
h1{
font-size: 200px;
color: #F00;
}
.abcd{
font-size: 100px;
}
#kkk{
font-size: 60px;
}
</style>
</head>
<body>
<h1>钢铁侠</h1>
<p class = "abcd">大家好，我是钢铁侠！</p>
<p id = "kkk">I am iron man!</p>
</body>
</html>
标签选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/>
类选择器
<标签名 class= "类名称">标签内容</标签名>
ID选择器
<标签名 id= "id名称">标签内容</标签名>
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
后代选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<style>
.abcd strong{
font-size: 100px;
}
</style>
</head>
<body>
<p class = "abcd">大家好，我是<strong>钢铁侠！</strong></p>
</body>
</html>
交集选择器
由两个选择器直接连接构成，选中二者各自元素范围的交集
第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
选择器之间不能有空格，必须连续书写
并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS介绍</title>
<style>
p.abcd{
color: blue;
}
h1,.abcd,#kkk{
font-size: 200px;
color: red;
}
</style>
</head>
<body>
<p class = "abcd">大家好，我是<strong>钢铁侠！</strong></p>
<h1>钢铁侠</h1>
<p id = "kkk">我是美国队长！</p>
</body>
</html>
行内样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式表
外部样式表
在CSS文件中：
p{
color: blue;
}
在HTML文件中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部样式表</title>
<link href="first style.css" rel="stylesheet">
</head>
<body>
<p>
大家好，我是钢铁侠！
</p>
</body>
</html>
CSS继承风格
子标签可以继承父标签的样式风格
子标签的样式不会影响父标签的样式风格
CSS优先级
ID选择器>类选择器>标签选择器
在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
应用important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{color:red!important;}
.first{color:blue;}
</style>
</head>
<body>
<p class="first" id="pid" style="color:green">三年级时，我还是一个<strong>胆小如鼠</strong>的小女孩。</p>
</body>
</html>
