CSS :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<style>
p {
color:rebeccapurple;
font-size:10px;
}
a {
text-decoration:name;
这样的渲染方式 放在 css 中 的 一个单独的文件包中
}
</style>-->
<!--在html 中引入 css 的方式： 引入 必须放在head 里面
链接式 -->
<!--如果不用 css 另放文件夹 直接在 HTML 中就可以直接用 style 但是必须 是在 head 里面用-->
<!--<link href="../css/new_file.css" rel="stylesheet">-->
导入式：
<style>
@import "../css/new_file.css"
</style>
<!--*代表 所有的body 里面的标签全部选择-->
<!--<style>
*{
color: red;
}
</style>
-->
<style>
/*以id 来设定 样式*/
/*#littleP{
background-color: white
}
.nihaopengliang{
color: yellow;
}*/
/*用渲染样式 两个限制 必须连在一起 比如 div.y <div class="yu">*/
/*div.yu{
color: gold;
} */
.div1 div p{
color: gold;
}
/*属性选择器*/
[alex]{
color: red;
}
[alex="大 sb"]{
background: gold;
font-size: 20px;
font-family: "微软雅黑";
/*设置大小时候 需要 在数字后面加入 px*/
}
/*对于属性的查找 如果不是 div 中的 需要 在前面 加上所在的标签 如果是属性有两个值 或者多个值 用波浪号 找下一个值*/
p[alex="bc"]{
color:blue;
background: red;
}
/*伪类的操作*/
a:link{
color: red;
}
a:visited{
color: blue;
}
a:hover{
color: green;
}
a:active{
color: yellowgreen;
}
.top,.bottom{
width: 100px;
height: 100px;
background-color: chartreuse;
}
.top:hover+.bottom{
background-color: red;
}
/*before 和 after 在所需要的文字前后 加入东西*/
.add:before{
font-size: 100px;
font-style: oblique;
font-weight: 200;
content:"欢迎加入前端学习" ;
color: red !important;
/*content 后面的内容 需要加引号 */
/*注意: 使用!important的css定义是拥有最高的优先级的*/
/*字体大小 font-size:
字体斜体font-style:
字体粗体font-weight: */
}
.imag{ border: 0.5px solid red;
width: 1500px;
height: 1500px;
background-image: url(../img/188F867EC27680E0D30B7B4B5578C043.jpg);
background-repeat:no-repeat;
background-position: center;
/*background-position: 后面接任意值 想放的位置 比如 center left ...*/
}
span{
display: :inlien-block;
/*display 可以调内联和块级 标签*/
width:18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
/*图标的管理 可在 浏览器中运行试验 用position 的数字来控制 想要的 图标*/
background-position: 0 -100px;
}
.sb{
height:500px;
background-color: aquamarine;
text-align: center;
line-height: 200px;
/*当在背景框中溢出 会出现下一行*/
}
/*latter-spacing
设置 h1 和 h2 元素的字母间距：
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
text-indent 首行缩进 word-spacing 单词缩进
text-transform: capitalize 所有的单词首字母大写
*/
/*边框属性
border-style: solid;
border-color: chartreuse;
border-width: 20px;
border-left-color 控制左边的一条边框 的颜色的变化
简写：border: 30px rebeccapurple solid;*/
ul,ol,dl{
list-style: circle;
/* 去样式 ： list-style: none;*/
}
.shiyan{
width: 200px;
height: 200px;
background-color: lightblue;
border: 40px solid red;
padding: 40px;
margin:40px;
margin-bottom: 20px;
}
/*这是设置内边距 (中心控制文本区域):width: 200px;
height: 200px;
设置内边距 :padding;
margin 设置的是与页面旁边的边距；
border 设置外边距*/
/*margin 设置四个：10px （上）10px(右)10px(下)10px(左)
* margin 设置三个：10px （上）10px(左右同时)10px(下)
如果是设置两个 就是上下左右
* * 在一句话中显示 :用于控制元素与元素之间的距离 ,margin 的最基本用途就是控制元素周围空间的距离
从视觉的角度上达到 相互隔开的目的*/
/*padding: 用于控制内容与边框之间的距离；
Border(边框) 围绕在内边距和内容外的边框。
Content(内容) 盒子的内容，显示文本和图像。
*/
/*margin collapse（边界塌陷或者说边界重叠）
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。
设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。
1兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
2父子div
if 父级div中没有 border，padding，inline content，子级div的margin会一直向上找
直到找到某个标签包括border，padding，inline content 中的其中一个，然后按此div 进行margin ；*/
</style>
</head>
<body>
<!--两种方式：
链接式 引入文件没有限制 属于 HTML的范畴
导入式 引入文件有限制 并且 是属于 css 的范畴-->
<a href="http://www.cnblogs.com/yuanchenqi/articles/5977825.html">hello world</a>
<p>hello 彭亮 </p>
<div class="sb">
<p> 我的 </p>
介绍文本属性 </div>
<p id="littleP"> ppppp</p>
<div class="div1">
<!--组合器的选择 是必须 可以是大于号 可以是 加 号 是div 中 有class 属性 属性值 是寻找的最基本的-->
<!--注意 组合器的选择 用点加属性 和不用点的是直接 父类后者子类的东西调用-->
<div>
<p>after all</p>
<div> pengliangliang</div>
</div>
</div1>
<p class="nihaopengliang"></p>
<div class="yu">韦斯羽 傻</div>
<span></span>
<!--属性选择器：-->
<div alex="sb sx">alex</div>
<div alex="大 sb">da sb alex</div>
<p alex="bc">hello alex</p>
<div class="box">
<div class="top"></div>
<div class="bottom"></div>
</div>
<div class="add">hello yuan</div>
<div class="imag"></div>
<ol>
<li>11</li>
<li>22</li>
<li>33</li>
</ol>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<dl>
<dt>自定义的列表</dt>
<dl>1111</dl>
<dl>2222</dl>
<dl>3333</dl>
</dl>
<div class="shiyan">
文本框 以及边框的大小
</div>
</body>
</html>
<!--注意 嵌套规则 ：
1. 块级元素可以包含 内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其他内联元素
2. 有几个特殊的块级元素只能包含内联元素，但不鞥包含块级元素。如 h1 h2 h3 p dt
3. li 内 可包含 div
4. 块级元素 与块级元素并列、内联元素与内联元素并列
-->
<!-- 注意： 如果 给 body 设置属性 影响的是body 的整个整体 -->
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
