1. CSS基础教程

1.1 CSS注释

CSS中只有这一种注释方式

/*这是一行注释*/

1.2 CSS选择器

// id选择器 #
#id{attr: value}

// class选择器
.classname{attr: value}

//标签选择器
标签{attr: value}

1.3 CSS创建

在html中插入css方式有三种:

外部样式表: css文件在html外面,是单独的文件.
内部样式表: css卸载html的head里面, 以style包括.
内联样式表: 卸载html标签里面如: This is a paragraph.

多重样式:
如果某些属性在不同的样式表中被同样的选择器定义, 那么属性值将从更具体的样式表中继承过来. 例如, 外层div设置颜色red, 内部div设置颜色green, 那么内部div颜色会被设置成green.

多重样式将层叠为一个:
html允许使用三种不同方式定义样式表, 当html元素样式被不止一次定义时候, 所有的样式都会层叠于一个新的虚拟样式表中, 层叠的规则如下.

浏览器缺省设置.
外部样式表
内部样式表( 在HTML的head内部 )
内联样式表( 在HTML元素内部 )

如上表, 4代表最高的优先级

1.4 CSS Background(背景)

background属性用于定义背景效果.
background属性包括:

background-color: 默认是透明的transparent, 可选value: 合法color值, transparent, inherit(继承) .
background-image: value值: url('URL'), none, inherit .
background-repeat: value值: repeat, repeat-x, repeat-y, no-repeat, inderit . 默认repeat .
background-attachment: 设置背景图像是否固定或者随着页面的其余部分滚动. value: scroll, fixed, inherit .
background-position : 设置背景图像的起始位置。
background : 语法: background: color position size repeat origin clip attachment image; 缺少是被允许的.

.set-bg{
    background-color: red;
    background-image: url('https://www.baidu.com/img/baidu_jgylogo3.gif');
    background-repeat: no-repeat; /*默认是repeat, 可选值有: repeat, repeat-x, repeat-y, no-repeat*/
    background-attachment: scroll;

    background: green url('https://www.baidu.com/img/baidu_jgylogo3.gif') fixed;
}

// 用法如上测试代码所示, 当设置了background属性时候, 关于background的其它属性设置将会失效.

1.5 CSS Text (背景)

.div-item p{
    text-align: center; /*文字对齐方式*/
    color: red; /*文字颜色*/
    line-height: 30px; /*行高*/
    text-indent: 40px; /*缩进元素中文本的首行, value是缩进的距离*/
    letter-spacing: 9px; /*字符间距*/
    text-shadow: 5px 2px 2px black; /*前两个表示在x,y轴的偏移量, 第三个模糊,第四个阴影颜色*/
    text-decoration: underline; /*none:默认的, underline下划线, overline上划线, line-through删除线*/
    text-transform: uppercase; /*capitalize:每个单词大写字母开头, uppercase:仅有大写字母, lowercase: 仅有小写字母*/
    white-space: nowrap;/*元素空白处理方式: pre:空白被浏览器保留, nowrap:不换行 知道遇到br, 
    pre-wrap:保留空白符, 正常换行, pre-line: 合并空白符 保留换行符.*/
}

1.6 CSS link(链接)

a:link {
    background-color:#B2FF99;
    text-decoration: none;
}
a:visited {
    background-color:#FFFF85;
}
a:hover {
    background-color:#FF704D;
}
a:active {
    background-color:#FF704D;
}
/*
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
*/

1.7 CSS Fonts (字体)

.div-item{
    font-weight: bold; /*加粗*/
    font-size: 18px; 
    font-family: "Times New Roman", Times, serif; 
    font-style: italic;

}
/* 
font-style
p.normal {font-style:normal;}  正常的
p.italic {font-style:italic;}  倾斜的
p.oblique {font-style:oblique;}  

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
*/

无标题文章