边框和背景属性
- 边框内容简要
问题 | 解决方案 |
---|---|
为元素边框添加属性 | 使用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->类->标签|伪类|属性选择->伪对象->继承->通配符->继承