初始 css
css 简介:
css 是一个层叠样式表
css 能够把款式和 htm 拆散
css 简略实用:
css 三种样式表
1. 第一种:内联样式表: 在标签中,把 CSS 值写在 Style 属性中。此种做法不举荐!不举荐的起因:①多个雷同的 Style 就要写多遍,代码量大 ② 没有实现标签和 CSS 拆散,前期维护性差
2. 第二种:内嵌样式表:把 CSS 款式写在 head 标签中. 实现 CSS 复用,还是没有实现 HTML 标签和 CSS 文件级别的拆散
3. 第三种:内部样式表:把 CSS 存在独自的 CSS 文件中,在 HTML 中 Link 相应的 CSS 文件即可
div 标签:
div 默认是一个矩形容器。
div 对网页经行布局。
width:宽度
height:高度
background-color:背景色
css 根本语法:
选择器 {
款式
}
id 选择器:#id 名称
class 选择器:.class 名称
标签选择器:div(间接写标签)
css 设置容器和字体大小:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html {font-size:20px;}
body{background-color:red;}
div {
width:1200px;
height: 200px;
background-color: navy;
font-size: 40px;
}
div>div{float:left; /* 所有的子 div 横向排列 */}
div>.one{
width:50%;
height: 90%;
background-color:indianred;
font-size:50px;/*div 外面字体大小 */
}
div>.two{
width:30%;
height: 90%;
background-color:yellow;
font-size:0.5em;
}
div>.three{
width:20%;
height: 90%;
background-color:magenta;
font-size:1.2rem;
}
#div01{
width:800px;
height: 200px;
background-color:rgba(0,0,128,.5);
/*color:#778899; 能够简写为:color:#789*/
color:rgb(78,190,22);
color:#333333
}
</style>
</head>
<body>
<div>
<div class="one">div01</div>
<div class="two">div02</div>
<div class="three">div03</div>
</div>
<div id="div01">
Web 前端课程之 CSS
</div>
</body>
</html>