day003_css基础
2022-03-11 本文已影响0人
kusasakey
-
css 标签选择器 id选择器 类选择器（开发使用）
-
css 链接方式 1、内嵌式（head标签内未分离，加载速度快） 2、外链式（分离） 3、行内式
-
css后代选择器 并列选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 复合选择器 css后代选择器 并列选择器</title>
<style type="text/css">
div span{color:pink;}
div p,div h1{color:blue;}
div.div1{font-size:100px;}
p.p{color:green;}
</style>
</head>
<body>
<h1>title1</h1>
<div>
<p>文章主题</p>
<h1>title1</h1>
<div >
<span> span</span>
</div>
</div>
<div class="div1">指定标签式</div>
<p class="p">p.p</p>
</body>
</html>
图片.png
- css选择器权重 1、内嵌和外嵌的CSS先写的会被后写的覆盖 2 、id>class>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器权重对比</title>
<style type="text/css">
span{color:red;}
div span{color:blue!important;}
p span{color:yellow;}
.page span{color:red;}
/*span_id{color:black;}*/
</style>
</head>
<body>
<div>
<p class="page">
<span class="sp" id="span_id">hahahaa</span>
</p>
</div>
<div class="p1">
<p> 标签1 类10 id 100</p>
</div>
<div class="d"></div>
</body>
</html>
权重计算.png
- google 案例
google.html
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title>google</title>
<style type="text/css">
/*内嵌式css*/
</style>
<link rel="stylesheet" type="text/css" href="google.css"/>/*外嵌式css*/
</head>
<body>
<span class="login blue">G</span>
<span class="login_juhong">o</span>
<span class="login_orange">o</span>
<span class="login blue">g</span>
<span class="login_green">l</span>
<span class="login_red">e</span>
</body>
</html>
google.css
span{font-size:100px;}
.blue{color:blue;}
.login_juhong{color:#cc3300;}
.login_orange{color:orange;}
.login_red{color:red;}
.login_green{color:green;}
google.png
6.css文字常见属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css常见属性</title>
<style type="text/css" >
h1{font-weight:normal;}
p{font-weight:bold;}
h2{font-style:normal;}
em{font-style:italic;}
.a1{text-decoration:none;}
.a2{text-decoration:line-through;}
.a3{text-decoration:underline;}
.a4{text-decoration:overline;}
/*英文单词 word-break:break-al;*/
h3{
width:200px;
height:200px;
background:pink;
text-decoration:overline;
word-break:break-all;
}
/*伪类 鼠标移动事件实现：*/
a:hover{color:green;}
/*行高属性 line-height*/
div p {
width:200px;
height:200px;
background:pink;
line-height:50px;
word-break:break-all;
}
</style>
</head>
<body>
<h1> font-weight:normal;</h1>
<p>font-weight:bold;</p>
<em>font-syle:normal;</em>
<h2>font-style:italic</h2>
<a href="###">a default</a><br/>
<a href="###" class="a1">a none </a><br/>
<br/>
<a href="###" class="a4">a overline</a><br/>
<a href="###" class="a2">a line-through</a><br/>
<a href="###" class="a3">a underline</a><br/>
<h3>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h3>
<div>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
</body>
</html>
效果.png
7、盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style >
.div1{
width:200px;
height:200px;
background:pink;
border:10px solid green;
/*solid 实线 dashed 虚线*/
}
.div2{
width:200px;
height:200px;
background:pink;
border-bottom:1px solid blue;
border-top:5px dashed yellow;
}
.div3{
width:200px;
height:200px;
background:pink;
border-bottom:1px solid blue;
border-top:5px dashed yellow;
}
</style>
</head>
<body>
<div class="div1">aaaa</div><br/>
<div class="div2">aaaa</div><br/>
<div class="div3">aaaa</div><br/>
</body>
</html>
div3.png
框高+边框+内边距（内容+框的距离）+外边距（盒子和盒子之间对的距离）=盒子模型
8.html5 新标签 ie不支持，支持手机网页书写，提高搜索引擎对网站的优化。
