一、文本属性：
<style>
div {
text-decoration:underline;(添加下划线）
}
ins {
text-decoration: none;
}
a {
text-decoration: none;
}
p {
/* em 首行缩进单位，如果文本本身的字体大小是16px 则一个em就相当于16px。 */
text-indent: 2em;
}
p {
/* 行高=文本高度+上间距+下间距。调节行高实际上就是调节上间距和下间距，不会改变文字本身的高度 */
line-height: 29px;
}
</style>
<!-- 下划线 -->
<ins>我是下滑线</ins>
<a href="#">我也有下滑线</a>
<!-- 首行缩进 -->
<p>人之初，性本善。<br>
知错能改，善莫大焉，知乎这也<br>
师者，传道授业解惑也
</p>
二、CSS引入方式：
1.行内样式 简单、权重较高，工作中不常用。
2.内部样式表 结构与样式不完全分离，练习时常用。
3.外部样式表，结构与样式完全分离，工作中最常用。
<title>css引入方式</title>
<style>
div {
background-color: green;
}
</style>
</head>
<body>
<div>经常使用的样式</div>
<div>经常使用的样式</div>
<div>经常使用的样式</div>
<div>经常使用的样式</div>
<!-- 行内样式的权重要大于内部样式表 -->
<div style="background-color: black;">经常使用的样式</div>
<div>经常使用的样式</div>
<div>经常使用的样式</div>
<div>经常使用的样式</div>
</body>
三、ctrl+0 复原浏览器的大小。
四、快速生成标签：
<!-- span.nav 快速生成一个给span命类名的标签 -->
<span class="nav"></span>
<!-- div$*5 通过这种方式生成带有1-5序号的div -->
<div1></div1>
<div2></div2>
<div3></div3>
<div4></div4>
<div5></div5>
<!-- div{我是一个男人} 这样写可以给div 里面添加文字内容 -->
<div>我是一个男人</div>
<!-- .demo{$}*5 -->
<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>
<div class="demo">4</div>
<div class="demo">5</div>
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
五、复合选择器之（后代）子代选择器：
1.后代选择器：
<style>
ul li a {
/* 后代选择器 */
color: red;
}
</style>
<body>
<ul>
<li><a href="#">青春</a></li>
<li><a href="#">荷尔蒙</a></li>
<li></li>
<li></li>
</ul>
</body>
2.子代选择器:
/* 将大肘子选出来变为红色 */
.hot>a {
/* 注意：此处.hot 里面有三个小a 我只要大肘子这一个a 因此用子代选择器 */
color: red;
}
<div class="hot">
<a href="#">大肘子</a>
<ul>
<li><a href="#">猪头</a></li>
<li><a href="#">猪尾巴</a></li>
</ul>
</div>
注：a 标签不会继承父级的任何属性。
3.并集选择器：
/* 将熊大，熊二，以及小猪佩奇一家改为红色 */
div,
p,
.pig {
color:red;
}
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<u class="pig">
<li>小猪佩奇</li>
<li>猪爸爸</li>
<li>猪妈妈</li>
</u>
4.交集选择器：
/* 既选择li 又选择id="myid" */
ul li#myid {
color: red;
}
<ul>
<li>1</li>
<li id="myid">2</li>
<li>3</li>
</ul>
六、链接伪类选择器
1.普通元素也可以具有hover和active的属性。
2.为了确保生效，请按照LVHA的循环顺序声明：link visited hover active .
3.
<style>
a:link {
/* 鼠标未点击时，a链接的颜色为红色 */
color: red;
}
a:visited {
/* 鼠标点击之后，a 链接的颜色为蓝色 */
color: blue;
}
a:hover {
/* 鼠标经过a链接时，链接的颜色变为黑色 */
color: black;
}
a:active {
/* 鼠标点击住a 链接时，并未松开的时候，a链接的颜色为绿色 */
color: green;
}
</style>
<body>
<!-- 三个链接的地址都为同一个#，因此只要点击了三个其中的一个，三个就都会默认被点完了，将链接地址更换一下就可以去除这个效果 -->
<a href="#">百度</a>
<a href="#">新浪</a>
<a href="#">搜狐</a>
</body>
focus伪类选择器：
注：outline:none;可以将input的黑色默认边框给去掉.
<style>
input:focus {
/* 把获得光标的input表单元素选出来将其背景颜色变成pink色，里面的文字颜色变为红色； */
background-color: pink;
color:red;
}
</style>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
七、元素的显示模式：
1.块级元素：（div p h ul li ol dl ）
特点：
a 独占一行；
b 可以设置宽度和高度，以及内外边距。
c 宽度默认是容器（父级宽度）的100%。
d 是一个容器及盒子，里面可以放任何行内或者块级元素。
2.行内(内联）元素：
特点：
a 相邻行内元素在一行上，一行可以显示多个。
b 高度和宽度直接设置是无效的。
c 默认宽度就是它本身内容的宽度。
d 行内元素只能容纳文本或其他行内元素。
注意：
a 链接里面不能在放链接；
b 特殊情况链接 a 可以放块级元素，但是给a 转换一下块级元素最安全。
3.行内块元素：(img input td ）
特点:
a 和相邻的元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个。
b 默认宽度就是它本身内容的宽度（行内元素的特点）
c 高度，行高，外边距以及内边距都可控制（块级元素的特点）。
d img 之间会有间隙
<style>
body {
/* 通过设置font-size:0 将图片之间的缝隙清楚 */
font-size: 0;
}
</style>
<body>
<!-- 行内元素之间会存在一点空隙 -->
<img src="account.png" alt="">
<img src="account.png" alt="">
<img src="account.png" alt="">
<img src="account.png" alt="">
</body>
