HTML/CSS总结1

1.定义网页背景颜色

<body bgcolor="背景色">

颜色可以用2种方式表示:1. 直接指定颜色名称,如blue。2.使用十六进制数据表示如#RRGGBB,分别表示两位十六进制数据.

2.设置背景图片

<body background="图片的地址">

3.设置文字颜色

<body text="文字的颜色">

4.设置链接文字属性

<body link="颜色">

alink可以用来设置鼠标单击链接时的颜色;vlink可以设置被访问过的超链接的颜色。

5.设置页面边距

<body topmargin=value leftmargin=value rightmargin=value bottommargin=value>

6.标题标记

<title>...</title>

7.定义页面关键字

<meta name="ketwords" content="输入具体的关键字">

8.定义页面描述

<meta name="description" content="设置页面描述">

9.定义编辑工具

<meta name="generator" content="Frontpage">

10.定义作者信息

<meta name="autor" content="作者的姓名">

11.定义网页文字及语言

<meta http-equiv="content-type" content="text/html;charset=字符集类型">

12.定义网页的定时跳转

<meta http-equiv="refresh" content="跳转的时间;URL=跳转到的地址">

用http-equiv中的refresh不仅可以实现页面自身的自动刷新,也可以实现页面间的自动跳转过程。

13.链接

1. 创建基本超链接:<a 属性=“链接目标”>链接显示文本</a>

属性:href--指定链接地址;name--给链接名字;title--给链接添加提示文字;target--指定链  接的目标窗口;Target参数的属性取值:-self--在当前页面中打开链接;  -blank--在一个全新的空白窗口中打开链接;-top--在顶层框架中打开链接,也可理解为在根框架中打开链接;-parent--在当前框架的上一层打开链接。

2. 创建图像链接

<a href=”链接目标”>链接的图像</a>

3. 创建锚点

<a name=”锚点的名称”></a>   锚点就是指在给定名称的一个网页中的某一个位置,在创建锚点链接前首先要建立锚点。

<a href=”#锚点的名称”>...</a>

14.表单

<form action="表单的处理程序" method="传送方法"></form>   一般情况下表单的处理程序action和传送方法method是必不可少的参数。

Action用于指定表单数据提交到哪个地址进行处理。表单的处理程序是表单要提交的地址,即表单中收集到的资料将要传递到的程序地址。

传送方法的值只有两种,即get和post。Get--表单数据被传送到action属性指定的URL,然后这个新的URL被送到处理程序上。Post--表单数据被包含在表单主体中,然后被送到处理程序中。

15.插入图像

<img src=”图像的地址” height=”图像的高度” width=”图像的宽度” hspace=”水平边距” vspace=”垂直边距” align=”对齐方式” alt=”提示文字的内容”>

16.添加多媒体文件

<embed src=”多媒体文件地址” width=”多媒体的宽度” height=”多媒体的高度” autostart=”是否自动运行” loop=”是否循环播放” ></embed>

<bgsound src=”背景音乐地址 ” loop=”播放次数”>

17.插入其他标记

插入空格符号:&nbsp;

插入特殊符号:&amp;...&copy;

18.设置文字格式

font用来控制字体、字号、颜色等属性;<font face=”字体样式”>...</font> 可以通过face设置不同的字体。<font size=”文字字号”>..</font>用来设置字体大小。<font color=”字体颜色”>...</font> 用来设置文字颜色。

<b>加粗的文字</b>、<strong>加粗的文字</strong> 、<i>斜体文字</i>、<em>斜体文字</em>、<cite>斜体文字</cite>、<u>下划线内容</u>、<sup>上标内容</sup>、<sub>下标内容</sub>

19.设置段落格式

<p>段落文字</p>、<align=对齐方式>、<nobr>不换行文字</nobr>、<br>换行标记

20.水平线标记

<hr>在网页中输入一个此标记即添加了一条默认样式的水平线、<hr width=”宽度”>、<hr size=”高度”>、<hr color=”颜色”>、<hr align=”对齐方式”>、<hr noshade>利用水平线去掉阴影

21.css

1.css:层叠样式表。使用css能够简化网页的格式化代码,加快下载的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量。样式表的首要目的的为网页上的元素精确定位。其次他把网页上的内容结构与格式控制相分离,使得网页可以仅由内容构成,而将网页的格式通过通过css样式表文件来控制

2.Css语法结构仅由3部分组成,分别是选择符、样式属性和值,基本语法如下:

选择符{样式属性:取值;样式属性:取值;...}

3.基本css选择器

标签选择器:直接将html标签作为选择器如p选择器;类别选择器:标记选择器一旦声明,则页面中所有的该标记都会相应的产生变化;Id选择器的使用方法和class选择器基本相同,不同之处在于id选择器只能在html页面中使用一次。

4.css的使用方式

链接外部样式表:<link type=”text/css” rel=”stylesheet” href=”外部样式表的文件名称”>

行内方式:<标记 style=”样式属性:属性值;样式属性:属性值;...”>

嵌入外部样式表:

<style type=text/css>

@import url(“外部样式表的文件名称”);

</style>

内部样式表:

<style type=”text/css”>

<!--

选择符1(样式属性:属性值;样式属性:属性值;...)

选择符2(样式属性:属性值;样式属性:属性值;...)

....

选择符n(样式属性:属性值;样式属性:属性值;...)

-->

</style>

5.设置css属性

css属性分为:类型、背景、区块、方框、边框、列表、定位、扩展。

css类型属性:Font-family、Font-size、Font-style、Line-height、Text-decoretion、Font-weight、Font-variant、Text-transform、Color

css背景属性:Background-color、Background-image、Background-repeat、Background-attachment(确定背景图像是固定在它的原始位置还是随内容一起滚动)、Background-position(X)和background-position(Y):指定背景图像相对于元素的初始位置。

css区块属性:Word-spacing:设置单词的间距;Letter-spacing:增加或减小字母或字符的间距。vertical-align:指定应用它的元素的垂直对齐方式。Text-align:设置元素中文本对齐方式。Text-indent:指定第一行文本缩进的程度。White-space:确定如何处理元素的空白。Display:指定是否及如何显示元素。

css方框属性:Width和height属性设置元素的宽度和高度。Float:设置其他元素在哪个边围绕元素浮动。Padding:指定元素内容与元素边框之间的间距。Margin:指定一个元素的边框与另一个元素之间的间距。

css边框属性:Style:设置边框的样式外观。Width:设置元素边框的粗细。Color:设置边框的颜色。

css列表属性:List-style-type:设置项目符号或编号的外观。List-style-image:可以为项目符号指定自定义图像。单击浏览按钮选择图像或输入图像路径。List-style-position:设置列表项文本是否换行和缩进以及文本是否换行到左边距。

css定位属性:Position:四个可选值:absolute能够准确将元素移动到你想要的位置,绝对定位元素的位置。Fixed--相对于窗口的固定定位。Relative--相对定位是相对于元素默认的位置的定位。Static--该属性值是所有元素定位的默认情况,可用static取消继承,即还原元素定位的默认值。Visibility:如果不指定可见性属性,则默认情况下大多数浏览器都继承父级的值。

css扩展属性:Page-break-before:其中两个属性的作用是为打印的页面设置分页符。Page-break-after:检索或设置对象后出现的页分割符。Cursor:指针位于样式所控制的对象上时改变指针图像。Filter:对样式所控制的对象应用特殊效果。

时间: 2024-10-11 22:40:21

HTML/CSS总结1的相关文章

css中的px、em、rem 详解

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px

CSS样式的优先级

1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式. 下面是权值的规则: 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100.例如下面的代码: p{color:red;} /*标签,权值为1*/ p span{color:green;} /*两个标签,权值为1+

CSS 之怀疑自己的审美 2 (Day50)

阅读目录 伪类 选择器的优先级 css 属性操作 一.伪类 anchor伪类:专用于控制链接的显示效果 ''' a:link(没有接触过的链接),用于定义了链接的常规状态. a:hover(鼠标放在链接上的状态),用于产生视觉效果. a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接. a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态. 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

CSS颜色代码大全

CSS颜色代码大全 颜色代码表(一): EEEEEE FFCCFF FF66FF FF00FF DDDDDD FFCCCC FF66CC FF00CC CCCCCC FFCC99 FF6699 FF0099 BBBBBB FFCC66 FF6666 FF0066 AAAAAA FFCC33 FF6633 FF0033 999999 FFCC00 FF6600 FF0000 888888 CCCCFF CC66FF CC00FF 777777 CCCCCC CC66CC CC00CC 666666

如何使用Flexbox和CSS Grid,实现高效布局

CSS 浮动属性一直是网站上排列元素的主要方法之一,但是当实现复杂布局时,这种方法不总是那么理想.幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来. 使用 Flexbox 可以使元素对齐变得容易,因此 Flexbox 已经被广泛使用了. 同时,CSS Grid 布局也为网页设计行业带来了很大的便利.虽然 CSS Grid 布局未被广泛采用,但是浏览器逐渐开始增加对 CSS Grid 布局的支持. 虽然 Flexbox 和 CSS Grid 可

css基础

css绝对是一个能够写到爆炸的东西,so,机智的小北方才不会写各种css样式具体的效果,相比之下更推荐大家记一些常用的key,至于效果,每次用的时候百度下就可以了, css的作用是对符合条件的标签进行渲染,那么首先就要匹配到对应标签啦,我萌有三种基础的模式来匹配希望改变样式的标签 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">

前端 css 垂直居中及自适应问题

此css作用为将下面div结构中的Container-fluid背景自适应屏幕,content自适应居中 1.Div结构 all Head Container-fluid Content Under <div id="all">   <div  class="head" style="height: 81px;width: 100%;min-width: 1000px;position: relative;">      

css遮罩层

父元素:position:fixed; 让子元素居中对齐:position:absolute;top:0;bottom:0;left:0;right:0;margin:auto; <style> .loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#fff;} .loading .pic {width:50px;height:50px;background:url(images/l

CSS作用域问题

今天去长虹面试,面试官问了一个问题,就是给一个div在三个地方设置不同的background,最后div显示的颜色是哪一个?当时我第一次回答的是最后一个,但是后来又改口说是第一个,回来一验证,证明自己错了,今天就总结一下CSS样式的作用域问题吧. 首先对HTML引入样式的优先级排序,数字越大优先级越高#### 样式优先级1. 浏览器缺省设置2. 外部样式表3. 内部样式表(位于 <head> 标签内部)4. 内联样式(在 HTML 元素内部) ---#### 外部样式表>浏览器缺省设置H

CSS学习

CSS css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = 'key1:value1;key2:value2;' 在标签中使用 style='xx:xxx;' 在页面中嵌入 < style type="text/css"> </style > 块 引入外部css文件 css写在head里面,style标签中写样式 ID用