发表于： 2019-05-15 21:06:30
1 878
今天完成的事件
用昨天学到的标签简单写了个网页
遇到问题；
不知道为什么写的 生产数量 和时间没有显示出来只有名称显示出来。
问题解决td打成了tb。
复习之前所学的代码写的简单网页。
==========================================================================================
Css主要用于定义html内容在浏览器内显示样式大小文字颜色等。
语法如下
P{
Font-size:12px;//字体大小规格
Color:red;// 设置颜色的
Font-weight;bold;//字体加粗的
}
Css样式选择符和声明组成，声明是由熟悉和值组成如图下
选择符：又叫选择器，指网页中的各种标签 如<p>,<h1>以及请他标签。
如果你没有选择其他标签 那么他们是不会受到影响的。
声明：在英文大括号{ }里面必须要有属性和值如p{font-size:12px; }//前面是属性用来确定字体大小后面是值就是参数。
Css样式代码插入的形式来看基本分为3种：内联式，嵌入式和外部式三种。
内联式css样式表就是把css代码直接写在现在有的html标签中代码如下
<p style =”color:red;”>这是红色字体</p>
通过CSS内联式 插入代码 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<h1 style="color: red" >肥皂</h1>
<p></p>
</body>
</html>
嵌入式css样式；
就是可以把样式代码写在
<style type=”text/css”> //可以理解为 type是style属性 text/css是值 告诉浏览器 这个元素有text文本内容是css来解析的。
Span{
Color:red;
}
</style>
外部式css样式 卸载单独一个文件中
外部式css样式（叫外联式）就是把css代码写在单独的外部文件中，这个css样式文件以.css为扩展名 在<head>内
外部式就相当于重新创建一个文件里面写入CSS样式代码 把文件扩展名写入.css在主代码进行声明
<link href="border.css" rel="stylesheet">
<link > 是用来外部链接的
盒子模型 边框
代码如下
Div{
Border-width;2px // 宽度规格
Border- style: solid(实线) dashed(虚线) dotted(点线) //类型是 是什么线
Border-color:red // 规定线是什么颜色
｝
Border 意思是边线。
盒子模型 宽度和高度
Scc内容定义的宽度(width)和(height)高是指内容的范围
Css代码如下
Div{
Width:200px
Padding:20px //这个2个单词是定义内容高20宽200
Border:1px solid red //broder四边的规格是多少 和线的定义是虚线或实线以及最后的颜色定义
}
任务13编码实战
div{
width: 0px;
padding: 0px;
border: 50px solid yellow;
margin: 20 px;
}
Border.css (外部链接)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="border.css" rel="stylesheet">
</head>
<body>
<div></div>
</body>
</html>
这里要注意的是要实现黄色小方块必须是标签必须是块状元素
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
内联元素要有文本内容才能在网页显示出来。
在这里内联元素 转换成块装元素
语法如下a{display:block;}
块状元素转换成内联元素
语法如下｛display:inline;｝
Padding 是填充边框里面的上下左右
Margin 是来设置边框外上下左右
任务9宫格
table tr td,th{
border:30px solid yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="border.css" rel="stylesheet">
</head>
<body>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
通过table 制作表格的方式获得9宫格 但还是不太理解外边框和内边框 这个表格tr标签定义表格行 th td单元素来定位正方形框架 然后用 border来定义它的线的颜色。感觉Th td是内框 border：50px solid yellow 语句也可以把内容也染成黄色。
Css布局模式
Css包含3种基本布局模式
1流动模式（flow）
2浮动模式（float）
3层模式（layer）
流动模型
是默认的网页布局。也就是说在网页默认状态下html网页元素都是根据流动模型来分布网页内容。比如 块状元素会在这个默认模式下 自上而下按顺序垂直分布，元素的宽度都是为100%。块状元素都会也行的形式占据位置如（div h1 p）宽度显示都为100%
如图
在流动模式下 内联元素是从左到右水平分布显示，不会想块状元素独占一行。
在代码中内联元素标签 a span em strong 显示如图
今天学的内边框与外边框边和 块状元素 内联元素，以及内联块状元素。每个块状元素应该都是内边宽可以用border：50px solid yellow让线的的规格大小或者是虚线还是点线，实线
和上颜色。外边框应该就是离网页边框的距离。而块状元素和内联元素在流动模式上表现的又各不一样。块状元素在流动模式上是独占一行从上到下垂直输出的。而内联模式是从左到右进行输出不单独占一行而且它好像没有边框。
返回列表
评论