关于HTML和CSS一些鸡零狗碎的事
原文发表于我自己的服务器www.jjxiaoliu.cn;不过这个服务器我可能不打算续费了,所以搬到cnblogs来。
有些关于HTML和CSS的内容不值得单独列一篇文章,全都放在这里了。
<link rel="stylesheet" type="text/css" href="theme.css"/>
这里的rel表示relationship,就是后面href文档与本文档的关系。
我们可以利用注释来给原本不能断行的HTML代码增加断行:
<!– 下面的代码可能出现在使用<ul>和<li>制作的简单横向菜单中(配合CSS) –>
<li>item1</li><!–
–><li>item2</li>
指定charset的两种写法:
<meta charset=”utf-8″ />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
这两种几乎是一样的。所以一般用短些就可以了。
我们可以使用download属性来设定用户下载到本地的文件名:
<a href=”something_to_be_download” download=”short_name”>Download something</a>
用于标记计算机代码的HTML标签:
- <code>,标记通用计算机代码
- <var>,标记变量名
- <kbd>,标记用户输入
- <samp>,标记计算机输出
<thead> .vs. <th>
<thead>仅描述表格结构;<th>一般而言会使得浏览器以更醒目的方式渲染标签内容(表现形式)。
如果对上一段文字感到拧巴,可以参考这一篇:
HTML与CSS:结构与表现。
另外,在打印长表格时,<thead>和<tfoot>会自动重复出现在每一页的头和尾。从这点来说,它们更像是页头和页尾。
在需要时,<thead>和<th>也是可以混用的。可以参考MDN上关于<thead>标签的例子。
pseudo-classes与pseudo-element
pseudo-classes匹配整个标签,而pseudo-element匹配标签内的特定元素。
例如:p:first-child匹配作为第一个child元素出现的p标签;p::first-letter匹配p标签内的第一个字符。
顺便说一下,pseudo-classes的child是指标签本身作为child,不是指标签的下级child。且child计数从1开始。
CSS的属性名称不区分大小写,但属性值区分大小写。
[name=”jjxiaoliu”]等价于[Name=”jjxiaoliu”],但不等价于[name=”JJxiaoliu”]。
CSS可以用紧邻的[]匹配多个属性。
[country=”china”][province=”jiangsu”]可以匹配如下标签:
<p country=”china” province=”jiangsu”>Jiangsu Province, China</p>
注意两个[]之间不能有空格。
如果两个[]之间有空格,那么将形成Descendant selector,于是匹配的将是如下形式的HTML结构:
<div country=”china”>
<p province=”jiangsu”>Jiangsu Province, China</p>
</div>
class和id联合使用
p.class_name#id_name
类似的,class也可以和属性联合使用:
p.class_name[attribute]
类自身也能联合使用:
.classa.classb { }
匹配如下标签:
<p class="classa classb"></p>
(上面两条结合起来看:本质上是说的相同的事情。)
css的margin属性
如果相邻元素都是正值,那么取正最大;
如果相邻元素都是负值,那么取负最大;
如果相邻元素正负相反,那么取两者的和。
css的position属性
如果设置为absolute,那么位置值默认是相对于html标签,除非其祖先设置过position为非static值:即absolute的位置值是相对于其祖先元素里除去用static定位以外的最近一个。使用absolute定位的元素不占据空间(或者说不参与其他元素定位计算)。
如果设置为relative,那么位置值是相对于其“原本(没有设置位置的情况下)应该在的”位置,且“原本应该在的位置”还留着参与其他元素定位(即留白)。
如果设置为fixed,那么位置值是相对于浏览器窗口可视区。常用于在滚动页面时需要固定在屏幕某位置的元素。
link, visited, hover, active
根据CSS的优先顺序(最后一条匹配规则优先),这四个伪类需要按照一定的顺序(从一般到特殊)书写。
1. link作为默认“静态”规则(没有点过,鼠标不在),放在第一项;
2. visited和link同样是“静态”规则,区别是已访问过,考虑到满足visited必定满足link,为了让visited生效,要放在第二项;
2.5 这中间可以插一条focus(When you focus it with key TAB)
3. hove是“动态”规则,鼠标还没有点击,满足它的同时,必定同时满足link,可能满足visited,所以放在第三项;
4. active最为特殊,在满足active的同时,必定满足hover和link,可能满足visited,放在最后一项。
使用CSS制作带箭头box的例子:http://www.cssarrowplease.com/
相关文章
- html中div定位练习
- html中标签
- 第六十一节,html超链接和路径
- 前端学习 -- Html&Css -- 层级和透明度
- [CSS 3] Add a Cutout Notch to an HTML Element with a CSS Polygon Clip-Path
- [HTML] Change an HTML5 input's placeholder color with CSS
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
- 前端三剑客:html,css,JavaScript
- SAP UI5 应用 index.html 里定义的 data-sap-ui-theme 值的加载原理
- SAP UI5 component container initialized in index html
- Atitit 通信技术概要 艾提拉著 目录 1. 通信系统原理(孔英会编著的图书)_百度百科.html2 1.1. 第1章绪论12 1.2. 第2章信号分析基础252 1.3. 第3章信道5
- Atititi 软件界面gui开发之道 attilax著 1. 概览2 1.1. 编程语言的发展 asm>native>vm>script>dsl2 1.2. Ui的细化html ,css ,
- Atitit jOrgChart的使用 组织架构图css html
- html表单实例:用户反馈表单页面代码
- html编码改成中文(乱码解决)
- html+css+js实现的新年烟花
- HTML+CSS基础知识(5)相对定位、绝对定位、固定定位
- HTML+CSS:圆形和圆角图片格式
- 20个经典bootsrtap后台html站点模板推荐
- 关于html中table表格tr,td的高度和宽度
- html+css+js完成代码弹出功能
- HTML配置CSDN自定义栏目