CSS基础

CSS

Cascading Style Sheets 层叠样式表 ， CSS可以静态的修饰网页，还可以配合各种脚本语言动态地对网页个元素进行格式化。

css是由选择器跟声明两部分构成。

选择器

标签选择器

直接选择元素。例如，p选择所有所有p元素

<style>
    h3 {
            text-align:center;
            color:red; 
    }
</style>
 <h3>这是一个h3标签</h3>

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

<style>
    #para1{
            text-align:center;
            color:red; 
    }
</style>
 <p id="para1">你好，世界！！！</p>
    <p>此段落不受样式的影响。</p>

class选择器

class选择器用于描述一组元素的样式，class 可以在多个元素中使用。

<style>
    .center{
        text-align:center;
    }    
</style>
 <h1 class="center">标题居中</h1>
    <p class="center">段落居中。</p> 

选择器优先级

• 内联样式
• ID 选择器
• 类选择器
• 标签选择器
• 通用选择器（*）

样式表

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。

<!--在页面中引入外部样式表 style.css-->
<link rel="stylesheet" href="styles.css">

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。

/*直接写在本页面在中，用style标签包裹*/
<style>
	hr {
        color:sienna;
}
	p {
        margin-left:20px;
}
	body {
        background-image:url("images/back40.gif");
}
</style>

内嵌样式表

直接在HTML元素中定义的样式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

• 内联样式
• 内部样式
• 外部样式
• 浏览器默认样式

注释

/*这是一个css注释*/

CSS背景

css背景属性用于定义HTML元素的背景

background-color    	背景颜色
background-image		背景图片
background-position		背景图像的位置
background-size 		背景图像的尺寸

CSS Text 文本格式

通过 CSS 的 Text 属性，你可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等。

<!--文本对齐 center居中 left 左对齐  right右对齐-->
text-align:center;
<!-- 行间距10个像素 -->
line-height:10px;
<!-- 首行缩进 -->
text-indent:20px;
<!-- 字间距 -->
letter-spacing:10px;

文字属性

CSS字体属性定义字体，加粗，大小，文字样式。

<!-- 字体颜色 -->
color:red;
<!-- 文字大小 -->
font-size:12px;
<!-- 文字粗细 -->
font-weight:bolds
<!-- 文字字体 -->
font-family:”宋体”

列表

无序列表 - 列表项的标记使用特殊图形（如小黑点、小方框等）

/*a为空心圆 b为实心方块*/

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

有序列表 - 列表项的标记使用数字或字母

/*c为小写英文字母 d为小写罗马数字 */

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

/*使用图像来替换列表项的标记*/
list-style-image
/*列表中列表项标志的位置，默认为outside*/
list-style-position

超链接

 /*未访问的链接属性*/
a:link{color :red;}
/*已访问的链接属性*/
 a:visited{color:black;}
/*鼠标滑过链接属性*/
a:hover {color:#9b6161;}
/*已点击链接属性*/
a:active {color:#00ff88;} 

盒子模型

​ 所有 HTML 元素可以看作盒子，CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

• Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明
• Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
• Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
• Content（内容） - 盒子的内容，显示文本和图像