CSS3基础——笔记

　　CSS是Cascading Style Sheet的缩写，翻译为"层叠样式表" 或 "级联样式表"。CSS定义如何显示HTML的标签央视，用于设计网页的外观效果。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率。

一、CSS基础用法

 　　CSS代码可以在任何文本编辑器中打开和编辑。因此，不管读者有没有变成基础，初次接触CSS时会感到很简单。

1.1 CSS样式

　　样式是CSS最小的语法单元，每个样式包含两部分内容:选择器和声明(规则)，如下所示：

• 选择器(Selector): 选择器告诉浏览器呢该样式将作用于页面中哪些对象，这些对象可以是某个标签、所有网页对象、指定Class或ID值等。浏览器在解析这个样式时，根据选择器来渲染对象的显示效果。
• 声明(Declaration): 声明可以增加一个或者无数个，这些声明命令浏览器如何去渲染选择器指定的对象。声明必须包括两部分:属性和属性值，并用分号来标识一个声明的结束，在一个样式中最后一个声明可以省略分号。所有声明被放置在一对大括号内，然后整体紧邻选择器的后面。
• 属性(Property): 属性是CSS提供的设置好的样式选项。属性名是一个单词或多个单词组成，多个单词之间通过连字符相连。这样能够直观表示属性所要设置样式的效果。
• 属性值(Value): 属性值是用来显示属性效果的参数。它包括数值和单位，或者关键字。

1.2 CSS应用

　　CSS样式代码必须保存在.css类型的文本中，或者放在网页内

Hello World!

(5) 按Ctrl+S快捷键保存文档，按F12键在浏览器中预览，则显示如下所示，现在还没有定义CSS代码，所以看到的效果还不是最终效果。

(6) 编写CSS代码可以在一个单独的文件中进行。新建images文件夹，文件夹内创建CSS文档，保存为style.css，文件扩展名为.css。

(7) 不急于编写CSS代码，打开index.html文档，然后在标签内插入一个标签，输入以下代码导入上一步新建的外部样式表文件。

(8) 打开style.css文档，在其中输入CSS代码如下：

/*公共属性
----------------------*/
html{min-width:776px;}/*页面属性:边距为0，字体颜色为黑色，字体大小14像素，行高为字体大小1.6倍，居中对齐，背景色为天蓝色，字体为宋体等*/
body{margin:0px;padding:0px;border:0px;color:#000;font-size:14px;line-height:160%;text-align:center;background:#6D89DD;font-family:'宋体','新宋体',arial,verdana,sans-serif;
}/*超连接属性: 无边距、无边框，无下划线，然后定义正常状态下的颜色、访问过的颜色和鼠标经过的颜色并显示下划线*/
a{margin:0px;padding:0px;border:0px;text-decoration:none; /*这个属性允许对文本设置某种效果，如加下划线*/
}
a:link{color: #FF0000}   /* 未访问的链接 */
a:visited{color:E66133}  /* 已访问的链接 */
a:hover{color: #FF00FF; text-decoration:underline;} /* 当有鼠标悬停在链接上;定义文本下的一条线 *//*预定义格式属性：浅灰色北京，无首行缩进，内边距大小，外边距为0，右缩进为一个字体大小，字体颜色为蓝色 */
pre{text-indent:0;/*用于定义块级元素中第一个内容行的缩进 */background:#DDDDDD;padding:0px;margin:0px;color:blue;
}/**顶部布局
----------------------*/
#top{width:776px;margin-right:auto;margin-left:auto;padding:0px;height:12px;background: url(images/bg_dot1.gif) #fff repeat-x left top; overflow:hidden;
}
#top1{width:776px;margin-right:auto;margin-left:auto;padding:0px;height:121px;
}/*主体布局
----------------------*/
/*外层定义背景图像，实现麻点显示效果 */
#main{width:776px;margin-right:auto;margin-left:auto;padding:1.2em 0px;background:url(images/bg_dot2.gif) #fff repeat left top;text-align:left;
}
/*内层定义背景颜色为白色，实现中间内容区域遮盖麻点显示 */
#content{width:710px;margin-right:auto;margin-left:auto;padding:1em;background:#fff;
}
/*大标题区域属性*/
#titile{font-weight:bold;margin:0px 0px 0.5em 0px;padding:0.5em 0px 0.5em 1em;font-size: 24px;color:#00A06B;text-align:left;border-bottom:solid #9EA3C1 2px;
}
/*小标题区域属性*/
.sub{color:#00A06B;font-weight:13px;text-align:left;padding:1em 2em 0;background:url(images/0.gif) #fff no-repeat 1em 74%;
}
/*内容区域显示属性*/
.content{text-indent:2em;font-size:13px;margin-left:2em;padding:1em 6px;
}
/*页面链接区域属性*/
#gotop{width:100%;margin:0px;padding:0px;background:#fff;height:2em;font-size:12px;text-align:right;
}
/*底部布局
----------------------*/
/*页脚装修图*/
#footer{clear:both;width:776px;margin-right:auto;margin-left:auto;padding:0px;background:url(images/bg_bottom.gif) #fff repeat left top;text-align:center;height:39px;color:#ddd;
}
/*版权信息*/
#copyright{width:776px;margin-right:auto;margin-left:auto;padding:5px 0px 0px 0px;background:url(images/bg_bottom.gif) #fff; text-align:center;height:60px;line-height:13px;font-size:12px;color:#93A0BB;
}
/*圆角特效
----------------------*/
.box{background:url(images/nt.gif) repeat;}
.tl{background:url(images/tl.gif) no-repeat top left;}
.tr{background:url(images/tr.gif) no-repeat top right;}
.bl{background:url(images/bl.gif) no-repeat bottom left;}
.br{background:url(images/br.gif) no-repeat bottom right;}

(9) 按Ctrl+S保存文档，然后在浏览器中再次预览页面，则可以看到最终效果。images文件夹下的gif删除了，所以展示不全，不过大部分都出来了，就懒得重新去把图片找出来了。

转载于:https://www.cnblogs.com/zuoyang/p/9393757.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！