学习css(一)
- font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif
- font:12px/22px 指 字体大小/字体行高
- "\5b8b\4f53″ 就是 “宋体”。用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法。注释乱码:强烈建议不要用中文注释。
- 新细明体 \65B0\7EC6\660E\4F53
细明体 \7EC6\660E\4F53
标楷体 \6807\6977\4F53
黑体 \9ED1\4F53
宋体 \5B8B\4F53
新宋体 \65B0\5B8B\4F53
仿宋 \4EFF\5B8B
楷体 \6977\4F53
仿宋_GB2312 \4EFF\5B8B_GB2312
楷体_GB2312 \6977\4F53_GB2312
微软正黑体 \5FAE\x8F6F\6B63\9ED1\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1 - arial 是一套随同多套微软应用软件所分发的无衬线体TrueType字型
- Helvetica是苹果电脑的默认字体,微软常用的Arial字体也来自于它。
- sans-serif 表示是无衬线字体,是一种通用字体族。
margin:0 auto表示上下边界为0,左右则根据宽度自适应相同值(即居中)
- background:url(../images/list01.png) no-repeat 0 center;background:url(../images/bg.png) no-repeat -4px -3px;
- 0 center 的意思就是 水平位置0 垂直位置居中
-4px -3px 的意思就是 水平位置-4px 垂直位置-3px - 和background-position 属性是一样的,即设置背景图像的起始位置。
- 可能的值
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right (以上,如果您仅规定了一个关键词,那么第二个值将是"center"。)
x% y% ( 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。)
mpx npx (第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。)
您可以混合使用 % 和 position 值。
- 0 center 的意思就是 水平位置0 垂直位置居中
- display
- display:inline; 内联元素,就是在同一行显示。
display:block; 块级元素,就是有换行,会换到第二行。
display:inline-block; 就是在同一行内的块级元素。 - 有些HTML元素自然地带有display:block;样式属性,比如
<div>
<h1>...<h6>
<p>
<ul>,<ol>,<dl>
<li>,<dt>,<dd>
<table>
<pre>
等元素,其显示为block样式,会将一行中其可用的空间给跨越占据,容不下另一个元素与其同行。 - 有些HTML元素则是自然带有display:inline;样式属性,这也是元素默认的样式,比如
<span>
<a>
<strong>
<em>
<img>
<br>
等元素,其不会打断文档排布流,会在一行中一个挨一个地排列。 - 当想要做一个水平的列表时,一种方式是使用float来实现,但得容忍其缺点;另一种方式是使用display:inline-block;来实现。
- display:inline-block;方式样式化列表时,既可使得列表元素能按行挨个排列,同时元素还能保持其块属性,比如高和宽、上下边距等。但是对有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top;来使元素顶部对齐。
- display:inline; 内联元素,就是在同一行显示。
cursor的说明
设置或检索在对象上移动的鼠标指针采用的光标形状。
此属性的值可以是多个,其间用逗号分隔。假如第一个值不可以被客户端系统理解或所指定的光标无法找到及显示,则第二个值将被尝试使用。依此类推。假如全部值都不可用的话,则此属性不会发生作用。光标不会被改变。
学习css(一)的更多相关文章
- 学习 CSS 样式
1.CSS浮动 : http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html (1)一个重要结论: ...
- css知多少(2)——学习css的思路
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 开始学习css
今天开始学习css:应用一本<HTML5与CSS3网页设计基础> 先学习css样式规则声明. Body{ color:blue} 对应:选择符:{声明属性:声明值}: Background ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- 如何深入学习CSS
学习CSS有了一定基础后,有的人会觉得好象没有什么学的.因为知道一些基本的理论性的东西.CSS说它容易是因为它的知识点有限.说它难学就在于各浏览器对CSS的支持程度不同.如何深入学习我给出以下几点见意 ...
- 【图片版】学习CSS网格布局
简言 CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式.传统的CSS页面布局 一直不够理想.包括table布局.浮动.定位及内联块等方式,从本质上都是Hack的 ...
- 学习CSS的思路(转)
两周之前写过该系列的第一篇,其实当时只是一个想法,这段时间迟迟未更新,是在思考一个解决过程.现在初有成效,就开更吧. 1. 一个段子 开题不必太严肃,写博客也不像写书,像聊天似的写东西是最好的表达方式 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 学习css盒子模型
在这一周,我学习了css,在没有学习css之前,我一直都觉得布局很难,样式特别难调,但是学习了css盒子模型之后我就觉得欸,其实还挺简单的,下面就来看看我学习的css吧. CSS 盒子模型(Box M ...
- 学习css常用基本层级伪类属性选择器
常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...
随机推荐
- CFGym 101194L 题解
一.题目链接 http://codeforces.com/gym/101194/problem/L 二.题意 有4个队伍,要打6场比赛(刚好每两个队伍都能相互比一次),若A和B比赛有3种结果: A赢B ...
- vs2010 出现“未能将 ProteusDebugEngine 调试器附加到计算机”
vs2010 打开项目时出现如下图错误,解决方法: 1.查看C:\Progream Files下的Internet Explorer文件夹还在不在,不在则会出现此问题: 2.可以右键项目属性-调试-勾 ...
- WPF DataGrid实现分页显示
主要代码如下 /// <summary> /// 读取指定页面的数据 /// </summary> /// <param name="pagePerCount& ...
- jeesite快速开发平台(三)----项目文件结构与配置文件详解
转自:https://blog.csdn.net/u011781521/article/details/54893535
- U3D+SVN: 两份相同资源放在不同目录下导致META的更改
U3D+SVN: 两份相同资源放在不同目录下导致META的更改. 实际情形:将地图文件map拷一份放在其它目录,回到UNITY编辑器,载入完成后加到磁盘,看到map文件夹下的所有meta都变红了. r ...
- LUA 运行期间不独占线程的递归,通过回调实现
function main(d) local function func(d) moveto(d, function() print("d=======", d) d = d - ...
- http post Content-type: application/json; charset=utf-8
The header just denotes what the content is encoded in. It is not necessarily possible to deduce t ...
- 录制手机的视频,转换成gif
Android: 通过adb命令去进行录屏,然后将录制的视频转换成gif图片: 前提:确保电脑上安装了adb,且Android的level高于19. 1.adb shell screenrecord ...
- Golang开发环境搭建-Vim篇
一.一个干净的环境 找个干净的基础环境,方便确认每个搭建步骤后的效果: Ubuntu 14.04 x86_64 vim version 7.4.52 go version go1.4beta1 lin ...
- leetcode 235 236 二叉树两个节点的最近公共祖先
描述: 给定二叉树两个节点,求其最近公共祖先.最近即所有公共祖先中深度最深的. ps:自身也算自身的祖先. 235题解决: 这是二叉搜索树,有序的,左边小右边大. TreeNode* lowestCo ...