首页 技术 正文
技术 2022年11月23日
0 收藏 411 点赞 2,397 浏览 4597 个字

html+css小总结
1、块级元素

<div> <h1> <hr /> <p> <pre> <ol> <ul> <li> <dl> <dt> <dd> <table> <tr> <td> <colgroup> <col> <form>等
会换行,想在同一行显示需浮动或者display: inline

2、行内元素

<span> <var> <a> <em> <img> <b> <i> <sub> <textarea> <select> <strong> <br />等
多个可以并排显示,默认设置宽度是不起作用的,需设置 display: inline-block或者block才行,或者加padding-left和padding-right。

3、常用符号

双引号”(&quot;) &(&amp;) >(&gt;) <(&lt;) 空格(&nbsp;)  版权 (&copy;) 注册商标 (&reg;) 乘号 (&times;)除号 (&divide;)

4、选择器

类选择器:<div class=”a”></div>     css中:  .a{…;}

ID选择器:<div id=”a”></div>        css中:  #a{…;}

后代选择器:<div class=”a”>
                  <div class=”b”></div>
            </div>                  css中: .a空格.b{…;}

群组选择器:<div class=”a”></div>

<div class=”b”></div>   css中:  .a,.b{…;}

标签选择器:<a>sds</a>              css中: a{…;}

5、css样式写法及优先级
外部样式表:
<head><link rel=”stylesheet” type=”text/css” href=”mystyle.css” /></head>
内部样式表:
<head><style type=”text/css”> hr {color: sienna;} </style></head>
内联样式:
<p style=”color: sienna; margin-left: 20px”> This is a paragraph</p>

样式的继承:
子标记会继承父标记的样式

样式的优先级:
内联样式>内部样式>外部样式
浏览器内部也有一个默认的样式

6、font字体
font-style:{normal|italic}默认值、斜体
font-variant{normal|small-caps}默认值、小型大写字母
font-weight{normal|bold|bolder|lighter|100-900}默认值、粗体、更粗、更细、400等于normal
font-size/line-height{X%|Xpx}
font-family
缩写格式:font:font-style font-variant font-weight font-size line-height font-family

代码示例:p {font:italic normal bold 12px/18px 宋体;}

注意,缩写字体定义,至少要定义font-size和font-family两个值。

7、文本属性
text-align:{left (缺省值)|right|center|justify(两端对齐)}
text-decoration:{none (无,缺省值)underline (下划线) overline (上划线)
line-through (当中划线)}
text-indent:{文本缩进属性}
line-height:{行高属性 normal (缺省值)}
letter-spacing:{字间距属性 normal (缺省值)}
color 前景颜色,一般用子文本

8、背景

背景:格式: background: {属性值}

background-color:{颜色值|transparent(默认值)} 属性设置元素的背景颜色。
background-image:{URL(url)} 把图像设置为背景。
background-repeat:{repeat|no-repeat|repeat-X|repeat-Y}
background-attachment:{fixed|scroll} 背景图像是否固定或者随着页面的其余部分滚动
background-position:{top left|top center|top right…} 属性设置背景图像的起始位置。

代码示例:body{background: #ff0000 url(‘i/eg_bg_03.gif’) no-repeat fixed center; }

9、margin与padding边距

margin:margin-top margin-right margin-bottom margin-left
padding:padding-top padding-right padding-bottom padding-left
padding:10px 20px 30px 40px;
上 右 下 左
p {margin:20px 10px;}
上下  左右
p {margin:20px 10px 100px;}
上20px 左右10px 下100px

10、border边框
border-width
border-style:{none|dotted|dashed|solid}无边框、点状边框、虚线、实线
border-color

语法格式:
border:border-width border-style border-color
代码示例:
p {border:1px solid blue;}

border-width:1px 2px 3px 4px;
上 右 下 左

11、list列表
list-style-type:{none|disc|circle|square|…}无标记、默认实心圆、空心圆、实心方块
list-style-position:{inside|outside}列表项目标记放置在文本以内、默认值保持标记位于文本的左侧
list-style-image:{URL|none}
语法格式:
list-style:list-style-type list-style-position list-style-image

代码示例:
ul {list-style:none outside url(“/i/arrow.gif”);}

12、a标签

使用文本作为链接:
<a href=”http://www.baidu.com/” target=”_blank”>baidu</a>

target:链接中的内容在哪儿打开
_blank:在新的窗口中打开
_self:在当前窗口打开(默认)

a:link { color: red} 没有访问时
a:visited { color: blue} 访问后
a:active { color: lime} 鼠标点击但还没有放开时
a:hover { color: aqua} 鼠标指向时

使用图像作为链接:
 <a href=”http://www.baidu.com%22%3e%3cimg/ src=”data:images/baidu.gif” border=”0″ /></a>

邮件链接:
 <a href=”mailto:chengzh@tarena.com.cn%22%3Email to me</a>

锚点:
(一个页面内容的跳转)
 命名一个锚点
 <a name=”top”>top</a>
  跳转到锚点
  <a href=”#top”>to top</a>

(跳转到其它”http://www.sine.com.cn/“页面内容)
  跳转目标页面命名一个锚点
  <a name=”top”>top</a>
  起始页面设置跳转到锚点
  <a href=”https://img.zhankr.net/hh4hsr1rrot7177″ width=”500″ height=”500″ border=”0″ usemap=”#m1″ />
  <map name=”m1″ id=”m1″>
   <area shape=”rect” coords=”…” href=”#” />
   <area shape=”circle” coords=”…” href=”#” />
   <area shape=”poly” coords=”…” href=”#” />
  </map>
   当shape=”rect”(矩形)时,coords的值为左上角和右下角的坐标值; 当shape=”poly”(多边形)时,
   为各顶点值; 当shape=”circle”(圆形)时,为圆心坐 标值和半径值。 coords值依照图片大小的不同
   和所希望链接区域的不同而有所不同

14、display属性
   none:不显示
   block:以块元素的方式来显示
   inline:以行内元素的方式来显示

15、position属性
   static://默认摆放,从左到右,从上到下。
   absolute://生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
   relative://生成相对定位的元素,相对于其正常位置进行定位。

16、<input/>:type属性

text文本
Email: <input type=”text” name=”email” />

button按钮
<input type=”button” value=”Click me” onclick=”msg()” />

checkbox复选框
<input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike
<input type=”checkbox” name=”vehicle” value=”Car” /> I have a car

hidden隐藏
<input type=”hidden” name=”country” value=”Norway” />

image图像按钮
<form  method=”post” action=”index.html”>
  <input name=”submit” type=”image” value=” ” src=”12.jpg” />
</form>

这样子直接写在html页面上就能直接看到按钮是图片的!

password密码字段
<input type=”password” name=”pwd” />

radio单选按钮
<input type=”radio” name=”sex” value=”male” /> Male
<input type=”radio” name=”sex” value=”female” /> Female

reset重置按钮
<input type=”reset” />

submit提交按钮

<form method=”post” action=”index.html”>
  <input type=”submit” name=”button” id=”button” value=”提交” />
</form>

这样提交按钮是标签 <input type=”submit”>,如果想换成图片加上样式,把value=”提交” 改成value=” “(这样“提交”两个字就不会显示在这张背景图片的上面):

css代码:

#button{
 background:url(12.jpg) no-repeat;
 width:100px;
 height:50px;
 border:0px;
 cursor:pointer;
  }

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141839.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,090
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,508
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,320
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,314
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,920
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,105
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站