CSS

CSS:层叠样式表

一、使用方式
   1.内联样式
       <标记名称 style="css代码">
   2.内部样式
       写在head中
       <style>
           css代码
       </style>
   3.外部样式
       (1)新建一个xx.css文件
       (2)写在head中
           <link rel="stylesheet" href="css文件路径">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

	<style>
   /*2.内部样式*/
   i{color: blue;}
   u{color: pink;}
   s{color: red;}
	</style>
	<!-- 3.外部样式 -->	
	<link rel="stylesheet" href="01.css">
</head>
<body>
<!-- 1.内联样式 -->
	<b style="color:red;">加粗</b>
	<i>倾斜</i>
	<u>下划线</u>
	<s>删除线</s>
</body>
</html>

01.css

u{color:pink;}
s{color: yellow;}

二、选择器
   1.通配选择器    *{}
   2.标记选择器标记名称{}
   3.类选择器   .class名称{} （类选择器一般该样式可以有多个类名）

｛class、id不能用汉字和以数字开头命名｝
4.id选择器 #id名称{} （id选择器一般js 只有一个id）
5.群组选择器选择器,选择器{}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>	
    /*1.通配选择器*/
    *{color: pink;}
    /*2.标记选择器*/
    b{color:green;}
    /*3.类选择器 一般该样式可以有多个类名*/
    .b5{color: yellow;}
    /*4.id选择器 一般js 只有一个id*/
    #u1{color: blue;}
    /*5.群组选择器*/
    s,i,.u2{color: purple;}
	</style>
</head>
<body>
<!-- class不要用汉字，不要以数字开头 -->
	<b class="b1 b2 b5">加粗1</b>
	<s>删除线</s>
	<u id="u1">下划线1</u>
	<b>加粗2</b>
	<i>倾斜</i>
	<u class="u2">下划线2</u>
</body>
</html>

6.子代选择器选择器>选择器{}
7.后代选择器选择器选择器{}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    /*6.子代选择器*/
   p>b{color:pink;}
    /*7.后代选择器*/
   p b{color: red;}
	</style>
</head>
<body>
	<p>
		<i>倾斜<b>加粗1</b></i>
		<b>加粗1</b>
	</p>
	<b>加粗3</b>
</body>
</html>

三、优先级
继承<通配<标记<class<id<内联

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*继承<通配<标记<类（class）<id<内联*/
	#d2{color: yellow;}
    .d1{color: pink;}
	  b{color: blue;}
     *{color: red;}
     p{color: purple;}
	</style>
</head>
<body>
	<b class="d1" id="d2" style="color:green;">加粗</b>
	<p>段落<i>倾斜</i></p>
</body>
</html>

四、伪类选择器
   1.超链接（顺序必须是L V H A）
       :link       未访问
       :visited   访问过
       :hover       鼠标滑过
       :active       鼠标激活

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
  /*伪类选择器 顺序只能是LVHA*/
  /*未访问的状态*/
   a:link{color: pink;}
  /*访问过的状态*/
  a:visited{color:purple; }
  /*鼠标滑过*/
  a:hover{color: red;}
  /*鼠标激活*/
  a:active{color: yellow;}
	</style>
</head>
<body>
	<a href="http://www.baidu.com">百度</a>
</body>
</html>

2.表单
:focus 获取焦点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
     /*获取焦点状态*/
     .i1:focus{color: blue;
     	background: yellow;}
     	.i2:focus{width: 15px;height: 15px;}
	</style>
</head>
<body>
	
	用户名：<input type="text" class="i1"><br>
	性别：<input type="radio" name="a" class="i2">男
	      <input type="radio" name="a" class="i2">女
</body>
</html>

   3.其他
       :before       元素之前
       :after       元素之后

eg:
p:after{content:"文字"|url();}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
     p:after{content:"是花园";}
     p:before{content:url(../04.jpg); }
	</style>
</head>
<body>
	<p>我们的祖国</p>
	<p>我们的祖国</p>
	<p>我们的祖国</p>
</body>
</html>

五、css3新增选择器
   父元素中第一个子元素
       :first-child{}
   父元素中最后一个子元素
       :last-child{}
   父元素中第n个子元素
       :nth-child(n){}
   父元素中唯一子元素（必须是唯一的孩子）
       :only-child{}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	/*获取父元素中的第一个子元素*/
      b:first-child{color: red;}
      /*获取父元素中的最后一个子元素*/
      s:last-child{color: blue;}
      /*获取父元素中第N个子元素*/
      b:nth-child(4){color: green;}
      /*获取父元素中唯一的子元素*/
      i:only-child{color: pink;}
	</style>
</head>
<body>
<p>
	<b>加粗1</b>
	<u>下划线</u>
	<s>删除线1</s>
	<b>加粗2</b>
	<i>倾斜</i>
	<s>删除线2</s>
	</p>
<p>
	<i>倾斜2</i>
</p>
</body>
</html>

文本样式
   1.字体颜色
       color:red;
       color:#ff0000;
       color:rgb(255,0,0);
   2.字体大小
       font-size:20px;
   3.字体
       font-family:楷体;
   4.水平对齐方式
       text-align:left|center|right;
   5.加粗
       font-weight:bold;
   6.倾斜
       font-style:italic;
   7.修饰线（none（没有线）|underline（下划线）|overline（上划线）|line-through（中间线））
       text-decoration:none|underline|overline|line-through;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
     p{
     	/*文本样式*/
     	/*1字体颜色*/
     	color: pink;
     	/*2字体大小*/
     	font-size: 25px;
     	/*3字体*/
     	font-family: 华文彩云;
     	/*4水平对齐方式 left/center/right*/
     	text-align: center;
     	/*5加粗*/
     	font-weight: bold;
     	/*6倾斜*/
     	font-style: italic;
     	/*7修饰线 underline/overline/line-through/none*/
     	text-decoration: overline;
     }
	</style>
</head>
<body>
	<p>段落</p>
</body>
</html>