一、 样式表。.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-color
CSS中，颜色值通常以以下方式定义:
十六进制 - 如："#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样式表入门
发布评论