笔记及注意事项已经在代码片段中用注释已经标明
01-display属性
<!DOCTYPE html>
<html lang="en">
<!--
display 可以控制标签的显示模式
display:none|inline|block|inline-block
继承性:无
display值的解释:
none:此元素不被显示,在文档中被移除.
block:此元素按块级元素显示:前后带换行符,自己站=占一行. 内联元素 ==> 块元素
inline:此元素按内联元素显示:一个挨着一个. 块元素 ==> 内联元素
inline-block:按行内标签进行排版,但是可以设置宽高,而且高度可以影响行高(以后再详细讲解)
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display属性</title>
<style>
.par {
/* 当前标签,从文档流中移除掉 */
display: none;
}
.block-span {
/* block 独占一行 由内联元素转变成块元素 */
/* 也可以用inline由块元素转变成内联函数 */
display: block;
}
#imgText{
width: 200px;
height: 200px;
}
#bt {
background-color: green;
/* 内联元素设置宽高没有任何影响 */
height: 400px;
width: 400px;
/* 当设置了dispaly:inline-block属性后,由内联元素转换成成了行内块,故高度和宽度则对其便有了影响 */
display: inline-block;
}
</style>
</head>
<body>
<div class="par">
DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,
DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,
DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,DISPLAY属性,
</div>
<span class="block-span">我是Span标签1</span>
<p>
<span id="bt">我是Span标签2</span>
<!-- img默认就是行内块 -->
<img id="imgText" src="./img/a.png" alt="微信图" title="我的微信个人二维码">
<span>我是Span标签3</span>
</p>
</body>
</html>02-颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>颜色</title>
<style>
div {
/* background-color: rgb(200, 40, 200); */
/* background-color: rgb(100%, 100%, 0%); */
background-color: #445566; /*每两个数分别代表一个RGB中的每一个数值*/
/* color:#ffcc99 等价于 #fc9 */
}
</style>
</head>
<body>
<div>
颜色控制
</div>
</body>
</html>03-字体排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字体排版</title>
</head>
<style>
/* Chrome浏览器默认的像素是16px; */
p {
/* font-size: 14px; 设置字体大小 */
/* font-size:2em; 设置当前子体大小的两倍 */
font-size: 2em;
}
#p2 {
/* font-weight: bolder; 字体加粗 */
font-size: 32px;
/* 用数字数值控制粗细 */
font-weight: 100;
/*使用系统文字倾斜*/
font-style: oblique;
}
#p3 {
/* font-size: medium; 中等的 */
font-size: medium;
/*强制使文字倾斜*/
font-style: italic;
}
#p4 {
/*font的综合使用,分别代表设置 斜体/加粗/大小/行高/样式*/
font: italic bold 16px/20px arial;
}
body {
/* 中文字体需要用引号引起来,英文字体则不需要,如果英文字体中带有空格则需要使用引号引起来 */
/*字体可以设置多个,当千米那不存在的时候,则系统使用后面的字体*/
font-family: '幼圆', "宋体";
}
</style>
<body>
<p>
嗯嗯嗯嗯嗯嗯嗯
</p>
<p id="p2">哈哈哈哈哈哈哈哈哈哈</p>
<p id="p3">哈哈哈哈哈哈哈哈哈哈</p>
<p id="p4">哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>04-css文字间距处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字处理</title>
<style>
p {
/*字符间距,中文一个字当成一个英文字符*/
letter-spacing: 10px;
/* 单词之间的间距,中文中间有空格的情况下会当作一个单词来处理 */
word-spacing: 20px;
/* 设置3.0倍行高 */
line-height: 3.0;
/* line-height: 30px; */
/* font 设置行高的方式 */
/* font: normal bold 16px/1.5 'Microsoft yaHei'; 1.5为设置的1.5倍行高 */
}
div {
border: 1px solid red;
height: 100px;
/* 由于div本身就100px所以设置行高为100px正好为居中显示在中间位置 */
line-height: 100px; /*设置文本在竖直方向居中对齐*/
text-align: center; /*设置文本水平居中对齐*/
}
</style>
</head>
<body>
<p>GODLIKE GODLIKE 嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯</p>
<p>GODLIKE GODLIKE 嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯</p>
<div>我是div</div>
</body>
</html>05-文字装饰处理
<!DOCTYPE html>
<!-- text-decoration:none/underline/overline/line-through; /* 去掉下划线/下划线/上划线/删除线 */ -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字装饰处理</title>
<style>
/* 去掉下划线 */
ul > li >a {
text-decoration:none;
}
/* 去掉删除线 */
s {
text-decoration: none; /*删除删除线效果*/
}
/* 添加下划线和删除线 */
p {
text-decoration: underline line-through; /* 添加下划线和删除线 */
/*设置首行缩进*/
text-indent: 2em;
}
p.pre-demo {
/*预格式化,按文档的书写格式保留空格,空行原样显示*/
white-space: pre;
text-decoration: none;
}
.p3 {
text-decoration: none;
border:1px solid black;
width: 200px;
height: 100px;
/* 不换行 */
white-space: nowrap;
/* 把溢出的隐藏掉 */
overflow: hidden;
}
</style>
</head>
<body>
<ul>
<li><a href="#">划重点！一文掌握习近平外交思想的理论要义</a></li>
<li><a href="#">习近平时间|全民健身 总书记很关心</a></li>
<li><a href="#">美国业界反对特朗普政府对华商品加征关税 </a></li>
</ul>
<!-- 删除线效果 -->
<s>删除线效果</s>
<p>我是段落</p>
<p class="pre-demo">
var t = 19;
var m = t * 9;
console.log(m);
</p>
<p class="p3">
美国业界反 对特朗普政府对华 商品加征关税美国业界反对特朗普政
美国业界反 对特 朗普政府对华商 品加征关税
美国业界反对特朗普 政府对华商品加征关税
美国业界反对 特朗普政府对华商品 加征关税
府对华商品 加征关税美国业界反 对特朗普政府对 华商品加征关税
</p>
</body>
</html>06-文字的综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>文字的综合案例</title>
<style>
.cen {
text-align: center; /* 文本居中对齐 */
}
.h-title {
font: 26px/1.5 "Microsoft YaHei";
}
.date {
color: #ccc;
}
.from-editor {
color: #900;
}
.cen a {
color: #00E;
}
.main-article {
width: 802px;
margin: 0 auto; /* 块级元素自动对齐 */
text-indent: 2em; /* 设置首行缩进 */
}
</style>
</head>
<body>
<h1 class="cen h-title">台湾屏东县海域发生4.7级地震</h1>
<p class="cen">
<span class="date">
18年8月9日16时1分
</span>
<span class="from-editor">
百度新闻
</span>
<a href="#">收藏本文</a>
</p>
<hr>
<p class="main-article">
据中国地震台网测定，<a href="#">[微博]</a>北京时间2018年8月9日16时1分在台湾屏东县海域
（北纬20.98度，东经119.96度）发生4.7级地震，震源深度15千米。据中国地震台网测定，
北京时间2018年8月9日16时1分在台湾屏东县海域（北纬20.98度，东经119.96度）发生4.7级地震，震源深度15千米。
</p>
<p class="main-article">
据中国地震台网测定，北京时间2018年8月9日16时1分在台湾屏东县海域
（北纬20.98度，东经119.96度）发生4.7级地震，震源深度15千米。据中国地震台网测定，
北京时间2018年8月9日16时1分在台湾屏东县海域（北纬20.98度，东经119.96度）发生4.7级地震，震源深度15千米。
</p>
</body>
</html>附带CSS文字及颜色常用的属性:
#Note{
color: green; /*设置字体颜色*/
background-color: aquamarine; /*设置背景颜色*/
font-size: 50px; /*设置字体大小*/
font-style: oblique; /*使文字倾斜*/
font-weight: bold; /*字体加粗*/
font-family: '幼圆'; /*设置字体样式*/
font: italic bold 16px/20px arial; /*font的综合使用,分别代表设置 斜体/加粗/大小/行高/样式*/
letter-spacing: 10px; /*字符间距,中文一个字当成一个英文字符*/
word-spacing: 20px; /* 单词之间的间距,中文中间有空格的情况下会当作一个单词来处理 */
white-space: pre/nowrap; /*预格式化,按文档的书写格式保留空格,空行原样显示/不换行显示*/
line-height:19px; /*设置行高*/
text-align: center; /*设置文本水平居中对齐*/
text-indent: 2em; /*设置首行缩进,只能用于块级元素*/
text-decoration:none/underline/overline/line-through; /* 去掉下划线/下划线/上划线/删除线 */
overflow: hidden; /* 把溢出的隐藏掉 */
}上一篇: CSS的选择器和优先级-01