首页 > 代码库 > CSS 学习笔记
CSS 学习笔记
0、CSS概念
层叠样式表（Cascading Style Sheets）,CSS的来历就不必多说了。可以简单的理解为万维网联盟（w3c）为了丰富HTML页面的布局和外观而指定的一种标准。
1、CSS实例：
CSS规则主要由选择器和至少一条声明组成：
/*注释格式*/
p{
color:red;?text-align:center;
}
2、id 选择器和calss 选择器
/*id 是唯一的标签 id 为 idName 的那个标签会遵循以下样式*/
#idName
{
text-align:center;
color:red
}
/* class 是一类标签 ，样式表作用域下 页面中所有标签中类名为 className 的 都会遵循以下 样式*/
.className
{
text-align:center;
color:red
}
3、优先级：1，2，3，4 优先级依次升高
1、浏览器默认样式
2、外部样式
3、内部样式
4、内联样式
多重样式表会重叠为一个
外部样式表示例
<head>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/mystyle.css">
</head>
内部样式表示例：
<head>
<style>
hr
{
color:sienna;
}
p {
margin-left:20px;
}
body{
background-image:url("images/image.gif”);
}
</style>
</head>
内联样式表 示例：（在标签内写 style）
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
4、CSS背景：
background-color:
body {
/* CSS中 颜色的表示方法：
十六进制：”#ff0000”
RGB:”RGB(255,0,0)”
颜色名称：”red”
*/
background-color:#003344
}
background-image
body{
background-image:url(“xxx.jpg”);/* 默认图像只在水平和垂直方向平铺*/
}
background-repeat/*图像的重复方式*/
body{
background-image:url(“xxx.jpg”);
background-repeat:repeat-x;/* 图像只在水平方向平铺*/
}
background-attachment/*图像是否在页面上固定*/
body{
background-image:url(“xxx.jpg”);
background-attachment:fixed;/*固定背景图像位置*/
/*背景图像是否固定或者随着页面的其余部分滚动。默认 scroll 背景图片随页面的其余部分滚动。inherit 继承父元素
*/
}
background-position/*背景图像的位置*/
/*有9个位置可选，类似9宫格
left top center top right top
left center center center right center
left bottom center bottom right bottom
也可以使用百分百 x%，y%是默认值 左上角 0%0%（前一个数字代表水平偏移量，后一个代表垂直偏移量）
也可以xpos ypos （前一个数字代表水平偏移量，后一个代表垂直偏移量）
ps:用百分比会有一个特殊的算法，
0% 0% 图像的左上角会和父元素的左上角重合，
50% 50% 图像会在 父元素的正中间，
100% 100% 图像的右下角会与父元素的右下角重合
inherit 继承自父元素
*/
body{
background-position:right top;/*控制背景图像的位置*/
}
/*背景简写：简写时 属性值顺序： color image repeat attachment position*/
body {
background:#ffffff url(image.png) no-repeat right top;
}
background-size
{
background:url(image/xxx.gif);
background-size:100% 100%;/*拉伸并占满真格背景作用域*/
}
/*background-Origin属性指定background-position属性应该是相对位置注意如果背景图像background-attachment是"固定"，background-origin属性没有任何效果。*/
/* background-clip属性指定背景绘制区域
*border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
*content-box 背景绘制在内容方框内（剪切成内容方框）。
*padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
*/
body
{
/*多个背景图片*/
background-image:url(/upload/love/css.gif),url(/upload/love/html.gif);
}
5、text 文字
5.1 text color 文本个颜色
W3C标准规定：如果你定义了颜色属性，那么你还必须定义背景色属性
body{
color:blue;
}
h1 {
color:#00ff00;
}
h2{
color:rgb(255,0,0);
}
5.2 text-align 文本对齐方式
h1{
text-align:center;
}
p.date {
text-align:right;
}
p.main{
text-align:justify;
}
5.3 text-decoration 修饰
h1{
text-decoration:overline;/* 文本上面划线*/
}
h2{
text-decoration:line-through;/*文本中间划线 */
}
h3{
text-decoration:lint-underline;/*文本下部划线*/
}
h4 {
text-decoration : blink;/* 定义闪烁文本*/
}
/* 还可以是 none 和 inherit */
5.4 text-transform :uppercase 文本 转大写
/*text-transform:lowcase 文版转小写 text-transform:capitalize 首字母大写*/
p.uppercase{
text-transform:uppercase
}
5.5 text-indent: 文本缩进
p {
text-indent:5px;
}
/*主要属性：
属性 描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
*/*
5.6 direction 文字方向
ltd 默认 left to right 默认，文本方向从左到右
rtl right to left 文本方向 从右到左
inherit 规定应该从父元素 继承direction 属性值
5.7 letter-spacing
字母间距
h1 {
letter-spacing:2px; /* 默认 normal 还可以继承 inherit*/
}
h2{
letter-spacing:-3px;
}
5.8 line-hight 行高
p.small {
line-height:90%;
}
p.big{
ling-hight:200%;
}
5.8 text-shadow：基本文字阴影
text-shadow: h-shadow v-shadow blur color;
/*h-shadow: 必须 水平阴影的位置： 允许为负值
*v-shadow: 必须 竖直阴影的位置： 允许为负值
*blur : 可选 模糊距离
*color: 阴影的颜色
*/
5.9 vertical-align:text-top
设置一个元素的垂直对齐
值 描述
/*baseline 默认。元素放置在父元素的基线上。
*sub 垂直对齐文本的下标。
*super 垂直对齐文本的上标
*top 把元素的顶端与行中最高元素的顶端对齐
*text-top 把元素的顶端与父元素字体的顶端对齐
*middle 把此元素放置在父元素的中部。
*bottom 把元素的顶端与行中最低的元素的顶端对齐。
*text-bottom 把元素的底端与父元素字体的底端对齐。
*length
*% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
*inherit 规定应该从父元素继承 vertical-align 属性的值。
*/*
5.10 white-space: 段落中空白属性
/*
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应 该从父元素继承 white-space 属性的值。
*/*
5.11 word-spacing:30px; 定义单词间的距离为 30px
6、a样式连接
a：link - 正常，未被访问过的连接
a:visited 用户已经访问过的连接
a:hover 当用户鼠标放在连接上时
a:active 当用户点击的那一刻
a:link {
color:#FF0000;
} /* unvisited link */
a:visited {
color:#00FF00;
} /* visited link */
a:hover {
color:#FF00FF;} /* mouse over link */
a:active {
color:#0000FF;} /* selected link */
CSS 学习笔记