html 常用样式
一、form表单
form表单标签
action属性：设置表单内容提交后的处理程序
method属性：表单内容提交方式，常用值有get和post两种
input标签：输入框
type：设置输入框的类型
text：文本框
password“密码框
radio：单选按钮
checkcbox：复选框
file:文件域
button：普通按钮，结合JS代码一起使用
rest:重置按钮
submit：提交按钮
image：图片按钮
checked属性：可以给单选按钮、复选框设置默认选项
textarea:文本域
select标签：下拉框，下拉选项使用option标签来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<form action="" method="">
姓名：<input type="text" /><br />
密码：<input type="password"/><br />
性别：<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex"/>女<br />
爱好：<input type="checkbox"/>篮球
<input type="checkbox"/>足球
<input type="checkbox"/>棒球
<input type="checkbox" checked="checked"/>乒乓球
<input type="checkbox"/>羽毛球<br />
生日：<select>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option selected="selected">1994</option>
<option>1995</option>
</select>年
<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>月
<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>日<br />
照片<input type="file"/><br />
自我介绍：<textarea cols="80" rows="10">请输入你的自我介绍</textarea><br />
<!-- 按钮 -->
<input type="reset" value="重填" />
<input type="button" value="你点我一下" onclick="alert('你点我干什么')"/>
<input type="submit" value="登录" />
<input type="image" src="img/submit.png" />
</form>
</body>
</html>
二、行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<h2 style="color: red;">望庐山瀑布</h2>
<p style="color: blue;">日照香炉生紫烟，</p>
<p style="color: blue;">遥看瀑布挂前川。</p>
<p style="color: blue;">飞流直下三千尺，</p>
<p style="color: blue;">疑似银河落九天。</p>
</body>
</html>
三、内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内部样式</title>
<style>
h2{
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<h2>悯农</h2>
<h2>李绅</h2>
<p>锄禾日当午，</p>
<p>汗滴禾下土。</p>
<p>谁知盘中餐，</p>
<p>粒粒皆辛苦。</p>
</body>
</html>
四、外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>外部样式</title>
<!-- <style>
@import url(css/MyCss.css);
</style> -->
<link rel="stylesheet" href="css/MyCss.css">
</head>
<body>
<h2>赠汪伦</h2>
<p>李白乘舟将欲行，</p>
<p>忽闻岸上踏歌声。</p>
<p>桃花潭水深千尺，</p>
<p>不及汪伦送我情。</p>
</body>
</html>
表示颜色的方式：
方式一：颜色英文单词表示法
方式二：RGB表示法 rgb(r,g,b) r,g,b分别是0-255之间的数字
方式三：RGBA表示法 rgba(r,g,b,a) r,g,b分别是0-255之间的数字 a是表示透明度，数字介于0-1之间，数字越小越透明
方式三：十六进制表示法 #------ -表示十六进制数字，从0-9，A-F
h2 {
/* color: red; */
/* color:rgb(255, 0, 0); */
/* color: rgba(255, 0, 0, 0.9); */
color:#f00;
}
p {
color: blue;
}
五、选择器
1.标签选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标签选择器</title>
<style>
p{
color: #f00;
}
a{
color: #00f;
text-decoration: none;
}
</style>
</head>
<body>
<p>标签选择器作用样式</p>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
2.class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>class选择器</title>
<style>
p{
color: #00f;
}
.second{
color: #f00;
}
</style>
</head>
<body>
<h2 class="second">七步诗</h2>
<p>煮豆燃豆萁，</p>
<p class="second">豆在釜中泣。</p>
<p class="second">本是同根生，</p>
<p>相煎何太急。</p>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
p{
color: #f00;
}
/*
id选择器具有唯一性，只在标签中使用1次
*/
#abc{
color: #00f;
}
</style>
</head>
<body>
<h2>题西林壁</h2>
<p>横看成岭侧成峰,</p>
<p id="abc">远近高低各不同。</p>
<p>不识庐山真面目,</p>
<p>只缘身在此山中。</p>
</body>
</html>
4.选择器优先级
id选择器、class选择器、标签选择器优先级：
行内样式>id>class>标签
!important:提升样式为最高级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器优先级</title>
<style>
#idSty{
color: #00f;
}
.classSty{
color: #0f0;
font-size: 30px;
}
p{
color: #f00;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="classSty" id="idSty">你猜猜我会是什么颜色</p>
</body>
</html>
5.层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层级选择器</title>
<style>
p {
border: 1px solid red;
}
/* 选择body标签里的后代p标签 */
/* 后代选择器 E F */
/* body p{
background-color: #ff0;
} */
/* 选择body标签里的子代p标签 */
/* 子代选择器 E>F */
/* body>p{
background-color: blanchedalmond;
} */
/* 选择紧跟在类名为test的元素后面的那个相邻兄弟 */
/* 相邻兄弟选择器 E+F */
/* .test+p{
background-color: blanchedalmond;
} */
/* 通用兄弟选择器 */
/* 选择在类名为test的标签后面的兄弟p */
.test~p {
background-color: #ff0;
}
</style>
</head>
<body>
<p>p0</p>
<p class="test">p1</p>
<p>p2</p>
<p>p22</p>
<ul>
<li>
<p>p3</p>
</li>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
</body>
</html>
六、span标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
color: #f00;
font-size: 30px;
}
</style>
</head>
<body>
<p>大湖名城，<span>创新</span>高地</p>
</body>
</html>
七、字体
1.字体类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a {
font-family: Times, "Times New Roman", "楷体";
}
</style>
</head>
<body>
<p>字体类型展示</p>
<a href="#">百度</a>
</body>
</html>
2.字体风格
font-style：normal/italic/oblique
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
em{
font-style: normal;
/* font-style: italic; */
/* font-style: oblique; */
}
</style>
</head>
<body>
<em>看看我是不是倾斜的</em>
</body>
</html>
3.字体粗细
font-weight: normal(正常)/bold(加粗)/数值;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
em{
font-weight: normal;
/* font-weight: bold; */
}
</style>
</head>
<body>
<em>看看我是不是倾斜的</em>
</body>
</html>
4.文本颜色
color: 四种颜色表示方式;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
em{
color: #F00;
}
</style>
</head>
<body>
<em>看看我是不是倾斜的</em>
</body>
</html>
5.文档排版
text-align: left/right/center;左对齐/右对齐/居中
text-indent:2em;首行缩进2个字节
line-height: 28px;设置行高
text-decoration: blink;设置下划线
6.垂直对齐
vertical-align:middle;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>垂直对齐方式</title>
<style type="text/css">
img,span{
vertical-align:middle;
}
</style>
</head>
<body>
<p>
<img src="image/icon.gif" width="129" height="121" />
<span>图片与文本垂直居中对齐</span>
</p>
</body>
</html>
八、背景
1.背景颜色
background-color:四种颜色表示方式;
2.背景重复
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> background-repeat</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url("image/1.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
3.背景图像
图片地址：background-image:url(…/image/arrow-down.gif);
是否平铺：background-repeat:no-repeat;
图片定位：background-position:205px 10px;
综合：background:#C00 url(…/image/arrow-down.gif) 205px 10px no-repeat;
九、盒子模型
1.盒子边框颜色
在设置颜色之前，首先应该设置边框类型。
border-color: #f00 #0f0 #00f #ff0;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
background-color: #ccc;
/* 在设置颜色之前，首先应该设置边框类型 */
border-style: solid;
/* border-top-color: #f00;
border-right-color: #0f0;
border-bottom-color:#00f ;
border-left-color:#0ff ; */
/* border-color: #f00; */
/* border-color: #f00 #0f0; */
/* border-color: #f00 #0f0 #00f; */
border-color: #f00 #0f0 #00f #ff0;
}
</style>
</head>
<body>
<div>我是div元素</div>
</body>
</html>
2.盒子边框粗细
在设置粗细之前，首先应该设置边框类型。
border-width: 10px 20px 30px 40px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
background-color: #ccc;
/* 在设置粗细之前，首先应该设置边框类型 */
border-style: solid;
/* border-top-width: 10px;
border-right-width: 20px;
border-left-width: 5px;
border-bottom-width: 30px; */
/* border-width: 10px; */
/* border-width: 10px 20px; */
/* border-width: 10px 20px 30px; */
border-width: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>我是div元素</div>
</body>
</html>
3.盒子类型的类型
border-style: solid;
| 值 | 描述 |
|---|---|
| none | 定义无边框。 |
| hidden | 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 |
| dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
| dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
| solid | 定义实线。 |
| double | 定义双线。双线的宽度等于 border-width 的值。 |
| groove | 定义 3D 凹槽边框。其效果取决于 border-color 的值。 |
| ridge | 定义 3D 垄状边框。其效果取决于 border-color 的值。 |
| inset | 定义 3D inset 边框。其效果取决于 border-color 的值。 |
| outset | 定义 3D outset 边框。其效果取决于 border-color 的值。 |
| inherit | 规定应该从父元素继承边框样式。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 500px;
height: 500px;
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
