一、CSS语法
1、CSS实例
CSS规则由两个主要的部分构成：（选择器）（以及一条或多条声明）
h1{color:blue; font-size:12px;}
h1（选择器）{color（属性）:blue值; font-size（属性）:12px（值）;}（声明）
注：CSS声明总是以分号（;）结束，声明总以大括号（{}）括起来
2、CSS注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以（/*）开始，以（*/）结束
eg：/*这是个注释*/
p{
text-align:center;
/*这是另一个注释*/
color:black;
}
二、CSS-id和Class
1、id选择器
id选择器可以为标有特定id的HTML元素制定特定的样式，HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
eg：
#para1{
text-align:center;
color:red;
}
注：id属性不要以数字开头，数字开头的id在Mozilla/Firefox浏览器中不起作用。
2、class选择器
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个选择器中使用。在HTML中以class属性表示，在CSS中，类选择器以一个点“.”显示。
eg：
①所有拥有center类的HTML元素为居中
.center{text-align:center;}
②所有p元素使用class=“center”让该元素文本居中
指定特定的HTML元素使用class
p.center{text-align:center;}
注：类名的第一个字符不能使用数字，它无法在Mozilla或Firefox中起作用。
三、CSS创建
插入样式表的三种方法：外部样式表（External style sheet）、内部样式表（Internal style sheet）、内联样式（lnline style）。
1、外部样式表
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式。<link>标签在（文档的）头部。
eg：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的HTML标签。样式表应该以 .css扩展名进行保存。
eg：
hr{color:sienna;}
p{maggin-left:20px;}
body{background-image:url("/images/back40.gif");}
注：不要在属性值与单位之间留有空格（如：“margin-left：20px”），正确的写法是“margin-left：20px”。
2、内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表，
eg：
<head>
<style>
hr{color:sienna;}
p{margin-left:20px;}
body{background-image:url("/images/back40.gif");}
</style>
</head>
3、内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
eg:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
4、多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来
eg：外部样式表拥有针对h3选择器的三个属性：
h3{
color：red；
text-align：left；
font-size：8pt；
}
内部样式表拥有针对h3选择器的两个属性：
h3{
text-align：right；
font-size：20pt；
}
注：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
四、CSS背景（background）
1、背景颜色
eg：
body {background-color:#b0c4de;}
2、背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
eg：
body {background-image:url('paper.gif');}
3、背景图像-水平或垂直平铺
默认情况下background-image属性会在页面的水平或垂直方向平铺
eg：
垂直方向
body{
background-image:url('gradient2.png');
}
水平方向平铺（repeat-x）
body{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
4、背景图像-设置定位于不平铺
如果不想让图像平铺，可使用background-repeat
eg：
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
改变图像在背景中的位置background-position
eg：
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
5、背景简写属性
eg：
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：
background （ 简写属性，作用是将背景属性设置在一个声明中）
background-color （设置元素的背景颜色）
background-image （把图像设置为背景）
background-repeat （设置背景图像是否及如何重复）
background-attachment （背景图像是否固定或者随着页面的其余部分滚动）
background-position （设置背景图像的起始位置）
五、CSS文本格式
1、文本颜色
颜色属性设置
eg：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
2、文本对齐方式
对齐方式
当text-align设置为“justify”，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
eg：
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
3、文本修饰
text-decoration属性是用来设置或删除文本的装饰
eg：
a{text-decoration:none;} (删除链接的下划线)
h1 {text-decoration:overline;} （上划线）
h2 {text-decoration:line-through;} （中）
h3 {text-decoration:underline;} （下）
注：不建议强调指出不是链接的文本，应为这样常常混淆用户。
4、文本转换
指定在一个文本中的大写和小写字母。
eg：
p.uppercase {text-transform:uppercase;} （所有字母大写）
p.lowercase {text-transform:lowercase;} （所有字母小写）
p.capitalize {text-transform:capitalize;} （每个首字母大写）
5、文本缩进
指定文本的第一行的缩进。
eg：
p{text-indent:50px;}
六、CSS字体（font）
1、字体样式
eg：
p.normal {font-style:normal;} （正常-正常显示文本）
p.italic {font-style:italic;} （斜体-以斜体字显示的文字）
p.oblique {font-style:oblique;} （倾斜的文字-文字向一边倾斜）
2、字体大小
font-size设置文本大小
或em设置字体大小
1em和当前字体大小相等，在浏览器中默认的文字大小是16px。px/16=em
font-family （字体系列）
font-size （文本字体大小）
font-style （字体样式）
font-variant （以小型大写字体或者正常字体显示文本）
font-weight （字体粗细）
七、CSS链接
1、链接样式
a:link （正常，未访问过的链接）
a:visited （用户已访问过链接）
a:hover （当用户鼠标放在链接上时）
a:active （链接被点击的那一刻）
注：a:hover必须跟在a:link和a:visited后面，a:active必须跟在a:hover后面。
2、常见的链接样式
1）文本修饰
text-decoration 删除链接中的下划线
eg：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
2）背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
八、CSS列表
1、无序列表（小黑点等）
eg：
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
2、有序列表（数字或字母等）
eg：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
九、CSS表格
1、表格边框（border）
eg：
table, th, td{
border: 1px solid black;
}
注：此例子中表格有双边框，因为表和th/td元素有独立的边界。为显示一个表的单边框可使用border-collapse属性。
2、折叠边框
border-collapse属性设置表格边框是否被折叠成一个单一的边框或隔开
eg：
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
3、表格文字对齐
text-align属性设置水平对齐、向左、右或中心对齐
eg：
td{
text-align：right；
}
垂直对齐属性设置，垂直对齐，如顶部，底部或中间
eg：
td{
height：10px;
vertical-align:bottom;
}
十、CSS盒子模型（Box Model）
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
1、元素的宽度和高度
注：当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。
eg：下面的例子中的元素的总宽度为300px
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
十一、CSS边框
1、边框样式
eg：
<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>
2、border-style属性1-4个值
eg：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
底边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
底边框是 double
border-style:dotted solid;
上、底边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
注：它也可以和border-width 、 border-color一起使用。
十二、CSS轮廓（outline）
轮廓属性
outline （在一个声明中设置所有的轮廓属性）
outline-color （设置轮廓颜色）
outline-style （设置轮廓样式）
outline-width （设置轮廓宽度）
十三、CSS margin（外边距）
1、margin-单边外边距属性
eg：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
2、margin-简写属性
eg：margin属性可以有一到四个值。
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
十四、CSS padding（填充）
1、填充-单边内边距属性
eg：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
2、填充-简写属性
eg：Padding属性，可以有一到四个值。
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
十五、CSS分组和嵌套选择器
1、分组选择器
eg：
h1{
color:green;
}
h2{
color:green;
}
p{
color:green;
}
2、嵌套选择器
适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
网友评论