HTML列表
-
无序列表
-
-
项目的列表li,自带粗体的圆点项目符号
-
块级标签
-
list-style: none; 去掉项目符号
-
ul>li 复合标签,ul标签的子标签必须是li标签
-
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
-
有序列表
-
-
项目的列表li,自带数字的项目符号
-
块级标签
-
list-style: none; 去掉项目符号
-
ol>li 复合标签,ol标签的子标签必须是li标签
-
<h4>班级姓名</h4>
<ol type="1" start="5" reversed>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ol>
-
自定义列表
-
-
项目列表dt dd,dd天然自带留白
-
块级标签
-
dl>dt | dd 复合标签
-
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>js</dt>
<dd>脚本语言</dd>
<dt>张三</dt>
<dt>李四</dt>
</dl>
HTML表格
-
表格的基本结构
-
-
table:表格最外层大标签
-
tr: 表格每一行
-
td: 表格每个单元格,默认居左
-
-
表格的完整结构
-
-
thead: 表格的头部,通常写表格每一列的标题
-
tbody: 表格的主体,写表格的数据
-
tfoot: 表格的底部,写表格的脚注
-
th: 表格标题的单元格。默认居中,加粗效果
-
caption: 表格的标题
-
-
表格自带属性
-
-
border: 表格的边框
-
cellpadding: 单元格的内容与边框之间的空间
-
cellspacing: 单元格与单元格之间的空间
-
align: 单元格的水平对齐方式
-
valign: 单元格的垂直对齐方式
-
-
bgcolor:表格背景颜色
-
表格的css属性
-
border-collapse
-
separate: 默认,每个单元格拥有独立的边框
collapse: 表格设置为单一边框,cellspacing失效
-
表格的合并
-
行合并
-
rowspan
两行合并为一行,上下合并
-
列合并
-
colspan
两列合并为一列,左右合并
css简介
-
css2 (Cascanding style sheets)(层叠样式表)(级联样式表)
-
作用:
-
文本内容:文本大小,文本颜色,对齐方式。。。。
标签的样式
页面的布局
css引入方式
-
行内引入(行内式)
<p style="color: blue;font-size: 20px;">
豫章故郡,洪都新府。
</p>
-
优缺点:结构层和表示层完全不分离,代码冗余,只作用于当前标签
-
文本内部引入(内嵌式)
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
color: gold;
font-size: 15px;
}
</style>
</head>
基础选择器
width: 200px;
height: 200px;
background-color: yellow;
}
width: 200px;
height: 200px;
background-color: yellow;
}
background-color: red;
}
font-size:20px;
}
同一个文本唯一
css长度单位和颜色表示
如果当前没有font-size, 那就相对于父标签的font-size
如果 #aabbcc 可以简写为 #abc
可以设置为8位,最后两位代 表透明度 (00 - ff)
三个百分比
rgba(r,g,b,alpha)
alpha 可是设置 0 到 1的小数 ,代表透明度
文本字体属性
css字体属性
serif -- 衬线字体
-
优缺点:结构层和表示层不完全分离,代码相对冗余,作用于当前页面
-
文本外部引入(外链式)
-
<link rel="stylesheet" href="./css/index.css">
优缺点:结构层和表示层完全分离,代码清晰简洁,可以作用于多个页面
-
css引入方式优先级
-
内嵌式和外链式后引入的生效,行内样式最优先
-
css语法
-
属性名:属性值;属性名:属性值;属性名:属性值;
-
属性名:属性值;
-
color: red;font-size: 30px;text-align: center;
-
通配符选择器
-
标签选择器
-
类选择器(class选择器)
-
id选择器
-
通配符选择器
-
* {
-
标签选择器
-
div {
-
class选择器
-
.box {
-
可以包含多个类选择器,用空格分开
-
id选择器
-
#div1 {
-
优先级
-
id选择器>class选择器>标签选择器>通配符选择器
-
css长度单位:
-
px
像素值,绝对长度单位
-
%
-
百分比,相对于父标签
-
rem
-
相对于根元素(html)的font-size, 一般作用于移动端
-
css颜色表示 :
-
英文单词 (red blue green)
-
六位的十六进制数 #RRGGBB
-
rgb(r,g,b)
三种整数 0 - 255
-
css文本属性
-
color
-
设置文本的字体颜色
-
text-align
-
设置文本的水平对齐方式,默认都是左对齐,相对于标签本身的宽度来对齐的
-
left 默认 多对齐
-
center 居中对齐
-
right 右对齐
-
-
text-decoration
-
设置文本的装饰
-
none 默认,没有装饰
-
underline 定义文本下的一条线
-
overline 定义文本上的一条线
-
line-through 定义贯穿文本的一条线
-
-
text-indent
-
设置文本的首行缩进
-
font-size
设置字体的大小,浏览器默认是16px, 最小设置不能小于12px (1px-11px跟12px的大小是一样的)
-
font-family
-
设置文本的字体系列,如果属性值包含中文或者空格,要加引号,回退系统(备用字体),假如浏览器不支持第一个字体,第二个字体可以生效。
-
宋体(SimSun)
-
Windows 下大部分浏览器的默认中文字体,是为适应印刷术而出现的一种汉字字体。笔画有粗细变化,是一种衬线字体,宋体在小字号下的显示效果还可以接受,但是字号一大体验就很差了,所以使用的时候要注意,不建议做标题字体使用。
-
Times New Roman
-
Mac 平台 Safari 下默认的英文字体,是最常见且广为人知的西文衬线字体之一,众多网页浏览器和文字处理软件都是用它作为默认字体。
sans-serif -- 无衬线字体
-
微软雅黑(Microsoft Yahei)
-
大名鼎鼎的微软雅黑相信都不陌生,从 windows Vista 开始,微软提供了这款新的字体,一款无衬线的黑体类字体,显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。
-
华文黑体(STHeiti)、华文细黑(STXihei)
-
属于同一字体家族系列,MAC OS X 10.6 之前的简体中文系统界面的默认中文字体,正常粗细就是华文细黑,粗体下则是华文黑体。
-
黑体-简(Heiti SC)
-
从 MAC OS X 10.6 开始,黑体-简代替华文黑体用作简体中文系统界面默认字体,苹果生态最常用的字体之一,包括 iPhone、iPad 等设备用的也是这款字体。
-
冬青黑体(Hiragino Sans GB)
-
又叫苹果丽黑,Hiragino 是字游工房设计的系列字体名称。是一款清新的专业印刷字体,小字号时足够清晰,Mac OS X 10.6 开始自带有 W3 和 W6 。
-
Helvetica
-
被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体,微软常用的Arial 字体也来自于它。
-
Arial
-
Windows 平台上默认的无衬线西文字体,有多种变体,比例及字重(weight)和 Helvetica 极为相近。
-
Verdana
-
无衬线字体,优点在于它在小字上仍结构清晰端整、阅读辨识容易。
-
Tahoma
-
十分常见的无衬线字体,字体结构和 Verdana 很相似,其字元间距较小,而且对 Unicode 字集的支持范围较大。许多不喜欢 Arial 字体的人常常会改用 Tahoma 来代替,除了是因为 Tahoma 很容易取得之外,也是因为 Tahoma 没有一些 Arial 为人诟病的缺点,例如大写“i”与小写“L”难以分辨等。(这里故意反过来写)。
-
font-style
-
设置文字字体样式
-
normal 正常显示
-
italic 斜体显示
-
font-weight
-
设置字体的粗细
-
lighter 细体 100
-
normal 默认,标准的字体 400
-
bold 粗体 700
-
bolder 粗体 900
-
-
100-900
-
line-height
-
设置行高
-
normal 默认,合理的行高
-
length 设置固定的行间距
-
-
number 设置数字,此数字与当前字体尺寸相乘的结果
-
单行文本垂直居中
.box { width: 300px; height: 200px; background-color: red; font-size: 30px; /* 设置文本水平居中 */ text-align: center; /* 设置行高和盒子高度一致,单行文本垂直居中 */ line-height: 200px;
-
em
-
相对长度单位,相对于当前元素本身的font-size
-
font: font-style font-weight font-size/line-height font-family
-
注意:只有同时具有font-size和font-family的值时,简写才生效
-