前端学习第三课——css1

一、 CSS 的概述

CSS 指层叠样式表 ( Cascading Style Sheets)

二、Css 页面引入的方法：

     1、**行内样式**
     2、**内嵌样式**(在网页的head区域，style标签)
     3、**外部样式**(单独的css文件)
              外部的css文件加载到相应网页中：
                           1、在head区域中用link标签加载外部的css文件
                           <link rel="stylesheet" href="css/index.css" />
                          2、在head区域用style标签中的@import url（）；
                          @import url("css/index.css");

三、选择器

		   1、html标签选择器      选择器{}
		    i{font-size: 50px;}/*标签选择器*/ 
		   2、 ID选择器           # + id名称{}
		   #s1{border: 2px solid skyblue;	}/*ID选择器*/
		   3、class类选择器       . + class名称{}
		    .d1{ padding-top: 10px;border: 3px solid greenyellow；}/*类选择器*/
		   4、匹配后代元素选择器   选择器 选择器{}
		    p u{	font-size: 30px;}/*后代选择器*/
		   5、匹配子元素选择器     选择器>选择器{}
		    .d1>span{border: 2px solid deeppink；}/*子代选择器*/
		   6、伪类选择器           选择器:hover{}
		   
		      a:link{/*初始状态*/
				text-decoration: none;/*去掉下划线*/
				color: darkgoldenrod;
			}
			a:hover{/*鼠标悬停在上面时的状态*/
				text-decoration: overline/*上划线*/ underline/*下划线*/;
				color: palevioletred;
			}
			a:active{/*鼠标按下未松开时的状态*/
				color: royalblue;
				font-size:40px ;
			}
			a:visited{/*松开后的状态 */
				color: green;
			}
	
		   7、伪元素选择器         选择器:after{}
		  
				p:before{
					content:"你好!";
			}
				p:after{
		 			content/*内容*/:"i  dont know";
			}

		   8、组合元素选择器       选择器，选择器{}
			   a,s{
				border: 3px solid gold;
			}/*组合元素选择器*/

四、Css 文本及字体设计

1、color 设置文字的颜色，如： color:red;
2、font-size 设置文字的大小，如：font-size:12px;
3、font-family 设置文字的字体，如：font-family:‘微软雅黑’;
4、font-style 设置字体是否倾斜，
如：font-style:‘normal’; （设置不倾斜），font-style:‘italic’;（设置文字倾斜）
5、font-weight 设置文字是否加粗，
如：font-weight:bold; （设置 加粗） font-weight:normal （设置不加粗）
6、font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写：
font：是否加粗 字号/行高 字体；如：font:normal 12px/36px ‘微软雅黑’;
7、 line-height 设置文字的行高，如：line-height:24px;
8、text-decoration 设置文字的下划线，如：text-
9、decoration:none; 将文字下划线去掉
10、text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
11、 text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

<style>
	p{
				color: red;
				font-size: 16px;
				font-family: "微软雅黑";
				font-style:oblique;  /*设置字体是否倾斜*/
				font-weight:bold;  /*设置字体是否加粗*/
				text-indent: 32px;	 /*设置文字首行缩进*/	
				text-align: center;
			}
			div{
				height: 100px;
				background: pink;
			}
			a{
				line-height: 100px;   /*设置文字行高*/
				font-size: 36px;
				text-decoration: none;  /*设置文字的下划线*/
				text-align: center;
			}
			span{
				text-shadow: 2px 3px 3px pink;/*文字阴影*/
			}

五、背景设计

1. background-color 设置背景颜色 如：
   background:linear-gradient(skyblue,pink,yellowgreen);
2. background-image 设置背景图片地址 如：background-image: url(img/photo.jpg);
3. background-repeat 设置背景图片如何重复平铺 如：
4. background-repeat: no-repeat/*不平铺*/; background-repeat: repeat-x;/*背景图片平铺方式*/
5. background-position 设置背景图片的位置 如：background-position: center;
   如果提供两个，第一个用于横坐标，第二个用于纵坐标。
   如果只提供一个，该值将用于横坐标；纵坐标将默认为50%（即center）。
6. background-attachment 设置背景图片是固定还是随着页面滚动条滚动 如：
   background-attachment: fixed;/*fixed固定*/

六、颜色的表示方法

css 颜色值主要有三种表示方法：
     1、颜色名表示，比如：red 红色，gold 金色
     2、rgb 表示，比如：rgb(255,0,0)表示红色
     3、16 进制数值表示，比如：#ff0000 表示红色

七、 列表样式

list-style：简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image ：将图象设置为列表项标志。如：list-style-image: url(img/3.png);
list-style-position ：设置列表中列表项标志的位置。如：list-style-position:inside/outside;
outside： 列表项目标记放置在文本以外，且环绕文本不根据标记对齐
inside： 列表项目标记放置在文本以内，且环绕文本根据标记对齐
list-style-type ：设置列表项标志的类型。如：list-style-type: none; /*去掉列表前的样式*/

八、表格样式

border-collapse ：设置是否把表格边框合并为单一的边框。
border-spacing ：设置分隔单元格边框的距离。
caption-side ：设置表格标题的位置。
empty-cells :设置是否显示表格中的空单元格。
table-layout :设置显示单元、行和列的算法。

<style>
			table{
				border-spacing:50px/*单元格之间的距离*/
			 
			}
			.d2{
				margin:30px;
				border: 1px solid mediumvioletred;
				caption-side: bottom;/*表格标题的位置*/
			}
			.d3{
				
				border-collapse:collapse ;/*把表格边框合并为单一边框*/
				table-layout: fixed;/*设置表格 单元格的宽度固定*/
			}
</style>

九、Css轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。

<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid indianred;
				outline-style: dashed;/*轮廓样式*/
				outline-width: thick;/*轮廓的宽度*/
				outline-color: pink;/*轮廓颜色*/
				
				box-shadow: 12px 5px 20px red;/*盒子阴影*/
			}

<style type="text/css">
			input{
				outline: none;   /*去掉表单轮廓*/
				border: none;   /*去掉表单边框*/
			}
		</style>