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&period;net core上使用redis探索(1) asp&period;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 的角度,不推荐此书,个人更推荐使用&lt ...
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&num;基础知识：数组与集合
对于初学者,想要入门web前端,要有足够的信念和坚持,不然只会越走越远,我现在就深深的体会到. 我本是一个很拒绝代码的人,以前想过UI设计,但是在这段学习时间里,发现其实只要认真,代码并不是很难所以 ...

随机推荐

pip 安装 MySQL-python 失败
今天在安装 MySQL-python 提示 EnvironmentError: mysql_config not found 得知 mysql_config 是属于MySQL开发用的文件,而使用apt ...
[原]运行编译好的Android模拟器
Android源码编译好了之后,我们就可以运行它了. 1.配置环境变量: /data/data/Android$ export PATH=$PATH:$(pwd)/out/host/linux-x86 ...
iOS的一些坑
1.动态绑定元素,不能绑定到body上 $(document).on('click','#nuse-content .coupon',fn) 这样是不行的,会导致事件无法触发,除非给要绑定时间的元素显 ...
李洪强漫谈iOS开发[C语言-043]-练习
李洪强漫谈iOS开发[C语言-043]-行李重量计算价格
Android代码中动态设置图片的大小（自动缩放），位置
项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...
OpenGL中的投影使用
OpenGL中的投影使用在OpenGL中,投影矩阵指定了可视区域的大小和形状.对于正投影与透视投影这两种不同的投影类型,它们分别有各自的用途. 正投影它适用于2D图形,如文本.建筑画图等.在它的应 ...
Socket开发
Socket开发框架之消息的回调处理伍华聪 2016-03-31 20:16 阅读:152 评论:0 Socket开发框架之数据加密及完整性检查伍华聪 2016-03-29 22:39 阅 ...
关于SqlDataAdapter的使用
原文传送门如果使用SqlDataAdapter来查询数据返回给DataSet或者DataTable时需要注意以下几点:1.如果SqlDataAdapter的SelectCommand的连接并没有打开 ...
JSP页面错误处理 JSP页面代码正确却标红的解决办法
保存,关闭JSP页面,重新打开即可解决原因的IDE没有反应过来
java体系结构与工作方式《深入分析java web 技术内幕》第七章
java体系结构与工作方式 7.1 JVM体系结构何谓JVM JVM(Java Virtual Machine) 通过模拟一个计算机来达到一个计算机所具有的计算功能指令集:计算机所能识别的机器语言 ...