边框和背景属性
- 边框内容简要
| 问题 | 解决方案 |
|---|---|
| 为元素边框添加属性 | 使用border-width、border-style、border-color属性 |
| 为元素盒子的某一条边应用属性 | 使用border-top-width、border-top-style、border-bottom-color等 |
| 创建边框圆角 | border-radius简写属性或某条边的属性等 |
| 定义背景 | background-color、background-image等 |
| 定义背景图像位置 | background-position属性 |
| 定义背景图充满容器模式 | background-size属性 |
| 定义盒子阴影 | box-shadow属性，注意如果使用多层属性值，可以实现多层次阴影效果 |
- 基本边框样式border-style
| 值 | 效果 |
|---|---|
| none | 没有效果 |
| solid | 实线边框 |
| dashed | 破折线式边框 |
| dotted | 圆点线式边框 |
| double | 双边框 |
| groove | 槽线式边框 |
| inset | 使元素内容具有内嵌效果 |
| outset | 使元素内容具有外凸效果 |
| ridge | 嵴线边框 |
看对单条边的边框样式引用
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
border-width: 5px;
border-style: solid;
border-color: black;
border-left-width: 10px;
border-left-style: dotted;
border-top-width: 10px;
border-top-style: dotted;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
- 边框圆角处理 border-radius
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
border: medium solid black;
border-top: solid 10px;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit - there are over 500 varieties
of banana alone. By the time we add the countless types of apples, oranges,
and other well-known fruit, we are faced with thousands of choices.
</p>
</body>
</html>
- 如果用图像左边框呢？
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style type="text/css">
p {
width: 167px;
line-height: 67px;
-webkit-border-image: url(bordergrid.png) 30 / 50px;
-moz-border-image: url(bordergrid.png) 30 / 50px;
-o-border-image: url(bordergrid.png) 30 / 50px;
}
</style>
</head>
<body>
<p>
There are lots of different kinds of fruit
</p>
</body>
</html>
- 然后便是背景的应用啦！！！
要说到背景的应用，我想最多应该是用于雪碧图的单个图像的定位和div引用图片背景，div继续添加各种内容进行协同显示吧！尤其轮播图、商品展示等应用非常多！
比如说这张图：如何准确显示需要显示的部分呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.showlogo{
width: 70px;
height: 70px;
background: url("triathlon.png") no-repeat;
background-position: -70px 0px;
}
</style>
</head>
<body>
<div class="showlogo"></div>
<p>骑车俱乐部</p>
</body>
</html>
接下来是列表
- HTML列表标签
| 标签 | 说明 |
|---|---|
| ol | 定义有序列表 |
| ul | 定义无序列表 |
| li | 定义列表项目 |
| dl | 定义自定义列表 |
| dt | 定义列表项目 |
| dd | 定义列表描述 |
- 有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各种有序列表</title>
</head>
<style>
ol,h4{
float: left;
}
</style>
<body>
<h4>编号列表：</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>大写字母列表：</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>罗马数字列表：</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
<h4>小写罗马数字列表：</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
</body>
</html>
- 无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各种无序列表</title>
<style>
ul,h4{
float: left;
}
</style>
</head>
<body>
<p>
<b>注意：</b> 在 HTML 4中 ul 属性已废弃，HTML5 已不支持该属性，因此我们使用 CSS 代替来定义不同类型的无序列表如下：</p>
<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>圆圈列表：</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
<h4>正方形列表：</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
- 自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义列表</title>
</head>
<body>
<h4>一个自定义列表：</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
- 对于这些列表来说有两点是必须要注意的
1.列表的type控制，对于有序列表，type属性是任然支持的，包含：“1”、“A”、“a”、“I”、“i”，但在 HTML 4.01 中，无序列表”compact” 和 “type” 属性 已废弃。HTML5 则不支持着两个属性，当然你也可以了解它以前包含什么，“disc”、“ square”、“circle”。
2.列表很多样式都是有默认值的，尤其自定义列表的dt和dd副标签最为明显，这时候要想不受浏览器自带的样式所影响，就要去看我上一次的笔记里的样式初始化了，对于列表自然是type和margin最为重要了，自己设置也是非常方便你的！
复杂选择器
| 选择器 | 说明 |
|---|---|
| [attr] | 选取定义了attr属性，属性值任意的元素 |
| [attr=”val”] | 选取定义了attr属性，属性值为val的元素 |
| [attr^=”val”] | 选取定义了attr属性，属性值为以val字符串开头的元素 |
| [attr$=”val”] | 选取定义了attr属性，属性值为以val字符串结尾的元素 |
| [attr*=”val”] | 选取定义了attr属性，属性值为包含val字符串的元素 |
| [attr~=”val”] | 选取定义了attr属性，属性值包含多个，其中一个为val的元素 |
| [attr|=”val”] | 选取定义了attr属性，属性值为以连字符串分割的一串值，而第一个为val的元素 |
| <选择器>,<选择器> | 选取同时匹配所有选择器的元素 |
| <选择器> <选择器> | 目标为匹配第一个选择器的后代，然后匹配第二个选择器 |
| <选择器> > <选择器> | 目标为匹配第一个选择器的直接后代，然后匹配第二个选择器 |
| <选择器> + <选择器> | 目标为匹配第一个选择器的直接后代，然后匹配第二个选择器 |
| ::first-line | 选取块级元素首行 |
| ::first-letter | 选取块级元素首字母 |
| ::before/::after | 选取元素之前或之后插入内容 |
| :nth-child(n) | 选取父元素的第n个子元素(这里的n可以用公式代替，如：2n-1) |
| :nth-last-child(n) | 选取父元素的倒数第n个子元素 |
选择器权重关系
- 重要原则
原则一： 继承不如指定
原则二： #id > .class > 标签选择符
原则三：越具体越强大
原则四：标签#id >#id ; 标签.class > .class
CSS优先级权重计算法
- CSS优先级包含四个级别（标签内选择符，ID选择符，Class选择符，元素选择符）以及各级别出现的次数!
根据这四个级别出现的次数计算得到CSS的优先级。
CSS优先级的计算规则如下：
- 元素标签中定义的样式（Style属性）,加1,0,0,0
- 每个ID选择符(如 #id),加0,1,0,0
- 每个Class选择符(如 .class)、每个属性选择符(如 [attribute=])、每个伪类(如 :hover)加0,0,1,0
- 每个元素选择符（如p）或伪元素选择符(如 :firstchild)等，加0,0,0,1
然后，将这四个数字分别累加，就得到每个CSS定义的优先级的值，
然后从左到右逐位比较大小，数字大的CSS样式的优先级就高。 - 例子：
css文件或 < style >样式表中如下定义：
1. h1 {color: red;}
/* 一个元素选择符，结果是0,0,0,1 */
2. body h1 {color: green;}
/* 两个元素选择符，结果是 0,0,0,2 */
3. h2.grape {color: purple;}
/* 一个元素选择符、一个Class选择符，结果是 0,0,1,1*/
4. li#answer {color: navy;}
/* 一个元素选择符，一个ID选择符，结果是0,1,0,1 */
元素的style属性中如下定义：
h1 {color: blue;}
/* 元素标签中定义，一个元素选择符，结果是1,0,0,1*/
如此以来，h1元素的颜色是蓝色。
- 注意：
1、!important声明的样式优先级最高，如果冲突再进行计算。
2、如果优先级相同，则选择最后出现的样式。
3、继承得到的样式的优先级最低。
- 结论是：
比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数
important->内联->ID->类->标签|伪类|属性选择->伪对象->继承->通配符->继承