<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
问题 ： 1 标题标标签中的文字不能直接使用父元素中的文字大小 ？？？？ 发现可以
2 标签集成问题
-->
<style type="text/css">
/**
*
* html标签分类：块级元素 行内元素 行内块元素
*
* html元素之间的模式转换 ：块级元素 行内元素 行内块元素
*
* css特性：
* 1 层叠行： 当同一个标签（权重一样）的样式发生冲突的时候，最后定义的样式会将前面定义的样式覆盖掉（层叠性）。与样式定义的顺序有关，和样式调用的顺序无关
* 2 继承性：标签之间的关系属于嵌套关系 可以被继承的属性：有关文字的相关属性都可以被集成 如 颜色 大小 行高 字体
* 注意：1 a标签不能直接使用父元素中的文字颜色。
* 2 标题标签不能直接使用父元素中的文字大小。
*
* 伪类 ：用来向选择器定义样式或添加特定的效果.常用的伪类还有focus nth-child等
* 1 a:link {属性: 值;} 设置a标签默认样式
* 2 a:visited {属性: 值;} 链接访问过后的样式
* 3 a:hover {属性: 值;} 鼠标移动到超链接上的样式
* 4 a:active {属性: 值;} 链接激活状态下的样式
* 5 a:focus{属性: 值;} 获取光标焦点的样式
* 注意:link :visited :hover :active（L oVe H A te顺序）爱 与 恨
*
* 背景img/img4
*/
/**
* 块级元素
* 代表： div，h1,p,ul ,li...
* 特点：
* 1 元素自己独占一行显示（块级元素有默认宽度）
* 2 可以设置宽度和高度
* 3 当两个块级元素发生嵌套关系的时候，子元素如果没有设置宽度，那么该子元素的宽度与父元素的宽度一致。
* /
/**
* 行内元素
* 代表： span，a , strong, b ,i,s,font...
* 特点：
* 1 所有元素都在一行上显示
* 2 行内元素不能直接设置宽度和高度
* /
/**
* 行内块元素
* 代表： <img> ,input....
* 特点：
* 1 所有元素都在一行上显示
* 2 可以设置宽度和高度。
*/
#jicheng{
font-size:12px;
width:100px;
height:40px;
line-height:40px;
background-color: #98FB98;
}
#aa{
color: red;
background-color: #98FB98;
/*display: inline-block;*/ /* 转化为 行*/
display: inline; /* 转化为 行*/
display: block; /* 转化为 块*/
}
.one{
color: red;
font-size: 20px;
}
.two{
color:green;
font-size: 60px;
}
a:link { /* 设置a标签默认样式*/
color:red;
text-decoration: none; /*去掉下划线*/
}
a:visited{ /* 链接访问过后的样式 */
color:darkgoldenrod;
}
a:hover{ /* 鼠标移动到超链接上的样式 */
color: #008000;
text-decoration: underline;
}
a:active{ /* 链接激活状态下的样式 */
color:aquamarine;
}
.beijingtupian{
width: 400px;
height: 400px;
background-color: green;
background-image: url("../img/55e02a1e50729.jpg");
background-repeat: no-repeat;
/* 设置背景img/img4平铺方式
* repeat: 默认平铺
* no-repeat: 不平铺
* repeat-x: 横向平铺
* repeat-y： 纵向平铺
*/
background-position: 20px 40px;
/* 设置背景img/img4的位置 （水平 垂直）
* 如果设置的位置是方位名词，顺序可以调换
* 如果只设置一个方位名词，另一个默认值为center
* 如果设置的是具体数字，那么第一个代表水平方向。第二个代表垂直方向
* 如果设置的位置中有一个是具体数字，那么第一个值代表水平方向，第二个代表垂直方向。
* 20px 40px,left 20px,left top,
*/
background-attachment: scroll;
/* 设置背景img/img4固定方式
* Scroll 滑动;
* Fixed: 固定;
*/
}
.lianxie{
width:400px;
height:400px;
background: red url("../img/55e02a1e50729.jpg") no-repeat 10px 10px fixed;
}
ul{
list-style: none; /* 去除列表前面的图标*/
}
ol{
list-style: none; /* 去除列表前面的图标*/
}
#aabb{
height: 100px;
width: 100px;
background-color: red;
display: inline;
}
#aabbb{
height: 100px;
width: 100px;
background-color: red;
display: inline;
}
#a{
color: red;
font-size: 10px;
font-family: 楷体;
line-height: 50px;
}
#b{
}
</style>
</head>
<body>
<div id="a">
啊实打实大111111
<a id="b" href="#">asdasds</a>
<h1>啊实打实大</h1>
</div>
<br /><br /><br /><br />
<span id="aa">啊实打实大</span>
<span id="aa">啊实打实大</span>
<p id="jicheng">啊实打实大</p>
<p class="two">
<h1>子类标题标签</h1>
<a>啊</a>
<p>阿萨德</p>
</p>
<a href="#">我要来设置伪类了！！！</a><br /><br /><br /><br />
<div class="beijingtupian">啊实打实大</div><br /><br /><br /><br />
<div class="lianxie">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<ul >
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ul>
<ol >
<li>asdasd</li>
<li>asdasd</li>
<li>asdasd</li>
</ol>
<div id="aabb">
asdasd
</div>
<div id="aabbb">
asdasd
</div>
</body>
</html>
04-24
486
486
11-11
1万+
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
