html+css小总结
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、常用符号
双引号"(") &(&) >(>) <(<) 空格( ) 版权 (©) 注册商标 (®) 乘号 (×)除号 (÷)
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="http://www.sina.com.cn/#top">to top</a>
13.使用热点
将一个图片划分成多个区域,每一个区域表示一个
链接。
<img src="index04.jpg" 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;
}
html+css小总结的更多相关文章
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- HTML+CSS小实战案例
HTML+CSS小实战案例 登录界面的美化,综合最近所学进行练习 网页设计先布局,搭建好大框架,然后进行填充,完成页面布局 <html> <head> <meta htt ...
- CSS小tip整理
CSS小tip整理 1.利用css在列表靠头和末尾添加箭头: /* 左箭头*/ ol a[rel="prev"]:before { content: "\00AB&quo ...
- css小细节罗列
有空时候把一些常见可能不是每个人都知道的css小细节总结了下,共勉. 1.line-height 众多周知,line-height是行高的意思,我们时常会使用类似line-height:24px;这样 ...
- css小随笔(二)与通用样式
51先在学校HTML5已经有半个多月了,然后这个星期做了一个京东的手机网站,接触到了通用样式,下面以京东的手机站为例 这两个就是京东手机站了的不同的两个板块,因为HTML5仅仅只是学完了基本标签跟cs ...
- iconfont字体图标和各种CSS小图标
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中: ...
- CSS 小技巧
CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...
- 【前端词典】几个有益的 CSS 小知识
今天偷个懒,不长篇大论,分享几个你可能不知道的 CSS 小知识. 样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) ...
- 几个有益的 CSS 小知识
样式的顺序 CSS 代码: HTML 代码: 记得之前这是一道比较火的 CSS 考题,当时好像是有不少的人答错(30% 以上) 答案你们应该是知道的. 可以这样提升 CSS 性能 后代选择器 ...
随机推荐
- Kubernetes 简介
一.Kubernetes 相关概念 1. Kubernetes 是一个开源的容器集群管理系统,主要用来自动化部署容器 .自动扩展与收缩容器规模 .提供容器间的负载均衡2. Node:Node(节点)也 ...
- 2018.8.23几日重新编译OSG+OE+Qt遇到的问题
Qt安装多个版本的时候,注意屏蔽掉不使用的Qt,例如OE中的CMakeLists.txt中的# FIND_PACKAGE(Qt4) 使用以前编译好的libcurl.dll现在出现"无法定位序 ...
- C#中的垃圾回收机制与delegate
在DeepStream的C#版本调试过程中,发现了一个问题,运行一段时间后,大概每次内存到16M(Debug模式)就会异常 错误“System.NullReferenceException:未将对象引 ...
- C#调用DLL报“试图加载格式不正确的程序”
项目右键属性->项目设计器->生成->平台->把'默认设置(任何 CPU)'改为x86或者x64
- Unity3d OnApplicationPause与OnApplicationFocus
在手机游戏当中,会碰到“强制暂停”,如:锁屏.接电话或短信之类的.如果“强制暂停”时间过长,网络游戏有时得重新登录等事件. 而Unity3d,Android Plugins中的UnityPlayer. ...
- 关于PullToRefreshView bug 的修复
前几天网友yufengzungzhe@163.com指出PullToRefreshView的一个bug.当时麦洛还没有注意到,现在麦洛已经利用修复了.其实解这个bug也不难. 只要在下面这个方法做一点 ...
- 精品绿色便携软件 & 录制操作工具
https://www.vtaskstudio.com/index.php 录制宏工具 https://soft.anruan.com/29821/ TinyTask V1.5 电脑版 https ...
- sencha touch tpl 实现按钮功能
js如下: Ext.define('app.view.message.Info', { alternateClassName: 'messageInfo', extend: 'Ext.Containe ...
- Linux系统启动内幕
经过对Linux系统有了一定了解和熟悉后,想对其更深层次的东西做进一步探究.这当中就包括系统的启动流程.文件系统的组成结构.基于动态库和静态库的程序在执行时的异同.协议栈的架构和原理.驱动程序的机制等 ...
- html5media 视频
官网: https://html5media.info/ 二.引入script <script src="//api.html5media.info/1.1.8/html5media. ...