HTML (第五章)
标签： CSS3美化网页元素
三个基本标签
- div
标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
标签常用于组合块级元素- span
用于对文档中的行内元素进行组合。
标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
在段落中对某些文本进行加工选用span- pre
<pre>标签可定义预格式化的文本。
被包围在<pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体，原样输出
字体样式
| 属性名 | 含义 |
|---|---|
| font-family | 设置字体类型 |
| font-size | 设置字体大小 |
| font-style | 设置字体风格 |
| font-weight | 设置字体的粗细 |
| font | 在一个声明中设置所有字体属性 |
- font-family
设置一个元素的字体
可以把多个字体名称用逗号隔开，如果浏览器不支持第一个字体，则会尝试下一个。
p {
font-family:"Times New Roman",Georgia,Serif;
}
- font-size
字体大小 （默认16px）
单位：px 像素； em（父容器字体大小em）;
rem （根容器字体大小rem）一般情况下根目录都是<html>；- font-style
指定文本的字体样式。
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>
<body>
<p class="normal">这是一个段落,正常。</p>
<p class="italic">这是一个段落,斜体。</p>
<p class="oblique">这是一个段落,斜体。</p>
</body>`
- font-weight
设置文本的粗细
normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100~900 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold，取整数。- font
指定在一个声明的所有字体属性：
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入。
<style>
p.ex1
{
font:15px arial,'宋体';
}
p.ex2
{
font:italic bold 18px/30px '宋体';
}
</style>
<body>
<p class="ex1">这是一句话</p>
<p class="ex2">这是一句话</p>
</body>
文本样式
| 属性名 | 含义 |
|---|---|
| color | 设置文本颜色 |
| text-align | 设置元素水平对齐方式 |
| text-indent | 设置首行文本的缩进 |
| line-height | 设置文本的行高 |
| text-decoration | 设置文本的装饰 |
- color
颜色属性 属性值有四种
单词
十六进制 前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
rgb(0,0,0)正整数的取值为0～255
rgba(0,0,0,0) 在RGB基础上增加了控制alpha透明度的参数，这个透明通道值为0～1- text-align
left 把文本排列到左边。默认值：由浏览器决定
right 把文本排列到右边
center把文本排列到中间
justify 实现两端对齐文本效果- text-decoration
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
ine-through 设置文本的删除线- vertical-align
垂直对齐方式
middle 垂直居中
top 头部对其
bottom 底部对其- text-shadow
文本阴影
p{text-shadow : color x-offset y-offset blur-radius;}
<!--color 阴影颜色
x-offset X轴位移，用来指定阴影水平位移量
y-offset Y轴位移，用来指定阴影垂直位移量
blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围
-->
使用CSS设置超链接
| 伪类名称 | 含义 |
|---|---|
| a:link | 未单击访问时超链接样式 |
| a:visited | 单击访问后超链接样式 |
| a:hover | 鼠标悬浮其上的超链接样式 |
| a:active | 鼠标单击未释放的超链接样式 |
| 设置伪类的顺序：a:link->a:visited->a:hover->a:active |
列表样式
- list-style-type 设置列表项标记的类型。
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。- list-style-image 使用图像来替换列表项的标记。
URL 图像的路径。
none 默认。无图形被显示。- list-style-position 设置在何处放置列表项标记。
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。- list-style 简写属性在一个声明中设置所有的列表属性。
网页背景
- background-color 指定要使用的背景颜色
- background-position 指定背景图像的位置
1、x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
2、xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
3、X、Y方向关键词
水平方向的关键词：left、center、right 垂直方向的关键词：top、center、bottom
如果仅指定一个关键字，其他值将会是"center"
background-size指定背景图片的大小
| 属性值 | 描述 |
|---|---|
| auto | 默认值，使用背景图片保持原样 |
| percentage | 当使用百分值时,不是相对于背景的尺寸大小来计算的,而是相对于元素宽度来计算的 |
| cover | 整个背景图片放大填充了整个元素 |
| contain | 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域 |
- background-repeat 指定如何重复背景图像
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
可以利用其作背景（重复平铺）- background-origin 指定背景图像的定位区域
- background-clip 指定背景图像的绘画区域
- background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
- background-image 指定要使用的一个或多个背景图像
线性渐变
线性渐变
颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
如果浏览器无法显示则在前面前面加上前缀
不止作用于线性渐变，也作用于其他浏览器不兼容
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
background：linear-gradient ( 渐变方向, color1, color2,…)<!--渐变方向加上to-->
1952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
