0%

Web前端开发 MOOC 01

更新至第三章 css样式 【完】

css样式

1
2
3
4
5
6
7
8
p{
font-size: 12px;
/* 字号 */
color: blue;
/* 文字颜色 */
font-weight: bold;
/* 加粗 */
}

css添加方法

优先级:行内>内嵌>链接>浏览器默认

行内

1
2
3
<p style = "color:red">
balabala
</p>

内嵌

1
2
3
4
5
6
7
8
<head>
<style type="text/css">
p{
/* 选择器 */
color: red;
}
</style>
</head>

文件

1
2
3
4
<head>
<link rel="stylesheet" href="css/style.css" />
<!-- 链接到 样式表型的文件 路径为css/style.css -->
</head>

css选择器

标签选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
body{
background-color: #ccc;
text-align: center;
font-size: 12px;
font: "黑体";
color: red;
}
/* 主体 */
hr{
width: 200px;
}
/* 分割线 */
</style>

类别选择器

1
2
3
4
5
<style type="text/css">
p{font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px}
</style>
1
2
3
<p> bala </p>
<p class="one">bala</p>
<p class="two">bala</p>

ID选择器

1
2
3
4
<style type="text/css">
#one{font-size:12px;}
#two{font-size:24px;}
</style>
1
2
<p id="one">bala</p>
<p id="two">bala</p>

ID选择器与类别选择器的区别: * 类别选择器可以多次引用、混用。混用以空格分开 * ID选择器在当前页面是“唯一的引用一次”,可以与class混用,但是不可以多个同时使用

1
<div id="id1" class="class1 class2">

嵌套声明

1
2
3
4
5
<style type="text/css">
p span{
color: red;
}
</style>
1
<p><span>bala</span></p>

集体声明

1
2
3
4
5
<style type="text/css">
h1,p{
text-align:center;
}
</style>
1
2
<h1>bala</h1>
<p>bala</p>

全局声明

1
2
3
4
5
<style type="text/css">
* {
text-align:center;
}
</style>

css的文字样式

单位与颜色

单位 描述
px 像素
em 字符
% 百分比

层次:
html —> head/body —> div —> h1/p

颜色 描述
red 颜色名
rgb(255,0,0) RGB值 0,0,0为黑
rgb(100%,0%,0%) RGB百分比值
rgba(255,0,0,1.0) RGB值和透明度 0透明,1完全不透明
#ff0000 十六进制数 去掉重复位#f00

文本

属性 描述 取值
color 文本颜色 red #f00 rgb(255,0,0)
letter-spacing 字符间距 2px -3px
line-height 行高 14px 1.5em 120%
text-align 对齐 center left right justify
text-decoration 装饰线 none overline underline line-though
text-incent 首行缩进 2em

当line-height==height时,文字垂直居中

属性 描述 举例
font 所有字体属性一块设置 font:italic bond 18px/1.5em '幼圆'
font-family 字体系列 第一个没有就加载第二个...
font-size 字号 14px 120%
font-style 斜体 italic
font-weight 粗体 bold
1
2
font:italic bond 18px/1.5em '幼圆';
// 斜体 粗体 字号/行高 字体

css的背景与超链接

背景属性 举例
background background: #00FF00 url(bgimage.gif) no-repeat fixed top;
background-color
background-image background-image: url("../../media/examples/lizard.png");
background-repeat repeat 棋盘状填充
repeat-x/y 横/纵向填充一排/列
no-repeat 就一个
1
2
3
4
5
div{
height:30px;
width:600px;
background: url("images/bg1.gif") repeat-x;
}
链接 状态
a 所有链接
a:link 普通、未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接上方悬停
a:active 链接被点击的时刻

: 伪类选择器

顺序:
a:link/visited -> a:hover -> a:active

列表与表格

css列表

列表属性 描述
list-style 所有列表属性
list-style-image 为列表项标志设置图像
list-style-position 标志的位置
list-style-type 标志的类型
list-style-type的取值 样式
none
disc 默认,空心圆
circle 空心圆
square 实心方块
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
lower-Greek 小写希腊字母
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母
list-style-positionq取值
inside 列表项标号在文字里
outside 列表项标号在文字外
3mpaqA.jpg

css表格

设置表格的宽和高

1
2
3
4
5
6
table{
width: 500px;
/* 表格宽 */
height: 200px;
/* 表格高 */
}
设置表格的框
1
2
3
4
table,td,th{
border: 1px solid #eee
}
/* table:外框 td:单个小框 th:表头 */
表格框合并
1
2
3
4
table{
border-collapse:collapse;
/* 将框与框合并,(要不然就有两个框了) */
}

奇偶选择器 tr:nth-child(odd):奇数 tr:nth-child(even):偶数

1
2
3
4
 /* 将奇数行都变成#EAF2D3颜色,表头也算一行 */
tr:nth-child(odd){
background: #EAF2D3
}
看到这里的姐妹一看就要暴富暴美,为什么不让这一天提前一点呢ヾ(≧▽≦*)o