Html-Css 从入门到放弃(一)基础知识
注意要点:
1、ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
2、class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
3、不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20px" 而不是 "margin-left: 20 px"。
4、如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。
5、当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
一、CSS Text(文本)
1、文本的对齐方式:text-align
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
2、文本修饰,text-decoration 属性用来设置或删除文本的装饰。
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
3、文本转换,文本转换属性是用来指定在一个文本中的大写和小写字母。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
4、文本缩进属性,是用来指定文本的第一行的缩进
p {text-indent:50px;}
5、指定字符之间的空间,演示了如何增加或减少字符之间的空间
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
6、指定行与行之间的空间,如何指定在一个段落中行之间的空间
p.small {line-height:70%;}
p.big {line-height:200%;}
7、增加单词之间的空白空间,如何增加一个段落中的单词之间的空白空间
p{ word-spacing:30px;}
8、在元素内禁用文字环绕
p{white-space:nowrap;}
9、垂直对齐图像
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
10、添加文本阴影
h1 {text-shadow:2px 2px #FF0000;}
二、CSS Fonts(字体)
CSS字体属性定义字体,加粗,大小,文字样式。
1、字体系列,font-family 属性设置文本的字体系列。如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体"。多个字体系列是用一个逗号分隔指明:
p{font-family:"Times New Roman", Times, serif;}
2、字体样式,主要是用于指定斜体文字的字体样式属性
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
3、设置字体大小像素,设置文字的大小与像素,让您完全控制文字大小
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
4、用em来设置字体大小。为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。
注意:em的尺寸单位由W3C建议。em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
5、使用百分比和EM组合,在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比:
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
三、CSS 链接(link)
四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
1、文本修饰,text-decoration 属性主要用于删除链接中的下划线
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
2、背景颜色属性指定链接背景色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
四、CSS 列表样式(ul)
CSS列表属性作用如下:
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
1、要指定列表项标记的图像,使用列表样式图像属性
ul {list-style-image:url('sqpurple.gif');}
Html-Css 从入门到放弃(一)基础知识的更多相关文章
- 使用Code First建模自引用关系笔记 asp.net core上使用redis探索(1) asp.net mvc控制器激活全分析 语言入门必学的基础知识你还记得么? 反射
使用Code First建模自引用关系笔记 原文链接 一.Has方法: A.HasRequired(a => a.B); HasOptional:前者包含后者一个实例或者为null HasR ...
- Thrift入门初探(2)--thrift基础知识详解
昨天总结了thrift的安装和入门实例,Thrift入门初探--thrift安装及java入门实例,今天开始总结一下thrift的相关基础知识. Thrift使用一种中间语言IDL,来进行接口的定义, ...
- 《Python编程:从入门到实践》基础知识部分学习笔记整理
简介 此笔记为<Python编程:从入门到实践>中前 11 章的基础知识部分的学习笔记,不包含后面的项目部分. 书籍评价 从系统学习 Python 的角度,不推荐此书,个人更推荐使用< ...
- APP测试入门篇之APP基础知识(001)
前言 最近两月比较多的事情混杂在一起,静不下心来写点东西,月初想发表一遍接口测试的总结,或者APP测试相关的内容,一晃就月底了,总结提炼一时半会也整不完.放几个早年总结内部培训PPT出来 ...
- WCF入门教程:WCF基础知识问与答(转)
学习WCF已有近两年的时间,其间又翻译了Juval的大作<Programming WCF Services>,我仍然觉得WCF还有更多的内容值得探索与挖掘.学得越多,反而越发觉得自己所知太 ...
- CSS 从入门到放弃系列:CSS的选择器和优先级
CSS的选择器和优先级 CSS的N种选择器 !important 其实这个玩意不算什么选择器,放在这只是为了突出这个选择器优先级或者说权重的从高到低而已.. 内联方式(行间样式) <div st ...
- CSS 从入门到放弃系列:CSS的引入方式
css的四种引入方式 内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...
- 微信小程序入门到实战(1)-基础知识
1.微信小程序介绍 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用. 1.1. 为什么是微信 ...
- 关于CSS格式与布局中的基础知识的简单操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 初学者入门web前端 C#基础知识:数组与集合
对于初学者,想要入门web前端,要有足够的信念和坚持,不然只会越走越远,我现在就深深的体会到. 我本是一个很拒绝代码的人,以前想过UI设计,但是在这段学习时间里,发现其实只要认真,代码并不是很难 所以 ...
随机推荐
- 查看Linux机器名
uname -a hostname vim /etc/sysconfig/network
- node的router路由。
使用router可以实现一个小型的express. router继承了大部分的app = express()的方法. 使用router可以工程化管理项目.router使用以后app只能在最开始去存在. ...
- Ubuntu16.04.3安装以及简单配置使用
1. 官网下载ubuntu16.04.3的iso 2.上传至esxi 3. 中文安装界面有问题,使用english进行安装. 4. server版本的应该不带gui的界面进行安装... 5.使用非ro ...
- sql优化问题笔记(mysql)
相信大家平时面试都会遇到这个问题:平时你都是怎么对sql进行调优的? 此篇文章相当于一个随便笔记,根据朋友们的聊天记录整理而成,如有不对,请指正! 注意:这篇是以mysql整理的 查看sql计划分析 ...
- linux中内存使用原理
首先介绍一下linux中内存是如何使用的. 当有应用需要读写磁盘数据时,由系统把相关数据从磁盘读取到内存,如果物理内存不够,则把内存中的部分数据导入到磁盘,从而把磁盘的部分空间当作虚拟内存 来使用,也 ...
- SOC四大弱点分析
导读 今年的年度安全运营中心(SOC)调查中,SANS研究所指出了4个最为常见的SOC弱点.这些弱点的根源可被追溯到我们非常熟悉的人.过程.适度规划和技术实现上.下面我们就来看看SOC的四大弱点究竟是 ...
- File操作
对文件进行操作(只操作小文件) bool Exists(string path) 判断文件是否存在 FileStream Create(string path) 创建文件 void Move(stri ...
- BZOJ2282 SDOI2011消防/NOIP2007树网的核(二分答案+树形dp)
要求最大值最小容易想到二分答案.首先对每个点求出子树中与其最远的距离是多少,二分答案后就可以标记上一些必须在所选择路径中的点,并且这些点是不应存在祖先关系的.那么如果剩下的点数量>=3,显然该答 ...
- 【转】嵌入式系统 Boot Loader 技术内幕,带你完全了解Boot Loader
在专用的嵌入式板子运行 GNU/Linux 系统已经变得越来越流行.一个嵌入式 Linux 系统从软件的角度看通常可以分为四个层次: 1. 引导加载程序.包括固化在固件(firmware)中的 boo ...
- bzoj2599/luogu4149 [IOI2011]Race (点分治)
点分治.WA了一万年. 重点就是统计答案的方法 做法一(洛谷AC bzojWA 自测WA): 做点x时记到x距离为k的边数最小值为dis[k],然后对每一对有值的dis[i]和dis[K-i],给an ...