前端HTML、CSS学习完整笔记（中上篇）
第21课 inline内联（行内元素）
|
<!DOCTYPE html> <html> <head> <title>study21.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style> #kurong { color: red; } </style>
</head>
<body> <div> 离离原上草，一岁一<div id="kurong">枯荣</div>。<br> 野火烧不尽，春风吹又生。<br> 远芳侵古道，晴翠接荒城。<br> 又送王孙去，萋萋满别情。<br> </div> </body> </html>
|
|
<!DOCTYPE html> <html> <head> <title>study21.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style> #kurong { color: red; } </style>
</head>
<body> <div> 离离原上草，一岁一<span id="kurong">枯荣</span>。<br> 野火烧不尽，春风吹又生。<br> 远芳侵古道，晴翠接荒城。<br> 又送王孙去，萋萋满别情。<br> </div> </body> </html>
|
块状元素：独占一行
内联元素：不能设置宽高，内外边距，可以水平方向设置边距
* 块状元素 和 内联元素 相互转化
块状元素转化为内联元素：css设置display:inline ;
内联元素转化为块状元素：css设置display:block ;
块状元素 |
内联元素 |
|
address - 地址 li |
a - 锚点 |
第22课 内联与块状的转化
|
<!DOCTYPE html> <html> <head> <title>study22.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> div { width:200px; height:200px; display:inline; background: orange; } span { width:200px; height:200px; display:none; /* display:block; */ background: silver; } </style>
</head>
<body> <div>块状</div> <span>行内</span> </body> </html>
|
display可能的值
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS中有值 compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
marker CSS中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似<tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
第三章 CSS
第23课 CSS控制段落文本
|
<!DOCTYPE html> <html> <head> <title>study23.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> #p1 { background-color: silver; text-align: center; letter-spacing: 15px; } #p2 { background-color: orange; text-indent: 20px; text-decoration: line-through; } </style>
</head>
<body> <p id="p1">据有关数据显示。</p> <p id="p2">不过，正当国内电商巨头们有条不紊的布局海淘之时，亚马逊，这家在中国早已被边缘化的国际电商巨鳄也在窥视着这块市场。近日，亚马逊中国方面放出风声，最快在今年第四季度开通海外产品直邮服务，届时，国内用户就能通过亚马逊中国买到从国外来的商品。</p> </body> </html>
|
text-decoration none 默认。定义标准的文本。的一条线。
text-decoration overline 定义文本上的一条线。
text-decoration line-through 定义穿过文本下的一条线。
text-decoration blink 定义闪烁的文本。 //IE不支持火狐下可以使用
text-decoration inherit 规定应该从父元素继承text-decoration 属性的值。
text-decoration underline 定义文本下的一条线。
background-color 文本背景颜色
color 文本字体的颜色
text-indent 首行文本的缩进
text-align 文本对齐方式 left centerright
letter-spacing 字体间的距离
text-transform none默认值 不变
text-transform uppercase 文本全大写
text-transform lowercase 文本全小写
text-transform 每个单词首字母大写
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近：
white-space 值为normal时 去除空白字符
white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽略换行符，与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。
当 white-space 属性设置为pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行。
----------------------------------
Properties
属性 CSS Version
版本 Inherit From Parent
继承性 Description
简介
text-indent CSS1 有 检索或设置对象中的文本的缩进
text-overflow CSS3 无 设置或检索是否使用一个省略标记（...）标示对象内文本的溢出
text-align CSS1/CSS3有 设置或检索对象中文本的对齐方式
text-transform CSS1/CSS3 有 检索或设置对象中的文本的大小写
text-decoration CSS1/CSS3 无 复合属性。检索或设置对象中的文本的装饰，如下划线、闪烁等
text-decoration-line CSS3 无 检索或设置对象中的文本装饰线条的位置。
text-decoration-color CSS3 无 检索或设置对象中的文本装饰线条的颜色。
text-decoration-style CSS3 无 检索或设置对象中的文本装饰线条的形状。
text-shadow CSS3 有 设置或检索对象中文本的文字是否有阴影及模糊效果
text-fill-color CSS3 有 设置或检索对象中的文字填充颜色
text-stroke CSS3 有 复合属性。设置或检索对象中的文字的描边
text-stroke-width CSS3 有 设置或检索对象中的文字的描边厚度
text-stroke-color CSS3 有 设置或检索对象中的文字的描边颜色
letter-spacing CSS1 有 检索或设置对象中的文字之间的间隔
word-spacing CSS1 有 检索或设置对象中的单词之间插入的空格数。
vertical-align CSS1/CSS2 无 设置或检索对象内容的垂直对其方式
word-wrap CSS3有 设置或检索当当前行超过指定容器的边界时是否断开转行
white-space CSS1 有 设置或检索对象内空格的处理方式
direction CSS2有 检索或设置文本流的方向
unicode-bidi CSS2 无 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用
line-height CSS1 有 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离
tab-size CSS3有 检索或设置对象中的制表符的长度
第24课 文字控制
|
<!DOCTYPE html> <html> <head> <title>study24.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> #text1 { color: blue; font-style: italic; font-weight: bold; font-size: x-large; line-height: 50px; } #text2 { font: 23px/46px Microsoft YaHei; } </style>
</head>
<body> <div id="text1"> 离离原上草，一岁一枯荣。<br> 野火烧不尽，春风吹又生。<br> </div> <div id="text2"> 远芳侵古道，晴翠接荒城。<br> 又送王孙去，萋萋满别情。<br> </div>
</body> </html>
|
字体的英文名
|
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312
宋体：SimSuncss中中文字体（font-family）的英文名称 Mac OS的一些： 华文细黑：STHeiti Light [STXihei] 华文黑体：STHeiti 华文楷体：STKaiti 华文宋体：STSong 华文仿宋：STFangsong 儷黑 Pro：LiHei Pro Medium 儷宋 Pro：LiSong Pro Light 標楷體：BiauKai 蘋果儷中黑：Apple LiGothic Medium 蘋果儷細宋：Apple LiSung Light Windows的一些： 新細明體：PMingLiU 細明體：MingLiU 標楷體：DFKai-SB 黑体：SimHei 新宋体：NSimSun 仿宋：FangSong 楷体：KaiTi 仿宋_GB2312：FangSong_GB2312 楷体_GB2312：KaiTi_GB2312 微軟正黑體：Microsoft JhengHei 微软雅黑体：Microsoft YaHei 装Office会生出来的一些： 隶书：LiSu 幼圆：YouYuan 华文细黑：STXihei 华文楷体：STKaiti 华文宋体：STSong 华文中宋：STZhongsong 华文仿宋：STFangsong 方正舒体：FZShuTi 方正姚体：FZYaoti 华文彩云：STCaiyun 华文琥珀：STHupo 华文隶书：STLiti 华文行楷：STXingkai 华文新魏：STXinwei Windows 中的中文字体。 在默认情况下，也就是未自行安装新字体或者 Office 等文字处理软件的情况下，Windows 默认提供下列字体： Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312 Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA) Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB 那么每种字体能显示那些汉字呢？ Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集， 楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。 （注：Windows 3.X 只能支持 GB2312-80 字符集） Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集， SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。 下面对字符集进行简单的介绍： GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005 GB2312-80 中的字符数量最少，GB18030-2005 字符数量最多。 GB2312-80 是最早的版本，字符数比较少； GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同； GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同，主要增加了扩展 A 部分； GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同，主要增加了扩展 B 部分； 由于 Unicode 5.2 的发布，估计 GB18030 会在近期发布新版本，增加扩展 C 部分。 需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。 如果想查看 GB18030 的标准文本，请访问 http://www.gb168.cn 中的强标阅读。 如果想了解 Unicode 的内容，请访问 http://www.unicode.org。 现在纠正网上普遍的一个错误： GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号 与简体中文有关的代吗页如下： 936 gb2312 简体中文(GB2312)————其实是GBK 10008 x-mac-chinesesimp 简体中文(Mac) 20936 x-cp20936 简体中文(GB2312-80) 50227 x-cp50227 简体中文(ISO-2022) 51936 EUC-CN 简体中文(EUC) 52936 hz-gb-2312 简体中文(HZ) 54936 GB18030 简体中文(GB18030) 补充： 使用楷体_GB2312、仿宋_GB2312后，在 Windows 7/Vista/2008 中可能不再显示为对应的字体。 这是因为 Windows 7/Vista/2008 中有楷体、仿宋，默认情况下没有楷体_GB2312、仿宋_GB2312，字体名称相差“_GB2312”。 第25课 字体控制精讲新闻标题：用黑体或无衬线（sans-serif） 新闻正文：宋体或有衬线（serif） 注意，你设置的字体，你客户机器上未必有。要没有，这是显示的就是默认字体。 所以，要注意，你选的一些好看的字体，别人没有。
所以，用设置字体，可以将选用字体，和备选字体依次在后面排列。eg： font-family：‘xx1’,'xx2','xd3',sans-serif; 上面这句的意思就是，客户的浏览器先去调用’xx1'字体，如果客户没有，便调用'xx2'，还没有，再调用'xx3',如果还是没有，就让浏览器随便调用一个sans-serif的字体就行。 第26课 背景图片background-attachment : scroll默认值滚动 fiixed背景固定 background-color : transparent 默认值背景透明 background-color： 颜色 背景颜色 background-image： none默认值 无背景url（背景路径）背景图片 background-position： left top center right 可以选择背景所在的位置 background-repeat： repeat-x X轴平铺 repeat-y Y轴平铺 no-repeat 背景图片不重复
1.背景图与背景色，都设置，显示背景图。 2.为什么有的网站既设背景图又设背景色？ 1）由于网速或代码冗余而导致网站打开速度慢的时候，图片加载不出来 即可先显示背景色。 2）还有一种情况，考虑到大屏下（如1920*1080或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。
第27课 大图片背景
1.CSS控制页面时，页面以左上角为原点，向下为正Y轴，向右为正X轴 第28课 CSS选择器
1.css选择器：id选择器(#)，class选择器(.),标签选择器（div{}），派生选择器(div p{}) 2.还有没有其他选择器及其用法？ 第一 id #xxx 第二 class .xxx 第三 标签 div p body 等 第四 后代 div p{} .a .b{} 等 表示所有空格后面的选择器生效 第五 子代 div > p 只有大于号后面的选择器生效 不继承下去了 第六 群组选择 div,p,a{} 记住 是逗号 不是小数点，表示div p a标签都生效 第七 伪选择器 比如 a:link 让鼠标放上去的时候生效 第八 通用选择器 比如 p *{} 表示p标签后面的所有标签都生效 第九 相邻选择器 比如 p+div{} 表示 p后面的第一个div生效 后面的 都无效 第十 属性选择器 比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效
|
第29课 CSS优先级
控制的越精细，优先级越高
|
<!DOCTYPE html> <html> <head> <title>study29.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> p { color: red; } .test2 { color: green; } #test1 { color: blue; }
div #test1{ color: pink; }
</style> </head>
<body> <div> <p id="test1" class="test2">天天向上</p> </div> </body> </html>
|
第30课 CSS引入方式
|
<!DOCTYPE html> <html> <head> <title>study30.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./study30.css">
<style type="text/css"> body { background-color: silver; } </style>
</head>
<body> <div id="test1" style="color: white;">好好学习</div> </body> </html>
|
|
@CHARSET "UTF-8"; @import url(study301.css);
#test1 { width: 100px; height: 100px; background-color: orange; } |
|
@CHARSET "UTF-8"; @import url(study301.css);
#test1 { width: 100px; height: 100px; background-color: orange; } |
CSS的四种引入方式
要说出CSS的引入方式，没有什么难度，但要说到为什么使用不同的引入方式，就有些学问在里面了。
CSS的引入方式最常用的有三种，
第一：在head部分加入<link rel="stylesheet"type="text/css" href="my.css"/>,引入外部的CSS文件。
这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。
第二：在head部分加入
<style type="text/css">
div{margin: 0;padding: 0;border:1px redsolid;}
</style>
这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。 但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。
第三：直接在页面的标签里加 <divstyle="border:1px red solid;">测试信息</div>
这种方法现在用的很少，很多公司不了解前端技术的领导还对这种写法很痛恨。认为ＨＴＭＬ里不能出现ＣＳＳ命令。其实有时候使用下也没有什么大不了。比如通用性差，效果特殊，使用ＣＳＳ命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。
除了这三种常用的ＣＳＳ引入方式，还有种很多人都没有见过的引入方式
<style type="text/css">
@import url(my.css);
</style>
这就是第四种引入方式。在ＩＢＭ工作的时候，只能使用一种Ajax框架，就是ＤＯＪＯ。而ＤＯＪＯ的CSS引用，就是采用了@import的方式。这种情况非常少，主要用在CSS文件数量庞大的负责的系统中。另外@important本身是一个CSS命令，是放在CSS文件里的，这个跟LINK标签有很大的区别。
第31课 CSS初始化
|
<!DOCTYPE html> <html> <head> <title>study31.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css"> ul { border: 1px solid blue; } li { border: qpx solid red; } </style>
</head>
<body> <div> 相同的元素，如li，在不同的浏览器下，显示的效果稍有不同，<br> 是因为，浏览器对各种元素的margin，border，font-size等略有不同<br> 为了杜绝这种情况，我们通过CSS强制让所有的元素的属性值都一样<br> 这样浏览器显示效果就一致了，减少了不兼容情况的发生<br> <ul> <li>a</li> <li>b</li> <li>c</li> <li>d</li> </ul> </div> </body> </html>
|
腾讯的初始化代码
/*update 20140616*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
块状元素 |
内联元素 |
|
address - 地址 li |
a - 锚点 |