一、简介
1.html
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。
2.css
CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的,这些元素如何呈现,涉及许多方面,如整个页面的布局,元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。
二html基本内容
(1)html标签
整个网页是从<html>这里开始的,然后到</html>结束。(2)head标签
(2)标题
HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZONGXP</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>
(3)段落
HTML 段落是通过标签
来定义的
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
(3)链接
HTML 链接是通过标签 <a> 来定义的
<a href="">这是一个链接使用了 href 属性</a>
(4)图像
HTML 图像是通过标签 来定义的。注意: 图像的名称和尺寸是以属性的形式提供的。
<img src="zongxp.jpg" width="640" height="640" />
(5)表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 <th> 标签进行定义。如果不定义边框属性,表格将不显示边框。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
(6)标签
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> (换行)
<hr> (水平线)
(7)链接
:<a href="http://www.example.com/">链接文本</a>
<a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
<a href="mailto:webmaster@example.com">发送e-mail</a>
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
(8)图片
<img src="URL" alt="..." height="42" width="42">
(9)无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
(10)有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
(11)表格
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
三、css基本内容
(1)基本语法
选择器:{属性名:属性值;属性名:属性值}
选择器:用来选择标签然后增加样式
div{
width:100px;
height:100px;
background:gold;
}
class选择器
它的值可以多个也可以重复
.center{text-align:center;}
(2)如何生效
外部样式表
先创建一个html文件
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
<h2>h2》</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4<span>p5</span></p>
</body>
</html>
同一目录创建css文件
h2{
color: lightsalmon;
}
p{
color:limegreen ;
font-size: 18px;
line-height: 20px;
}
span{
color: mediumpurple;
font-weight: bold;
}
在html文件中用来引用css文件
内部样式表
内部样式表指的是将css台吗卸载html文档中的head标签中,并且用style标签定义
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2{
color: green;
font-size: 20px;
}
h4{
color: purple;
font-size: 18px;
}
p{
color: blue;
font-size: 16px;
}
</style>
`
内联优先级
1.内联样式
2.内部样式表或外部样式表
3.浏览器省缺样式
(3)文本属性
1.color
颜色名称:英文单词(如Tomato)
color: red;
16进制rgb值:#RRGGBB
background-color:#ccc;
rgb函数:rgb(red,green,blue)
background-color: rgb(0, 237, 255);
rgba函数:rbga(red,green,blue,alpha)
background-color: rgba(0, 237, 255, 0.5);
2.尺寸
用height和width来设置元素内容转矩的尺寸
width: 100%;
height: 200px;
3.对齐
对于元素中的文本,我们可以简单的设置text-align属性为left,center,right
(4)盒子模型
盒子模型指的是一个 HTML 元素可以看作一个盒子。从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的
content盒子的内容
padding填充
border边框
margin外边框
先建立html文件
<html>
<head>
<link rel="stylesheet" href="./mycss.css">
</head>
<body>
<div class="box1">我是内容一,外面红色的是我的边框。注意边框的内外都有25px的距离。</div>
<div class="box2">我是内容二,外面蓝色的是我的边框。注意与上面元素的外边距,发生了叠加,不是50px而是25px。</div>
</body>
</html>
在建立css文件
.box1 {
height: 200px;
width: 200px;
background-color:#615200;
color: aliceblue;
border: 10px solid red;
padding: 25px;
margin: 25px;
}
.box2 {
height: 300px;
width: 300px;
background-color:#004d61;
color: aliceblue;
border: 10px solid blue;
padding: 25px;
margin: 25px;
}
(5)边框与变距
1.边框
上下左右都相同的边框
border: 1px dotted black;
只设置低边框
border-bottom: 1px solid blue;
边框圆角
border: 1px solid grey;
border-radius: 15px;
2.边距
padding:20px;上下左右相同
padding-top:20px
padding-right:20px
padding:20px,20px,20px,20px;上下左右顺序
padding:25px,20px;简写上下位25px,左右位20px
(6)定位
1.静态定位
position:static;元素的默认定位方式,无论设置与否,元素将按照正常布局进行
2.相对定位
position:relative;相对正常位置进行的偏移
<head>
<style type="text/css">
.box {
background: red;
width: 100px;
height: 100px;
float: left;
margin: 5px;
}
.two {
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box" >One</div>
<div class="box two" >Two</div>
<div class="box" >Three</div>
<div class="box">Four</div>
</body>
3.固定定位
position:fixed;使元素固定不动
4.绝对定位
position:absolute;将使元素相对于其最近设置了定位属性(非static)的父元素进行偏移。
(7)溢出
visible 默认值,溢出部分不被裁剪,在区域外面显示
hidden 裁剪溢出部分且不可见
scroll 裁剪溢出部分,但提供上下和左右滚动条供显示
auto 裁剪溢出部分,视情况提供滚动条
(8) 浮动
使用float属性让元素水平方向上向左或者向右移动,周围元素从新排列
(9)不透明度
用opacity对任何元素设置不透明度值越低不透明度越低
注意:值在0.0~1.0之间
(10)组合选择器
1.后代选择器
<head>
<style>
div p
{
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
2.子元素选择器
<head>
<style>
div>p
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>欢迎来到我的主页</h1>
<div>
<h2>我的名字叫Tom</h2>
<p>我住在中国</p>
</div>
<div>
<span><p>啊哈哈</p></span>
</div>
<p>我最好的朋友是Rose</p>
(11)伪类和伪元素
1.伪类:
为处于某个状态的已有元素添加对应的样式,这个状态是根据用户行为而动态改变的。
它可以用于
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
2.伪元素
创建一些不在文档树中的元素,并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。)
它可以用于设置元素的首字母、首行的样式,在元素的内容之前或之后插入内容。