《span》标签
语法：<span>内容</span>
然后在head里面的style标签中调用span{ }
《既可以在类选择器和ID选择器、标签选择器中使用》
字体样式：
1. font-family 字体类型 例： font-family:"隶书";
- 可以声明多种字体，用逗号分隔开。英文字体中有空格，就括在双引号里面。
- 中英文两种字体时，一定要将英文字体写在中文之前。
例：p{font-family:Courier New "隶书"}
2. font-size 字体大小 例： font-size:12px;
- 控制字体的大小，常用的单位是 px。
- 其他的单位《显示由大到小是》：in、cm、pc、mm、pt。《除了px和em，其他的都不常用。》
3. font-style 字体风格 例： font-style:italic;
- font-style的属性值：
normal 标准的字体样式《默认字体样式》
italic 斜体字体样式
oblique 倾斜字体样式
4. font-weight 字体粗细 例： font-weight:bold;
- font-weight的属性：
normal 默认值，定义标准的字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
100,200,300,400,500,600,700,800,900 定义由细到粗的字体，400等于normal，700等同于bold。
5. font 设置所有字体属性
- 使用font属性可以一次性设置字体的所有属性，几种字体属性的顺序：
顺序： 字体风格 -> 字体粗细 -> 字体大小 -> 字体类型
font-style font-weight font-size font-family
例： font:italic bold 12px "隶书";
css排版网页文本：
排版文本样式有：
1.文本颜色：color：#00c;
2.水平对齐方式：text-align：right;
text-align属性值：
left 文本排列到左边. 默认值
right 文本排列到右边
center 文本排列到中间
justify 实现两端对齐文本效果
3.首行文本的缩进：text-indent：2em;
《2em表示文本开头缩进两个字符》
文本的行高：line-height：25px;《标签中字体的大小*1.5=就是行高的大小<用像素表示>》
4.文本的装饰：text-decoration：underline;
text-decoration的属性： 《用于设置超链接的文本装饰》
none 默认值，定义的标准文本
underline 文本的下划线
overline 文本的上划线
line-through 文本的删除线
blink 文本闪烁，此值只在Firefox浏览器中有效，在IE中无效。
5.垂直对齐方式： 《设置图片和文本居中对齐》
vertical-align：
值：
top、middle、bottom。
css设置超链接
1.为元素选择器：
-- css里面提供了一些定义好的样式，可以拿过来使用
语法：标签名：伪类名{声明：}例子如下：
* 比如 超链接
超链接的状态：
原始状态 点击后 鼠标放上去状态 点击
:link :visited :hover :active
例：用《background-color:表示背景颜色》来做例子
<head>
<style type="text/css">
// 原始状态
a:link{
background-color:green; 。
}
// 点击后
a:visited{
background-color:yellow;
}
// 鼠标放上去状态
a:hover{
background-color:blue;
}
// 点击
a:active{
background-color:red;
}
</style>
</head>
<body>
<a href="www.helloword.com"></a>
</body>
通常只设置两种样式：1.超链接a标签样式。2.鼠标悬浮在超链接上的样式。
<style type="text/css">
a{text-decoration:none;color:#330099;}//去除超链接的下划线
a:hover{text-decoration:underline;color:yellow;}//鼠标悬浮在超链接上时出现下划线及改变颜色
</style>
<body>
<a href="6.jpg" target="_blank">
<img src="6.jpg" alt="不能显示" title="图片"></a>
</a>
</body>
css设置鼠标形状：
通过cursor设置鼠标各式各样的指针样式，cursor属性可以在任何选择器中使用。
语法：<p style="cursor:pointer">非超链接的文本</p>
cursor的属性：
default: 默认光标
pointer: 超链接的指针《手指型》
wait: 指示程序正在忙
help: 指示可用的帮助
text： 指示文本
crosshair 鼠标呈现十字状
css背景样式：
认识<div>标签：《成对出现》
语法：<div id="divId">内容</div>
css背景属性：
背景属性包括两种：1.背景颜色（background-color）默认值：transparent。
语法：background-color:颜色；
2.背景图像（background-image）
-- 背景图像；
语法：background-image:url(图片路径)；
有一个特殊的值：none。 表示不显示背景图片。很少用。
-- 背景重复方式：（background-repeat）
属性：
repeat： 水平和垂直两个方向平铺
no-repeat： 背景图像只显示一次《用于小图标的显示和只显示一次的图像。》
repeat-x： 只水平方向平铺《通常用于导航背景和标题背景》
repeat-y： 只垂直方向平铺
-- 背景定位：（background-position）
简写：{background:url(路径) no-repeat right;}
列表样式：
4个属性来设置列表的样式：list-style-type、list-style-image、list-style-position、list-style。
1.list-style-type：的属性：
none： 无标记符号 例：list-style-type：none；
disc： 实心圆，默认值。例：list-style-type:disc;
circle：空心圆 例：list-style-type:circle;
square：实心正方形 例：list-style-type:square;
decimal：数字 例：list-style-type:decimal;
3.list-style-position:的属性：
-- inside：表示项 目标记放置在文本以内，且环绕文本根据标记对齐。
-- outside：默认值，保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。
4.list-style:
简写：list-style:circle outside url(路径);没有图像就默认值。
-- 设置背景为矩形圆：
.a{width:100px; height:100px; border-radius: 10px 10px 10px 10px; background:url(a.jpg);}
语法：<span>内容</span>
然后在head里面的style标签中调用span{ }
《既可以在类选择器和ID选择器、标签选择器中使用》
字体样式：
1. font-family 字体类型 例： font-family:"隶书";
- 可以声明多种字体，用逗号分隔开。英文字体中有空格，就括在双引号里面。
- 中英文两种字体时，一定要将英文字体写在中文之前。
例：p{font-family:Courier New "隶书"}
2. font-size 字体大小 例： font-size:12px;
- 控制字体的大小，常用的单位是 px。
- 其他的单位《显示由大到小是》：in、cm、pc、mm、pt。《除了px和em，其他的都不常用。》
3. font-style 字体风格 例： font-style:italic;
- font-style的属性值：
normal 标准的字体样式《默认字体样式》
italic 斜体字体样式
oblique 倾斜字体样式
4. font-weight 字体粗细 例： font-weight:bold;
- font-weight的属性：
normal 默认值，定义标准的字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
100,200,300,400,500,600,700,800,900 定义由细到粗的字体，400等于normal，700等同于bold。
5. font 设置所有字体属性
- 使用font属性可以一次性设置字体的所有属性，几种字体属性的顺序：
顺序： 字体风格 -> 字体粗细 -> 字体大小 -> 字体类型
font-style font-weight font-size font-family
例： font:italic bold 12px "隶书";
css排版网页文本：
排版文本样式有：
1.文本颜色：color：#00c;
2.水平对齐方式：text-align：right;
text-align属性值：
left 文本排列到左边. 默认值
right 文本排列到右边
center 文本排列到中间
justify 实现两端对齐文本效果
3.首行文本的缩进：text-indent：2em;
《2em表示文本开头缩进两个字符》
文本的行高：line-height：25px;《标签中字体的大小*1.5=就是行高的大小<用像素表示>》
4.文本的装饰：text-decoration：underline;
text-decoration的属性： 《用于设置超链接的文本装饰》
none 默认值，定义的标准文本
underline 文本的下划线
overline 文本的上划线
line-through 文本的删除线
blink 文本闪烁，此值只在Firefox浏览器中有效，在IE中无效。
5.垂直对齐方式： 《设置图片和文本居中对齐》
vertical-align：
值：
top、middle、bottom。
css设置超链接
1.为元素选择器：
-- css里面提供了一些定义好的样式，可以拿过来使用
语法：标签名：伪类名{声明：}例子如下：
* 比如 超链接
超链接的状态：
原始状态 点击后 鼠标放上去状态 点击
:link :visited :hover :active
例：用《background-color:表示背景颜色》来做例子
<head>
<style type="text/css">
// 原始状态
a:link{
background-color:green; 。
}
// 点击后
a:visited{
background-color:yellow;
}
// 鼠标放上去状态
a:hover{
background-color:blue;
}
// 点击
a:active{
background-color:red;
}
</style>
</head>
<body>
<a href="www.helloword.com"></a>
</body>
通常只设置两种样式：1.超链接a标签样式。2.鼠标悬浮在超链接上的样式。
<style type="text/css">
a{text-decoration:none;color:#330099;}//去除超链接的下划线
a:hover{text-decoration:underline;color:yellow;}//鼠标悬浮在超链接上时出现下划线及改变颜色
</style>
<body>
<a href="6.jpg" target="_blank">
<img src="6.jpg" alt="不能显示" title="图片"></a>
</a>
</body>
css设置鼠标形状：
通过cursor设置鼠标各式各样的指针样式，cursor属性可以在任何选择器中使用。
语法：<p style="cursor:pointer">非超链接的文本</p>
cursor的属性：
default: 默认光标
pointer: 超链接的指针《手指型》
wait: 指示程序正在忙
help: 指示可用的帮助
text： 指示文本
crosshair 鼠标呈现十字状
css背景样式：
认识<div>标签：《成对出现》
语法：<div id="divId">内容</div>
css背景属性：
背景属性包括两种：1.背景颜色（background-color）默认值：transparent。
语法：background-color:颜色；
2.背景图像（background-image）
-- 背景图像；
语法：background-image:url(图片路径)；
有一个特殊的值：none。 表示不显示背景图片。很少用。
-- 背景重复方式：（background-repeat）
属性：
repeat： 水平和垂直两个方向平铺
no-repeat： 背景图像只显示一次《用于小图标的显示和只显示一次的图像。》
repeat-x： 只水平方向平铺《通常用于导航背景和标题背景》
repeat-y： 只垂直方向平铺
-- 背景定位：（background-position）
简写：{background:url(路径) no-repeat right;}
列表样式：
4个属性来设置列表的样式：list-style-type、list-style-image、list-style-position、list-style。
1.list-style-type：的属性：
none： 无标记符号 例：list-style-type：none；
disc： 实心圆，默认值。例：list-style-type:disc;
circle：空心圆 例：list-style-type:circle;
square：实心正方形 例：list-style-type:square;
decimal：数字 例：list-style-type:decimal;
3.list-style-position:的属性：
-- inside：表示项 目标记放置在文本以内，且环绕文本根据标记对齐。
-- outside：默认值，保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。
4.list-style:
简写：list-style:circle outside url(路径);没有图像就默认值。
-- 设置背景为矩形圆：
.a{width:100px; height:100px; border-radius: 10px 10px 10px 10px; background:url(a.jpg);}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
