表示颜色的有三种方式
表示颜色的有三种方式;
1,16进制颜色代码
语法:#RRGGBB
例:<font color="#ff0000">红色</font>
2,10进制RGB码
语法:RGB(RRR,GGG,BBB)
例:<font color="rgb(255,000,000)">红色</font>
3,直接用颜色的英文名称
例:<font color="red">红色</font>
<body>.....</body>属性可分为三种:
1,背景属性
包括:bgcolor,background
2,文字属性:
包括:text,link,alink,vlink,
3,留白属性:
其中分为:leftmargin,topmargin
.bgcolor背景色
语法格式:<body bgcolor="#ff0000">
.background背景图案。
语法格式:<body background="url">
.text文本颜色(非连接文字颜色)
.link连接文字颜色(可连接文字颜色)
.alink活动连接文字颜色(正被点击的可连接文字的颜色)
.vlink已访问连接文字颜色)(已经点击访问过的可连接文字的颜色)
语法格式:<body text="color" link="color" alink="color" vlink="color">
.leftmargin 页面左侧的留白距离
.topmargin 页面顶部的留白距离
语法格式:<body leftmargin="value" topmargin="value">
注:value为长度值为数字
align 属性
语法:<h2 align="?">文字</h2>
其属性有三种:left靠左,center居中,right靠右
〈p〉</p>为段落标记,可利用以上属性对整个段落进行设置
〈br>为换行标记
<nobr></nobr>为不换行标记 放在文字两边即可
例:<body>
<h3>江南逢李龟年</h3>
<p>歧王宅里寻常见<br>
催九堂前几度闻<br>
正是江南好风景<br>
落花时节又逢君</p>
</body>
预格式化:
<pre>......</pre> 浏览是效果和编写是效果格式一样
列表
1无序列表又称符号列表
语法格式:
<ul type="">type的属性可选直disc实心圆点,clrcle空心圆点,square实心方框
<li>文字</li>
<li>文字</li>
</ul>
2有序列表
语法格式:
<ol type="?" start"?">
<li>文字</li>
<li>文字</li>
</ol>
type的值是编号字符可选的有1...,a...,A...,i... ,I...
start为起始值例:如果start为3是那么将从3开始,而且必须是数字。
3定义列表
<dl>定义列表标记
<dt>标示定义条目
<dd>标示定义内容
语法格式:
<dl>
<dt>文字</dt>
<dd>文字内容</dd>
</dl>
连接和图像
语法格式:
<a href="url" name="?" target="?" title="?">....</a>
属性:href 连接目标 值可以是url地址也可以是连接锚点
<a href="url">...</a>或者
<a href="锚点">...</a>
name 连接名称
语法格式:<a name="锚点名称">...</a>
例:<a name="abcdcf">...</a>
连接到该锚点的连接则应是:
<a name="#abcdef">....</a>
target目标窗口语法格式:
<a href="url"target="_blank|_self|_farent|_top|windowname">....</a>
-blank打开新窗口
_self当前窗口打开
一下两个仅在框架叶面中应用
_parent当前窗口的父级窗口(上一级)打开
_top在最高一级的窗口打开
windowname已命名的窗口或框架中打开连接
title连接提示
<a href="http://www.crazytribe.net" title="打开狂人部落的首页">狂人部落</a>
图像<img> 语法格式:
<img src="url" alt="?" width="?" height="?" border="?" align="?">
border属性定义图片边框的宽度,默认值为0
align属性设置图片旁边文字的位置
语法格式:<img src="" align"">
可选值有:
top图片和文字顶部对齐
middle图片和文字居中对齐
bottom图片和文字底边对齐(默认)
left图片居左对齐,文字沿图片绕排
right图片居右对齐,文字沿图片绕排
absmiddle图片对齐到目前文字行绝对中央
absbottom图片对齐到目前文字行绝对底部
文字的排版
不换行空白标记
font元素
语法格式:
<font face="字体名称" size="字体大小" color="字体颜色">
字体大小可选值为1——7,默认为3
例:〈font face="黑体" size="4" color="#ff00ff">....</font>
水平线<hr>
语法格式:<hr width="宽度" align="对齐方式默认居中center" size="水平线厚度默认为2" color="颜色" noshade>
noshade无阴影,既实线
层〈div><span>两种元素
<div>是块级元素,和段落元素<p>相似,不同的是两个<div>元素之间不会产生两个<p>元素之间的空行,
<span>是行内元素,可以定义段落中部分文字的属性
语法格式:
<div align="" style="">...</div>
align设置层中元素的水平对齐方式
stule设置元素应用css规范的属性
<div>兼容性比<span>要好一点,最好使用<div>
表格语法格式:
<table width="" bgcolor="" background="" border="" cellspacing="" cellpadding="">
<tr>...<td>....</td>....</tr>
</table>
border边框宽度默认值为0,既没有边框
cellspacing表格中单元格的边距大小,默认值为两个像素
cellpadding表格中单元格之间的间距大小,默认值为两个像素
tr元素
语法格式:
<tr align="" bgcolor="">....</tr>
align属性对齐方式可选值如下:left,center,tight,默认为left
bgcolor指定该行的背景颜色
td元素
语法格式:
<td width="宽度" height="高度" align="水平对齐方式" valign="垂直对齐方式" bgcolor="" background="" rowspan="单元格的行跨度" colapan="单元格的列跨度">.....</td>
align属性的可选值有:left,center,right
valign属性的可选值有:top,middle,bottom
rowspan和colapan跨行和跨列的数量,默认为1
input元素 语法格式:
<input type="">
type属性的可选值有:
text 单行文本框
属性:name 文本框名称
value 文本框的初始值
size 文本框的长度
maxlength 可输入字符串最大的长度
radio 单选框
属性:name 单选框名称
value 内部值
checked 默认选定
checkbox 复选框
属性:name 复选框名称
value 内部值
checked 默认选定
reset 重置按钮
submit 确定按钮
属性:name 按钮名称
value 显示在按钮上的文字
password 密码框
属性与文本框的属性完全相同
file 文件域
属性:name文件域名称
size 文件域的长度
maxlength 文件域可接受的字符数量的上限
hidden 隐藏域
属性:name 隐藏域名称
value 内定值
image 图片域
属性:name 所要代表的按钮,可以是submit,reset,或其他.
src 按钮图片的url 地址
列表框<select>
语法格式:
<select>
.....
<option>....</option>
.....
</select>
select元素
语法格式:<select name="" size=""multiple></select>
name 指定列表框的名字
size 指定列表框显示列表项的条数,如果指定了该参数,select元素是个列表,否则是一个下拉列表框
multiple 指定了这个参数,则表示该列表框可选择多项,否则只可选择一项
option属性
语法格式:<option value="" selected></option>
value 该列表项的值
selected 如果设定了这个参数,默认为选定这一项
多行文本框<textarea>
<textarea name="" cols="" rows="" wrap="off/physical/virtual"></textarea>
属性:
name文本框的名称
cols文本框的宽度
rows文本框的高度
wrap文本框的折行方式可选值有:
off不保存换行信息
physical强迫浏览器在发送信息到web服务器端时必须将多行文本框的文字一行一行的送出,
virtual送出连续成串的字除非使用者按回车。
css 层叠样式表
引入层叠样式表的方法包括:
外联式样式表
例:<head>
<link rel="stylesheet" href="/css/default.css">
</head>
<body>
....
</body>
</html>
属性:rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址
内嵌式样式表:
例:<html>
<head>
<style type="text/css">
<!--
td{font:9pt;color:red}
.font105{font:10.5pt;color:blue}
-->
</style>
</head>
<body>....</body>
</html>
元素内定
格式:<p style="font-size:10.5pt">
导入式样式表
〈html>
<head>
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
<body>
....
</body>
</html>
css的优先级
越接近目标的样式定义优先级越高,高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义
如果4种样式表对同一元素定义了不同的样式,那么他们的优先级顺序从高到低是,元素内定,内嵌样式表,导入样式表,外联样式表。
css结构
例:td{font-size:10.5pt;color:#666666}
css样式包含两个基础部分,
选择符<td>和声明{font-size:10.5pt;color:#666666}
声明也有两部分组成:
属性font-size,color和值10.5pt,#666666
选择符分为6种
1元素选择符
当页面上多个元素的样式相同时,可以将多个元素放在一起定义,中间以逗号分开 例:td,p,li,input,select{font-size:12px;}
2class(类)选择符
例:〈head>
<title>.....</title>
<style type="text/css">
<!--
.red{font-size:10.5pt;color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井冈山地方官</p>
<p>九连环离开计划</p>
</body>
还有一种方法就是限定可以应用它的页面元素
例:〈head>
<title>.....</title>
<style type="text/css">
<!--
h1.red{color:#ff0000}
-->
</style>
</head>
<body bgcolor="#ffffff">
<p class="red">士大夫井冈山地方官</p>
<h1 class="red">九连环离开计划</h1>
</body>
3 id选择符
与class选择附类似,只是把'.'换成'#'
例:<body>
<head>
<style type="text/css">
<!--
#select{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center" id="select">id选择符</td>
</tr>
</table>
</body>
</html>
我们看到在调用ID选择附时与CLASS选择附类似,只是将class=""换成了id="",方便页面脚本语言的调用
关联选择符
<body>
<head>
<style type="text/css">
<!--
td p{font-size:18px;color:#0000ff}
-->
</style>
</head>
<body>
<table width="250" border="1" height="50">
<tr>
<td align="center"><p>关联选择符</p></td>
</tr>
</table>
<p>关联选择符</p>
</body>
</html>
我们设定了在元素中<td>的元素<p>所包含文字的样式,只有在两个条件都满足是,样式在会起作用,
伪类选择符
是只能用在css选择符里,而不能用在html代码中的选择符
例:
〈html>
<head>
<style type="text/css">
<!--
a:link{color:#000000}
a:visited{color:#cccccc}
a:hover{color:#ff0000}
a:active{color:#ooooff}
-->
</style>
</head>
<body>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
<p><a href="#">关联选择符</a><p>
〈/body>
</html>
正确的顺序是a:link\a:visited\a:hover否则会引起页面上连接颜色混乱
伪元素选择符
与伪类选择符定义类似,目前被大多数浏览器支持的有两个:首行伪元素(first-line)和首字符伪元素(first-letter)是用来实现首行大写和首行下沉效果的
例:首行
<html>
<head>
<style>
<!--
p:first-line{color:red;font-size:20pt}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
长度随浏览器窗口大小而改变
首字
<html>
<head>
<style>
<!--
p:first-letter{color:red;font-size:50pt;float:left;}
-->
</style>
</hesd>
<body>
<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>
</body>
</html>
以上两种都只能应用于块状元素上
转载于:https://www.cnblogs.com/borter/p/9439574.html
表示颜色的有三种方式相关推荐
- html中颜色的三种不同表示方法,表示颜色的有三种方式
表格语法格式: ........... border边框宽度默认值为0,既没有边框 cellspacing表格中单元格的边距大小,默认值为两个像素 cellpadding表格中单元格之间的间距大小,默 ...
- java循环遍历_JAVA中循环遍历list有三种方式
转自:https://blog.csdn.net/changjizhi1212/article/details/81036509 JAVA中循环遍历list有三种方式for循环.增强for循环(也就是 ...
- 如果某路由器到达目的网络有三种方式:通过RIP;通过静态路由;通过默认路由,那么路由器会根据哪种方式进行转发数据包?( )
如果某路由器到达目的网络有三种方式:通过RIP;通过静态路由;通过默认路由,那么路由器会根据哪种方式进行转发数据包?( ) A. 通过RIP B. 通过静态路由 C. 通过默认路由 D. 都可以 答案 ...
- oracle启动的服务有哪些,启动/关闭oracle服务有三种方式
启动oracle服务有三种方式:1 从控制面板 2 使用MS-DOS命令 3 通过Oracle Administration Assistant for WindowsNT -通过控制面板启动orac ...
- 点击input,区域选中后外面会出现其他颜色边框去除方式和更改input字体颜色
点击input,区域选中后外面会出现其他颜色边框去除方式和更改input字体颜色 {border:0;outline:none;} //去除边框 定义和用法 outline (轮廓)是绘制于元素周围的 ...
- 启动/关闭oracle服务有三种方式
为了节约内存,可在不需要使用oracle时,将之服务关闭.需要时,再开启服务.但必须,一定要注意关闭时的次序,还有开启时的顺序. 开启顺序: net start OracleOraDb11g_home ...
- 关闭所有oracle服务,启动/关闭oracle服务有三种方式
启动oracle服务有三种方式:1 从控制面板 2 使用MS-DOS命令 3 通过Oracle Administration Assistant for WindowsNT -通过控制面板启动orac ...
- 在HTML中设置锚点常用的有三种方式
在写项目的时候,页面比较长,这时候需要设置锚点进行快速定位到某个段落.所以,在使用中总结了几种常用锚点的例子分享给大家.在HTML中设置锚点常用的有三种方式. 方式一:使用name 代码如下: < ...
- pythonxlwt行居中_python3-xlwt-Excel设置(字体大小、颜色、对齐方式、换行、合并单元格、边框、背景、下划线、斜体、加粗)...
# coding:utf-8 import patterns as patterns import xlwt import time i = 0 book = xlwt.Workbook(encodi ...
最新文章
- python环境问题踩坑
- 2018最受欢迎机构公众号:亲爱的读者,请你为我们投票
- 印度电信巨头牵手阿里云 拥有全球最大规模私有海底光缆
- 进程间通信——匿名管道
- 宝塔 ftp 不能连接 列出时出错
- python 错误类型及解释
- Hibernate本机SQL查询示例
- Windows 两条命令找到占用你某个端口的程序
- 用 Python 写一个简单的Web框架
- 1130 无法登录 mysql_无法登录phpmyadmin,报1130错误
- c++指针初始化问题
- 电机控制park变换公式推导
- 技嘉B85升级BIOS并安装Win11
- 我爱淘冲刺阶段站立会议每天任务5
- 读v_JULY_v整理笔试题博客有感,整理些答案。
- 女生适合做测试吗?看完这篇文章你就懂了
- Ubuntu全新安装firefox最新版本
- java dozer,MapStruct相当于提示(Dozer)?
- 推荐一款截屏翻译工具|截屏提取文字|划词翻译
- 电脑上与android手机文件互传
热门文章
- 小程序-Now you can provide attr wx:key for a wx:for to improve performance
- ubuntu 18.04.6安装后无法上网
- Go语言连接数据库驱动安装和示例
- Armory​以主要成员身份加入持续交付基金会
- 【Golang实现】B站点赞功能的思考与简单实现
- Windows解决电脑卡顿方法之清理缓存
- c语言结构体内嵌结构体指针_C语言中的结构指针
- 对含有奇异值和高斯噪声的数据进行处理
- swiper高度自适应_微信小程序swiper高度自适应
- C语言递归实现k的n次方