<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css样式</title>
<style></style>
<!-- <link rel="stylesheet" href="css_model.css" >-->
</head>
<body style="margin-left: 20%;color: #77a9f9;">
<div>
<h3>1--写入CSS的三种方式：</h3>
<h3>第一种:在标签中 style</h3>
<h3>第二种:在head中， style</h3>
<h3>第三种:在css文件中，link rel="stylesheet" href="css_model.css" </h3>
<h3>2--写样式的格式：style = "key:value;key2:value2;"</h3>
<h3>3--6种常见的选择器写法：</h3>
<h3>第一种：标签选择器 img,a{color:red;"></h3>
<h3>第二种：ID选择器 #i1,i2{color:red;"></h3>
<h3>第三种：类选择器 .c1,c2{color:red;"></h3>
<h3>第四种：属性选择器([相关属性='xxx'])-->.c1[type="text"]{color:red;}</h3>
<h3>第五种：层级选择器(用空格隔开)-->.c1 #i1{color:red;}-->类c1下一层当中ID=i1</h3>
<h3>第六种：组合选择器(用，隔开)-->.c1,#i1{color:red;}-->类c1和ID=i1</h3>
<h3>4--优先级：标签上style优先，编写顺序，就近原则</h3>
<h3>5--注释 /* */</h3>
<h3>6--边框:style="border: 1px dotted darkred" 顺序是：宽度，样式，颜色 </h3>
<h3>7--其他样式:<br>
---->height， 高度 百分比;<br>
---->width， 宽度 像素，百分比;<br>
---->text-align:ceter, 水平方向居中;<br>
---->line-height，垂直方向根据标签高度;<br>
---->color、 字体颜色;<br>
---->font-size、 字体大小;<br>
---->font-weight 字体加粗
</h3>
<h3>8--float:让标签飘起来，块级标签也可以堆叠; 老子管不住： div style="clear: both;"/div</h3>
<h3>9--display
---->display: none; -- 让标签消失;<br>
---->display: inline;具有行内标签的属性;<br>
---->display: block;具有块级标签的属性--可以设置行高和宽度;<br>
---->display: inline-block;<br>
具有inline,默认自己有多少占多少;<br>
具有block，可以设置无法设置高度，宽度，padding margin
</h3>
<h3>10--行内标签：无法设置高度，宽度，padding margin； 块级标签：设置高度，宽度，padding margin</h3>
<h3>11--padding(0,auto)(如果是两个参数：第一个上下,第二个左右) 内边距;<br>
-->margin(0,auto)（如果是四个参数，按顺时针方向--北东南西） 外边距;<br>
</h3>
</div>
</body>
</html>
浙公网安备 33010602011771号