admin管理员组文章数量:1794759
web前端之css样式表入门
一、 样式表。.css 1、什么是 CSS CSS 指层叠样式表 (Cascading Style Sheets)
2、CSS 语法规则： CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
二、 margin (外边距) margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。 margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
margin这个属性有四个值：，四个值写的时候按顺时针写入，(top,right,bottom,left) 例如：margin:100px 30px 20px 50px 如果上下相等，左右相等， 即margin:100px 50px 100px 50px可简写为：margin:100px 50px 若四个值都相等，写一个值即可。 值与值之间用空格分开。
margin:0 auto ; 网页容器居中！！！
三、3个选择器 1、标记选择器p{ } 2、id选择器（ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。）
#para1 { text-align:center; color:red; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob)</title> <style> #para1 { text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html>3、class选择器 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
<style> .center { text-align:center; } </style> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p>4、复合选择器
下例代码是使所有p标记使用class=”center”
<style> p.center { text-align:center; } </style> <h1 class="center">这个标题不受影响</h1> <p class="center">这个段落居中对齐。</p>四、 CSS 创建 插入样式表的方法有三种: 三种方式中，内联样式优先级最高，内部样式表次之，外部样式表最低 多重样式优先级 样式表允许以多种方式规定样式信。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 一般情况下，优先级如下： （内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
<head> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 设置：h3{color:blue;} --> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> </head> <body> <h3>测试！</h3> </body> 注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。• 外部样式表(External style sheet) 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");} 不要在属性值与单位之间留有空格（如："margin-left: 20 px" ）， 正确的写法是 "margin-left: 20px" 。• 内部样式表(Internal style sheet)
<style>标记在<head>里网速卡的时候让样式先出来 当单个文档需要特殊的样式时，就应该使用内部样式表。 你可以使用 <style> 标签在文档头部定义内部样式表，就像这样: <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>• 内联样式(Inline style) Style属性在标记里 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>五、CSS 背景
CSS 背景属性用于定义HTML元素的背景。 CSS 属性定义背景效果:
• background-colorCSS中，颜色值通常以以下方式定义:
十六进制 - 如："#ff0000" 拓展：#EEEEEE可以简写为#EEE RGB - 如："rgb(255,0,0)" 颜色名称 - 如："red"• background-image 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
body {background-image:url('paper.jpg');} url是相对路径，所以要把图片位置弄到根目录下• background-repeat 图像在水平方向平铺 (repeat-x)
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }图像在垂直方向平铺 (repeat-y) 不平铺（no-repeat） • background-attachment 背景图像是否固定或者随着页面的其余部分滚动 如何指定一个固定的背景图像：
body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; }属性值
值 描述 scroll 背景图片随着页面的滚动而滚动，这是默认的。 fixed 背景图片不会随着页面的滚动而滚动。 local 背景图片会随着元素内容的滚动而滚动。 initial 设置该属性的默认值。 阅读关于 initial 内容 inherit 指定 background-attachment 的设置应该从父元素继承。 阅读关于 inherit 内容• background-position 改变图像在背景中的位置
body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; // right top可以写成x% y% }六、 CSS 文本格式 所有CSS文本属性。
属性 描述 color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 对齐元素中的文本 text-decoration 向文本添加修饰 text-indent 缩进元素中文本的首行 text-shadow 设置文本阴影 text-transform 控制元素中的字母 unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐 white-space 设置元素中空白的处理方式 word-spacing 设置字间距 text-align:justify ; //文本两端对齐text-decoration 属性用来设置或删除文本的装饰。 从设计的角度看 text-decoration属性主要是用来删除链接的下划线： 实例
a {text-decoration:none;}实例
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}七、 CSS 字体 字体系列 font-family 属性设置文本的字体系列。 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。 多个字体系列是用一个逗号分隔指明： 实例
P {font-family:"Times New Roman", Times, serif;}八、 CSS 链接 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 四个链接状态是： • a:link - 正常，未访问过的链接 • a:visited - 用户已访问过的链接 • a:hover - 当用户鼠标放在链接上时//悬停颜色效果 • a:active - 链接被点击的那一刻 实例
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */九、 快捷键
.top+Tab键 = <div class =”top”></div> 新建css文件,,之后不要忘记用link引用过来，在<head>里写即可 *{ } *选择器，代表任何选择器 .top{ } 类选择器 Inlineblock 内联块儿，display:inlineblock; 一行两块 屏幕16：9显示器，宽1280px 垂直居中：height:50px line-height:50px 一样则垂直居中 转义字符  是空格的意思-一个练习示例
test.css文件代码如下：
*{ margin: 0; padding: 0; } .top{ width: 100%; height: 50px; background-color: #f4f4f4; font-size: 12px; color: #666; } .row{ width: 1100px; margin: 0 auto; } .topleft{ display: inline-block; width: 480px; height: 50px; line-height: 50px; } .topright{ display: inline-block; height: 50px; line-height: 50px; } a.login{ text-decoration: none; color: #1c68c8; } a.register{ text-decoration: none; color: #666; } a.register:link{ color: #666666; } a.register:visited{ color: #666666; } a.register:hover{ color: #1C68C8; } a.register:active{ color: #666666; }在html的head里引用css文件
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <link rel="stylesheet" type="text/css" href="test.css"/> </head> <body> <div class="top"> <div class="row"> <div class="topleft">让旅行更幸福</div> <div class="topright"> <a class="login" href="#">您好，请登录</a> <a class="register" href="#">免费注册</a> </div> </div> </div> </body> </html>一个内部样式表引用的示例，head里写style
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style type="text/css"> p{ color: red; font-size: 16px; background-color: #eee; text-align: center; width: 400px; height: 200px; margin: 0 auto; margin-top: 10px; } </style> </head> <body> <p style="color: black;">Hello World!</p> </body> </html>版权声明：本文标题：web前端之css样式表入门 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686969208a123655.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论