1. CSS简介
为什么要学习css？
通过使用 CSS 我们可以大大提升网页开发的工作效率！
CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护工作更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜寻引擎更为友善，更容易搜寻到页面内容。
在学习css之前，我已经html知识有了一定的了解~
那什么是css呢？
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
2. CSS语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。
CSS声明总是以分号(;)结束，声明组以大括号({})括起来:
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
2.1 CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
/*这是个css注释*/小复习：
html的注释：
<!-- 这是html注释-->2.2 CSS Id 和 Class
如果你要在HTML元素中设置CSS样式，你需要在元素中设置”id” 和 “class”选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=”para1”:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小霍霍的微博</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小霍霍的博客</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>2.3 如何插入样式表
插入样式表的方法有三种:
（1）外部样式表(External style sheet)
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表。link标签在（文档的）头部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。以下为 mystyle.css
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}（2）内部样式表(Internal style sheet)
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表，就像这样:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>（3）内联样式(Inline style)
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p style="color:sienna;margin-left:20px">这是一个段落。</p>其实我们可以综合运用上面的三种方式，但是多重样式具有优先级。
一般情况下，优先级如下：
内联样式）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>注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
2.4 CSS 背景（Background）
background-color
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}background-image
body {background-image:url('paper.gif');}background-repeat
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}background-position
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}背景- 简写属性
但是顺序要和上面一样。
body {background:#ffffff url('img_tree.png') no-repeat right top;}2.5 CSS 文本
2.5.1 文本的对齐方式
文本可居中或对齐到左或右,两端对齐.
当text-align设置为”justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}2.5.2 文本修饰
文本可居中或对齐到左或右,两端对齐.text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}2.5.3 文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}2.5.4 文本缩进
p {text-indent:50px;}2.6 CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。
2.6.1 字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种”后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：”宋体”。
多个字体系列是用一个逗号分隔指明：
p{font-family:"Times New Roman", Times, serif;}2.6.2 字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
-正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}2.6.3 字体大小
font-size 属性设置文本的大小。
请务必使用正确的HTML标签，就h1 - h6表示标题和p表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小：
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
设置文字的大小与像素
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}用em来设置字体大小
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */使用百分比和EM组合（建议）
--在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}2.7 CSS 链接
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */文本修饰
a:hover {text-decoration:underline;}背景颜色
a:visited {background-color:#FFFF85;}
可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image2.8 CSS 列表
可以按顺序设置如下属性：
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
ul
{
list-style: square url("sqpurple.gif");
}2.9 CSS 盒子模型(Box Model)
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}2.10 CSS 边框
border:5px solid red;
扫一扫
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
