金山老师的笔记

Appearance

文本样式 ​

字体 ​

font-size ： 字体大小，表示尺寸

​ length: px cm em

​ percentage : 百分比 %

font-weight: 100-900 (400 normal) bolder bold 700 lighter

font-style: 字体样式

​ normal 正常的

​ italic 斜体

​ oblique： 斜体

可以使用复合属性font设置所有跟font相关的样式

文本样式 ​

color: 文本的颜色 ​

​ 取值：

  1. 颜色名字

  2. 十六进制记法

  3. R G B 三原色

  4. RGBA 三原色，A是控制透明度 Alpha 0 -1 , 1完全不透明，0 完全透明

    html
    <p style="color: red;">使用颜色名称</p>
<p style="color: #006699;">使用十六进制</p>
<p style="color: rgb(0,0,0);">使用十六进制</p>
<p style="color: rgba(0,0,0,1);">rgba透明度为1</p>
<p style="color: rgba(0,0,0,0);">rgba透明度为0</p>

text-align: ​

文本的对齐方式 left right

html
<p style="text-align: left;">文字对齐方向 left</p>
<p style="text-align: right;">文字对齐方向 right</p>
<p style="text-align: center;">文字对齐方向 center</p>

text-indent: 首行文本的缩进 ​

html
<p style="text-indent: 100px;">东软睿道教育信息技术有限公司（简称东软睿道）由东软创办，是东软基于20年来对IT产业实践的理解和对IT教育实践的洞察，整合国内外众多优秀合作伙伴的教育资源和产品，依托信息与通信技术，通过线上与线下服务模式的组合，基于互联网和云计算来实现交互式与实践式学习的教育与人才服务提供商。</p>

line-height： ​

行高,一般用于配合着垂直居中使用, 将文本的 line-height 和容器的高度一致

html
<div style="border: solid 1px red;height: 100px;line-height: 100px;">
东软睿道教育信息技术
</div>

text-decoration： ​

文本的装饰

html
<div  style="text-decoration-line: line-through;">由东软创办，是东软基于20年来</div><br/>
		<div  style="text-decoration-line: underline;">由东软创办，是东软基于20年来</div><br/>
		<div  style="text-decoration-line: overline;">由东软创办，是东软基于20年来</div><br/>
		
		<div  style="text-decoration-line: underline;text-decoration-style: solid;">由东软创办，是东软基于20年来</div><br/>
		<div  style="text-decoration-line: underline;text-decoration-style: dashed;">由东软创办，是东软基于20年来</div><br/>
		<div  style="text-decoration-line: underline;text-decoration-style: dotted;">由东软创办，是东软基于20年来</div><br/>
		
		<div  style="text-decoration-line: underline;text-decoration-style: solid;text-decoration-color: red;">由东软创办，是东软基于20年来</div><br/>

伪类： ​

伪类选择元素基于的是当前元素处于的状态。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

:hover 伪类将应用于有鼠标指针悬停于其上的元素。 语法：

伪类应用 ​

html
<style>
a{
	text-decoration: none;
}
a:visited{
	color:#C8C8C8;
}
a:hover{
	color:#ec7814;
}
a:link{
	color:#C8C8C8;
}
</style>

<a href="http://www.baidu.com"  >百度</a>



<style>
li:first-child{
	color:green;
}
li:last-child{
	color:red;
}
li:nth-child(3){
	color:pink;
}
</style>

<ul>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
    <li>结构性伪类选择符 E:first-child</li>
</ul>

背景颜色 ​

html
	<div style="background-color: grey;">
			
				东软睿道教育信息技术有限公司（简称东软睿道）由东软创办，是东软基于20年来对IT产业实践的理解和对IT教育实践的洞察，整合国内外众多优秀合作伙伴的教育资源和产品，依托信息与通信技术，通过线上与线下服务模式的组合，基于互联网和云计算来实现交互式与实践式学习的教育与人才服务提供商。
			
		</div>

列表的样式 ​

list-style 设置列表样式。 常用是设置为none

列表中的 li默认是独占行，块级元素。如何想变为行内元素，可以设置display属性

display:none 不显示

​ block 块级元素

​ inline 行内元素

html
块级元素
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建 HTML 表单
<h1> 定义最大的标题
<h2> 定义副标题
<h3> 定义标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体（正文）
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚（脚注或表注）
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行

行内元素列表
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注（标记）
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量

Font Awesome矢量图标 ​

官网地址：http://www.fontawesome.com.cn/

使用步骤: ​

引入css，使用i标签声明class

html
<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">		<style>			.colorblue{				color:red;			}		</style>	</head>	<body>		<i class="fa fa-weixin colorblue">图书</i>	</body></html>

样式练习 ​

HTML
<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title></title>		<style>			.demo{				width: 249px;				/* height: 350px ; */			}						.head{				background-color: #666666;				/* color: white; */				color: #ffffff;			}						.foot{				background-color: #EFEFEF;				line-height: 100px;				text-indent: 30px;			}			.d1{				line-height: 50px;				text-align: center;			}						.d2{				line-height: 70px;				text-align: center;				font-size: 25px;			}			.d3{				line-height: 50px;				text-indent: 150px;			}					</style>	</head>	<body>				<div class="demo" >			 <div class="head">				<div class="d1">生活中总是充满了乐趣</div>				<div class="d2">聊聊我的大学室友</div>				<div class="d3">@张三 著</div>		 			 </div>			 <div class="foot">那些回忆，那些事儿...</div>			</div>	</body></html>

Released under the MIT License.

Copyright © 2024-present 金山老师