码迷,mamicode.com
首页 > Web开发 > 详细

html+css

时间:2019-05-07 21:39:10      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:cot   row   横线   结束   bsp   链接   部分   nbsp   orm   

1.页面基础元素:<html>
<html>是页面的基础元素,主要用来定义页面的开始和结束部分。元素语法结构如下<html>....</html>(开头标记为<>,结束标记为</html>)先介绍一下完整的HTML文件的基本结构

<html>           文件开始标记

<head>          文件头开始标记

.........                文件头部分的内容

</head>         文件头结束标记

<body>          文件主体开始标记

.........                文件主题部分的内容

</head>         文件主题结束标记

</html>          文件结束标记

2.基本标签

①头部元素:<head></head>

②标题元素   <title></title>

③超链接      <a href=" "></a>

④标题标签   <h1></hi1>
3.

<span></span> 无语义,标识作用
<br/>换行
&nbsp空格
<hr/>横线
<address></address>地址,斜体格式
<pre></pre>加一段代码
<ul>
<li></li>无序列表
</ul>

<ol>
<li></li>有序列表
</ol>

<div></div> 块

<table>
<tr>
<th></th>
<td></td>
</tr>
</tbody>
</table>

<style type="text/css"></style>

<a href="目标连接" title="" target="">链接显示的文本</a> 其中target=""表示打开的网页在新的标签页打开

<img src="图片链接" alt="图片加载失败时显示的文字" title="鼠标滑过图片时显示的文字">

<form method="post/get" action="数据被传送到的地方">
<input type="password" name="pass"/> 密码框
<textarea cols="50" rows="30">在这里输入内容</textarea> 介绍框
<input type="radio" value="值" name="somename" checked="checked"/> 单选框
<input type="checkbox" value ="值" name="somename" checked="checked"> 复选框
<select>/<select multiple="multiple">
<option value="值">显示的值</option>
<option value="值" selected = "selected">显示的值</option>
</select>
<input type="submit" value="确定" name="submit"/>
<input type="reset" value="重置" name="reset"/>
</form>
3.

<span class="name"></span>
.name{CSS样式}
<span id="name"></span>//一个名字只允许使用一次
#name{CSS样式}
子选择器 >
.first>secod{CSS样式}//只能是第一代子标签
后代选择器 (空格)
.father child{CSS样式}
通用选择器 *
伪类选择器:
例如 a:hover{color:red}
鼠标滑过显示红色
分组选择器
h,span{color:red}

CSS样式分为内联式、嵌入式、外部式
内联式:<p style="color:red"></p>
嵌入式:<style type="text/css"></style>
外部式:<link href="base.css" rel="stylesheet" type="text/css">
优先级:内联式>嵌入式>外部式
CSS样式权重:
标签权值为1
class选择器为10
id选择器为100
设置最高权值!important

盒子模型:
div{padding:1px 2px 1px 2px}//上,右,下,左
div{padding:1px}//全部
div{padding:1px 2px}//上下,左右

CSS布局模型
1)浮动模型(float)
可以实现块状元素在同一行
div{float:left/right}
2)
有三种定位方式:
绝对定位:position:absolute
相对定位:position:relative
固定定位:position:fixed
div{position:relative;
top:50px;
left:50px;}//相对于原位置向下向右移动50px,但偏离前的位置保持不变
div{
position:absolute;
top:50px;
left:50px;}//定位于父块距上和左50px

div{position:fixed;
bottom:0;
right:0;
}//定位于窗口

假设父块box1,和子块box2,要使得box2相对于box1定位,需要在box1设置position:relative,box2中设置position:absolute

3.

文字排版-字体设置body{font-family:"Microsoft Yahei";}    将字体设置为微软雅黑

文字排版-粗体
p span{font-weight:bold;}    将span指向的元素设置为粗体
下划线
p a{text-decotation:underline;}    将a标签下划线去掉

段落排版-对齐
h1{text-align:center/left/right;}    /*设置块状元素为居中/居左/居右*/

html+css

标签:cot   row   横线   结束   bsp   链接   部分   nbsp   orm   

原文地址:https://www.cnblogs.com/yuyuanwen/p/10828062.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!