新手笔记——编辑网页文本
编辑网页文本
<span>标签
作用：能让某几个文字或者某个词凸显出来
例：
<p>享受<span class=”show”>”北大式”</span>教育服务</p>
字体样式
属性名 含义 举例
font-family 设置字体类型 font-family:”隶书”;
font-size 设置字体大小 font-size :12px;
font-style 设置字体风格 font-size :italic;（倾斜）
font-weight 设置字体的粗细 font-weight:bold;（加粗）
font 在一个声明中设置所有字体属性 font:italic bold 36px”宋体”;
font-family属性 字体类型
例：p{font-family:Verdana,”楷体”;}
英文字体直接写，中文字体加””，多种字体用,隔开
font-size属性 字体大小
单位：px（像素）
em、rem、cm、mm、pt、pc
例：h1{font-size :24px;} h2{font-size :16px;}
font-style属性 字体风格
normal（默认值，定义标准的字体）、italic（倾斜）和oblique（斜体）
font-weight属性 字体粗细
normal（默认值，定义标准的字体）
bold（粗体字体）
bolder（更粗的字体）
lighter（更细的字体）
100、200~800、900（定义由细到粗的字体，400等于normal，700等同于bold）
font属性
字体属性的顺序：字体风格 字体粗细 字体大小 字体类型
例： p span{font:oblique bold 36px ”宋体”;}
文本属性
属性 含义 举例
color 设置文本颜色 color:#00c
text-align 设置元素水平对齐方式 text-align:right
text-indent 设置首行文本的缩进 text-indent:20px
line-height 设置文本的行高 line-height:25px
text-decoration 设置文本的装饰 text-decoration:underline
color属性 颜色
RGB
十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿水分量，最后两位表示蓝瘦分量
rgb(r,g,b):正整数的取值为0~255
RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0~1
例：color:#A983D8 color:rgb(0,255,255) color:rgba(0,0,255,0.5)
text-align属性 水平对齐方式
值 说明
left 把文 本排列到左边。默认值：有浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
text-indent属性 首行文本的缩进
text-indent:em或px
line-height属性 行高
line-height:px
text-decoration属性 文本装饰
值 说明
none 默认值，定义的标注文本
underline 设置文档的下划线
overline 设置文档的上划线
line-through 设置文档的删除线
vertical-align属性 垂直对齐方式
middle（中间对齐）、top（上对齐）、bottom（下对齐）
文本阴影
text-shadow:color x-offset y-offset blue-radius;
color:阴影颜色
x-offset：x轴位移，用来指定阴影水平位移量
y-offset：y轴位移，用来指定阴影垂直位移量
blue-radius：阴影魔术半径，代表阴影向外模糊的模糊范围
伪类语法
伪类名称 含义 示例
a:link 未单击访问超链接样式 a:link {color:#B29210;}
a:visited 单击访问后超链接样式 a:visited {color:#B29210;}
a:hover 鼠标悬浮其上的超链接样式 a:hover {color:#B29210;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#B29210;}
设置伪类的顺序：a:link-->a:visited-->a:hover-->a:active
伪类样式
语法：标签名:伪类名{声明;}
例：
a:hover {
color:#B29210;
text-decoration:underline;
}
背景属性
背景颜色：
背景图像
图像路径： background-image:url(img/buy.png);
重复方式： background-repeat;
background-repeat:repeat;沿水平和垂直两个方向平铺
background-repeat:no-repeat;不平铺，即只显示一次
background-repeat:repeat-x;只沿水平方向平铺
background-repeat:repeat-y;只沿垂直方向平铺
背景定位： background-position:10px 15px;
background-position属性
值 含义
Xpos Ypos 单位：px，Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键词 ：
水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom
背景属性
background属性 背景样式简写
例：background:#C00 url(背景图片) 205px 10px no-repeat;
背景颜色 背景图片 背景定位 背景不重复显示
背景尺寸
Background-size
属性值 描述
auto 默认值，使用背景图片保持原样
percentage 当使用百分值时候，不是相对于背景的尺寸大小来计
的，而是相对于元素宽度来计算
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度 或者高度正好适应所定义背景的区域
背景颜色渐变
线性渐变
颜色沿着一条直线过度：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
线性渐变
语法：linear-gradient(position,color1,color2,...)
渐变方向，颜色1，颜色2，颜色....
兼容其他浏览器 例：Webkit内核的浏览器
-wdbkit-linear-gradient(position,color1,color2,...)
列表
什么是列表
列表就是信息资源的一种展示形式
一列表的样式显示，可以是信息结构化和条理化，便于浏览者能够更快捷的获得相应的信息
列表的分类
无序列表
有序列表
定义列表
无序列表
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
ul声明无序列表 li声明列表项 ul标签只能嵌套li标签
特性
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无须类型的列表，如导航、侧边栏新闻、有规律的图文组 合模块等
有序列表
<ol>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol>
ol声明有序列表 li声明列表项 ol标签只能嵌套li标签
特性
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选择等
定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
</dl>
dl声明定义列表 dt声明列表项 dd定义列表项内容
特性
没顺序，每个<dt>标签、<dd>独占一行（块元素）
默认没有标记
一般用一个标题下有一个或多个列表项的情况
列表样式
list-style-type
list-style-image
list-style-position
list-style
list-style
例：取出列表前面的小黑点
li{
list-style：none
}
CSS设置超链接伪类
a:hover
表格
为甚使用表格
简单通用 结构稳定
基本机构
行 列 单元格
基本语法
<table>
<tr>
<th>1行1列的标题</th>
<th>1行2列的标题</th>
<th>1行3列的标题</th>
</tr>
<tr>
<td>1行1列的单元格</td>
<td>1行2列的单元格</td>
<td>1行3列的单元格</td>
</tr>
<tr>
<td>2行1列的单元格</td>
<td>2行2列的单元格</td>
<td>2行3列的单元格</td>
</tr>
</table>
<table> 表格标签 <tr>行标签
<th>单元格标题标签 <td>单元格内容 标签
表格的跨列
<table>
<tr>
<td colspan=”n”>1行1列的单元格</td>
</tr>
<tr>
<td>单元格内容</td>
...
</tr>
</table>
colspan = “n” 所跨的列数n colspan跨列
合并后要把合并的单元格删除掉
表格的跨行
<table>
<tr>
<td rowspan=”n”>1行1列的单元格</td>
</tr>
<tr>
<td>单元格内容</td>
...
</tr>
</table>
rowspan = “n” 所跨的行数n rowspan跨行
合并后要把合并的单元格删除掉
表单元素
<form method=”get 或者 post” action=”result.html”>
</form>
method规定如何返送表单数据 常用值：get显示 post不显示
action表示向何处发送表单数据
表单元素格式
<input type=”text” name=”name” value=”text”>
input元素类型 input元素名称 input元素的值
name值要设置成一样
表单的高级应用
隐藏域
只读
禁用
CSS3的高级选择器
层次选择器
结构伪类选择器
属性选择器
层次选择器
后代选择器
body p{ background:red}
后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
body>p{ background:red}
相邻兄弟选择器
类+p{ background:red}
通用兄弟选择器
类~p{ background:red}
结构伪类选择器
属性选择器
