css 层叠样式表（1.1 css基础选择， 1.2 css基本样式）
css 层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
- 1.1：css基础选择：
(派生选择器、id选择器、类选择器、属性选择器) - 1.2：css基本样式：
(背景、文本、链接、列表、表格、轮廓) - 1.3：css盒子模型：
(概述、内边距、边框、外边距、外边距合并、盒子模型应用) - 1.4：css定位：
(定位、浮动、浮动的应用) - 1.5：css选择器
- 1.6：css常用操作：
(对齐、分类、导航栏、图片) - 1.7：网页实例
1.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<link href="css选择器.css", rel="stylesheet">
</head>
<body>
<p><strong>加重文字。我不在li标签中</strong></p>
<strong>第二行，加重文字。我不在li标签中</strong>
<p>
<ul>
<li><strong>数学，我是li标签下的strong标签</strong></li>
<li>英语</li>
</ul>
</p>
<p id="aaa" name="aaa">id选择器</p>
<p class="chapter">第一章 class选择器</p>
<p class="chapter">第二章</p>
<p class="chapter">第三章</p>
<p name="bbb" title="提示文字">属性选择器</p>
<p>属性选择器</p>
</body>
</html>
/* css选择器.css 标签选择器 */
body{
background-color:aquamarine;
}
p, body, a{
/* 多个标签逗号分隔 */
}
/* 派生选择器 空格表示层级*/
p strong{
color:blueviolet;
font-size:50px;
}
ul li strong{
color:brown;
}
/* id 选择器*/
#aaa{
color:blue;
font-size:small;
}
/* 类选择器 */
.chapter{
color:chocolate;
}
/* 属性选择器 */
[title="提示文字"]{
color:darkblue;
}
代码效果如图：
派生选择器：主要表现层级，适应不太精确情况。经常与id、class选择器配合
id选择器：适合唯一准确的情况，个人测试比较方便
class类选择器：适合一组类似内容的标签。
属性选择器：多种选择器可以混合使用
1.2. css基本样式：
(背景、文本、链接、列表、表格、轮廓)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用语法：背景和文字</title>
<link href="css常用语法：背景和文字.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Python学习</p>
<p align="center">查看颜色</p>
<h1>标题查看颜色</h1>
<p>
第一行<br>
第二行<br>
第三行
</p>
<br>
</body>
</html>
|css允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果
| 属性 | 描述 |
|---|---|
| background-attachment (固定 fixed) | 背景图像是否固定或者随着页面的其余部分滚动 |
| background-color | 设置背景颜色 |
| background-image | 把图片设置为背景 |
| background-position | 设置背景图片的起始位置 |
| background-repeat | 设置背景图片是否可重复 |
| background-origin | 规定背景图片的地位区域 |
| background-clip | 规定背景的绘制区域 |
no-repeat 表示不能重复，repeat 可重复，repeat-x 表示x轴重复，repeat-y 表示y轴重复
body{
background-color:aquamarine;
background-image:url('萌.jpg');
background-repeat:no-repeat;
background-position:center;
/*background-attachment:fixed;*/
background-size:50%;
}
p{
font-family:"Microsoft YaHei", sans-serif;
color:aqua;
font-size:15px;
text-align:center;
tab-index:10px;
/* 字体重度 阴影 文本装饰*/
font-weight:bold;
text-shadow:5px 1px 6px #F93;
text-decoration:underline;
}
代码效果如图：
CSS 文本属性可定义文本的外观。 通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
| 属性 | 描述 |
|---|---|
| color | 文本颜色 |
| direction | 文本方向 |
| line-height | 行高 |
| letter-spacing | 字符间距 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 取消下划线 |
| text-indent | 缩进元素中文本的首行 |
| text-transform | 元素中的字母 |
| unicode-bidi | 设置文本方向 |
| white-space | 元素中空白的处理方式 |
| word-spacing | 字间距 |
在 CSS 的链接属性设置中，我们能设置 color, font-family, background 等等，不同的状态我们可以设置对应的样式。
– 链接的四种状态：
a:link --普通的、未被访问的链接
a:visited --用户已访问的链接
a:hover --鼠标指针位于链接的上方
a:active --链接被点击的时刻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css链接</title>
<link href="练习.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
我们来看下效果：
未被访问的颜色链接：
已被访问的链接颜色：
鼠标指针移动链接上的颜色：
正在被点击的链接颜色：
css列表类型：列表有无序，有序之分，无序列表又可以用不同的标记来区分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css列表</title>
<link href="练习.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="circle">
<!-- ul标签：unorder list 无序列表 -->
<li>小圆圈无序列表</li>
<li>小圆圈无序列表</li>
</ul>
<ul class="square">
<li>正方形列表</li>
<li>正方形列表</li>
</ul>
<!-- ol标签：order list 有序列表 -->
<ol class="upper-roman">
<li>I II III有序列表</li>
<li>I II III有序列表</li>
</ol>
<ol class="lower-alpha">
<li>ABC列表</li>
<li>ABC列表</li>
</ol>
</body>
</html>
在CSS文件中添加：
ul.circle{ list-style-type: circle}
ul.square{ list-style-type: square}
ol.upper-roman{list-style-type: upper-roman}
ol.lower-alpha{list-style-type: lower-alpha}
下面是我们的结果：
css表格：
我们主要了解以下属性：
border-collapse — 设置 是否把 表格边框合并为单一的边框
border-spacing — 设置 分隔单元格边框的距离
caption-side — 设置 表格标题的位置
empty-cells — 设置 是否 显示表格中的 空单元格
table-layout — 设置 显示单元、行、列的算法
<table id="tb">
<tr>
<th>name</th>
<th>age</th>
<th>number</th>
</tr>
<tr>
<td>li</td>
<td>3</td>
<td>6</td>
</tr>
<tr class="tr2">
<td>li</td>
<td>4</td>
<td>7</td>
</tr>
<tr>
<td>li</td>
<td>5</td>
<td>8</td>
</tr>
<tr class="tr2">
<td>li</td>
<td>6</td>
<td>9</td>
</tr>
</table>
这是无边框的效果，我们可以在css中加入边框并指定颜色(外边框和内边框)
#tb, tr, th, td{ border: 1px solid green;}
效果：
上面是默认属性，我们可以通过css来定制列表。
先使用border-collapse 让整个列表边框合并为单线，
再使用width，height来定制表格大小，
之后用background-color 加上背景颜色，text-align 设置字符对齐方式，padding 设置内边距；
添加到CSS的代码：
代码效果如图：
css轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。涉及到的属性有：
outline 在一个声明中设置所有的轮廓属性。
outline-color 轮廓的颜色
outline-style 轮廓样式
outline-width 轮廓宽度
在原来的html中加入两个p标签：
<p id="p1"> 轮廓1233</p>
<p id="p2"> 轮廓1233</p>
然后css中加入这几个属性的具体设置
#p1{
outline-color: green;
outline-style: groove;
outline-width: 10px;
}
#p2{
outline-color: blue;
outline-style: dotted;
outline-width: 5px;
}
代码效果如下：
