第21课 inline内联（行内元素）

<!DOCTYPE html>

<html>

<head>

<title>study21.html</title>

<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>

<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 - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 有序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 无序列表

a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

第22课内联与块状的转化

<!DOCTYPE html>

<html>

<head>

<title>study22.html</title>

div {

width:200px;

height:200px;

display:inline;

background: orange;

}

span {

width:200px;

height:200px;

display:none;

/* display:block; */

background: silver;

}

</style>

</head>

<body>

</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>

#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>

#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>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

</div>

远芳侵古道，晴翠接荒城。<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或者更大）网站背景图不足以撑满整个显示区域，所以背景图以外的部分要显示背景色，并且背景图边缘部分必须处理妥当保证平滑过渡到背景色，不会有突兀的感觉。

<!DOCTYPE html>

<html>

<head>

<title>study26.html</title>

body {

background-color:black;

background-repeat: repeat-x;

background-attachment: fixed;

}

</style>

</head>

<body>

</body>

</html>

第27课大图片背景

<!DOCTYPE html>

<html>

<head>

<title>study27.html</title>

#text1 {

border: 1px solid orange;

width: 500px;

height: 500px;

background-repeat: no-repeat;

background-position: center center;

}

#text2 {

width: 80px;

height: 20px;

border: 1px solid blue;

background-position: -5px -120px;

}

#text3 {

width: 30px;

height: 30px;

border: 1px solid black;

background-position: -160px -523px;

}

</style>

</head>

<body>

</body>

</html>

1.CSS控制页面时，页面以左上角为原点，向下为正Y轴，向右为正X轴

第28课 CSS选择器

<!DOCTYPE html>

<html>

<head>

<title>study28.html</title>

#test1 {

width: 100px;

height: 50px;

border: 1px solid blue;

}

.test2 {

width: 100px;

height: 50px;

border: 1px solid red;

}

div {

width: 200px;

height: 200px;

background-color: orange;

margin-bottom: 10px;

}

div p {

color: red;

}

</style>

</head>

<body>

<div>

普通div

<p>

div中的p

</p>

</div>

<p>

独立的p

</p>

<div>

css选择器：id选择器(#)，class选择器(.),标签选择器（div{}），派生选择器(div p{})

</div>

</body>

</html>

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>

p {

color: red;

}

.test2 {

color: green;

}

#test1 {

color: blue;

}

div #test1{

color: pink;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

第30课 CSS引入方式

<!DOCTYPE html>

<html>

<head>

<title>study30.html</title>

body {

background-color: silver;

}

</style>

</head>

<body>

</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部分加入

div{margin: 0;padding: 0;border:1px redsolid;}

</style>

这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。　但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

第三：直接在页面的标签里加　<divstyle="border:1px red solid;">测试信息</div>

这种方法现在用的很少，很多公司不了解前端技术的领导还对这种写法很痛恨。认为ＨＴＭＬ里不能出现ＣＳＳ命令。其实有时候使用下也没有什么大不了。比如通用性差，效果特殊，使用ＣＳＳ命令较少，并且不常改动的地方，使用这种方法反而是很好的选择。

除了这三种常用的ＣＳＳ引入方式，还有种很多人都没有见过的引入方式

@import url(my.css);

</style>

这就是第四种引入方式。在ＩＢＭ工作的时候，只能使用一种Ajax框架，就是ＤＯＪＯ。而ＤＯＪＯ的CSS引用，就是采用了@import的方式。这种情况非常少，主要用在CSS文件数量庞大的负责的系统中。另外@important本身是一个CSS命令，是放在CSS文件里的，这个跟LINK标签有很大的区别。

第31课 CSS初始化

<!DOCTYPE html>

<html>

<head>

<title>study31.html</title>

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>

</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}

块状元素

内联元素

前端HTML、CSS学习完整笔记（中上篇）相关推荐

Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介第一个网页自结束标签和注释文档声明进制字符编码完整的文档结构 2021/9/30 VScode安装及使用实体 meta ...
李宏毅强化学习完整笔记！开源项目《LeeDeepRL-Notes》发布
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale开源核心贡献者:王琦.杨毅远.江季提起李宏毅老师,熟悉强化学习的读者朋友一 ...
CSS 学习成长笔记（1）
CSS Note_1 一.基础认知二.选择器 1. 标签选择器 2. 类选择器 3. id 选择器 4. 通配符选择器三.字体和文本样式 1. 字体样式 2. 文本样式 3. line-hei ...
CSS 学习成长笔记（3）
CSS Note_3 一.CSS 盒子模型 1. CSS 三大特性 2. CSS 特性之优先级(详细) 3. 盒子模型二.CSS 浮动 1. 结构伪类选择器 2. 伪元素 3. 标准流 4. 浮 ...
web前端培训—css源码笔记（二）【爱创课堂】
复习: css介绍:cascading style sheet 层叠样式表引入css目的: 引入css好处: css组成:选择符和声明,声明包括样式和样式值 css引入方式 css文件本身不 ...
尚硅谷-宋红康-JVM上中下篇完整笔记-JVM上篇_内存与垃圾回收篇
前言一.jvm及java体系结构 1. Java及JVM简介 TIOBE语言热度排行榜 https://www.tiobe.com/tiobe-index/ 世界上没有最好的编程语言,只有最适用于具 ...
【前端】CSS 学习笔记（重要）
视频链接:https://www.bilibili.com/video/BV14J4114768 简写语法先安装 Mithril Emmet 插件 (webstorm自带) css 单位 p → % ...
前端入门css学习笔记（十七）-----二级菜单
二级菜单的方法就是在一个<ul><li>中再嵌套一个<ul><li> 如下: <ul class="box"><l ...
B站coderwhy前端html+css学习笔记 day10
一.cursor 可以设置鼠标指针在元素上面时的显示样式 1.常见设值 auto: 浏览器根据上下文决定指针的显示样式,比如根据文本或者非文本切换指针样式 default: 箭头效果 pointer ...

前端HTML、CSS学习完整笔记（中上篇）

第21课 inline内联（行内元素）

第22课内联与块状的转化

第三章 CSS

第23课 CSS控制段落文本

第24课文字控制

第25课字体控制精讲

第26课背景图片

第27课大图片背景

第28课 CSS选择器

第29课 CSS优先级

第30课 CSS引入方式

第31课 CSS初始化

前端HTML、CSS学习完整笔记（中上篇）相关推荐

最新文章

热门文章

前端HTML、CSS学习完整笔记（中上篇）

第21课 inline内联（行内元素）

第22课 内联与块状的转化

第三章 CSS

第23课 CSS控制段落文本

第24课 文字控制

第25课 字体控制精讲

第26课 背景图片

第27课 大图片背景

第28课 CSS选择器

第29课 CSS优先级

第30课 CSS引入方式

第31课 CSS初始化

前端HTML、CSS学习完整笔记（中上篇）相关推荐

最新文章

热门文章

第22课内联与块状的转化

第24课文字控制

第25课字体控制精讲

第26课背景图片

第27课大图片背景