CSS教程：精简使用

【前言】在html中引入css文件

<link rel="stylesheet" href="xxx.css">

一、基础选择器

1、标签选择器：改变标签

/* 改变所有div标签 */
div {
	color: pink;      
}
/* 改变所有标签：通配符 */
* {
	color: pink;      
}

2、class类选择器：改变一个或多个

.all {
	color: red;      
}

<div class="all">红色</div>
<div class="all font35">红色</div>  //  多个类名用空格隔开

3、id 选择器：唯一

#top {
	font-size: 25px;
}

<div id="top">云霄IT</div>

二、复合选择器

2.1 后代选择器：儿子或孙子…变色

ul li {               /* 使用空格隔开，可更多层 */
      color: pink;    /* 所有 ul...li 都会变粉红色 */
  }

<ul>
    <li>pink</li>
</ul>

升级：使用基础选择器的元素也可以，如

.val li a {
      color: pink;
  }

<ul class="val">
    <li>
        <a href="#">pink</a>
    </li>
</ul>

2.2 子选择器：只有儿子变色

div > a {
        color: pink;
    }

<div>
    <a href="#">pink</a>
</div>

2.3 并集选择器：选择多个标签，用逗号隔开

div,p {
        color: pink;
    }

<div>pink</div>
<p>pink</p>

升级：使用任何选择器都可以

div, p, .nav ul {
        color: pink;
    }

<div>pink</div>
<p>pink</p>
<ul class="nav">
    <ul>pink</ul>
    <ul>pink</ul>
</ul>

三、伪类选择器：鼠标浏览效果

3.1 链接： a

	/*未访问过颜色*/
    a:link {
        color: black;
        text-decoration: none;
    }
    /*已访问过颜色*/
    a:visited {
        color: red;
    }
    /*鼠标经过颜色*/
    a:hover {
        color: deepskyblue;
    }
    /*鼠标按下时颜色*/
    a:active{
        color: white;
    }
    /* 以上的顺序不能乱 */

<ul>
    <li><a href="#1">新闻标题1</a></li>
    <li><a href="#2">新闻标题2</a></li>
    <li><a href="#3">新闻标题3</a></li>
</ul>

3.1 输入框： input

input:focus {
        outline-color: pink;     /* 获取光标改变边框为粉红色 */
    }

<input type="text">

三、CSS背景：颜色、图片、位置

四、风格大全

.all{
	color: red;   /* 颜色 */
	width: 100px;   /* 宽度100像素 */
	height: 100px;   /* 高度100像素 */
	background-color: red;  /* 背景颜色 */
	
	/* 字体方面 */
	color: blue;  /* 改变字体颜色 */
	font-size: 35px;   /* 改变字体大小 */
	font-family: "微软雅黑";  /* 改变字体 */
	font-weight: bold;      /* 改变字体粗细，400px正常，700粗体 */
	font-style: italic;  /* 斜体字 */
	
	/* 文本属性 */
	text-align: center;    /* 居中对齐 */
	text-decoration: underline;  /* 下划线 */
	text-decoration: none;  /* 取消a标签下划线 */
	text-indent: 30px;  /* 首行缩进 */
	line-height: 30px;  /* 设置行间距，行高==高度可以让文字上下居中 */
	
	/* 行内块之间转换 */
	display: inline-block;   /* 转换为行内块元素，可设置宽度 */
    display: block;    /* 转为块元素,独占一行 */   
    display:inline;   /* 转为行元素，一行多个*/

	/* 输入框 */
	border:1px solid black;   /* 设置边框大小颜色 */
	border-radius:25px;   /* 设置圆角 */
	    
    /* CSS的背景：颜色、图片、位置 */
    background-color: skyblue;    /* 设置背景颜色 */
    background-image: url("your.png");   /* 设置背景图片 */
    background-repeat: no-repeat;   /* 背景图片不平铺，默认是平铺的 */
    background-position: left center;   /* 背景居左上下居中 */
    background-position: top center;   /* 背景居上 左右居中 */
    background-position: 20px 50px; /* x：20 y：50 精准定位 */
    background-size: 100% auto;   /* 浏览器伸缩不改变照片大小 */

}