Web前端开发 MOOC 01

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

css样式

p{
  font-size: 12px;
  /* 字号 */
  color: blue;
  /* 文字颜色 */
  font-weight: bold;
  /* 加粗 */
}

css添加方法

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

行内

1
2
3

<p style = "color:red">
     balabala
</p>

内嵌

<head>
    <style type="text/css">
        p{
  /* 选择器 */
            color: red;
        }
    </style>
</head>

文件

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

css选择器

标签选择器

<style type="text/css">
  body{
    background-color: #ccc;
    text-align: center;
    font-size: 12px;
    font: "黑体";
    color: red;
  }
  /* 主体 */
  hr{
    width: 200px;
  }
  /* 分割线 */
</style>

类别选择器

<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选择器

<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">

嵌套声明

<style type="text/css">
  p span{
    color: red;
  }
</style>

1	<p><span>bala</span></p>

集体声明

<style type="text/css">
  h1,p{
    text-align:center;
  }
</style>

1 2	<h1>bala</h1> <p>bala</p>

全局声明

<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 就一个

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	列表项标号在文字外

css表格

设置表格的宽和高

table{
  width: 500px;
  /* 表格宽 */
  height: 200px;
  /* 表格高 */
}

设置表格的框

table,td,th{
  border: 1px solid #eee
}
/* table:外框  td:单个小框  th:表头 */

表格框合并

table{
  border-collapse:collapse;
/* 将框与框合并，（要不然就有两个框了） */
}

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

 /* 将奇数行都变成#EAF2D3颜色，表头也算一行 */
tr:nth-child(odd){
  background: #EAF2D3
}