CSS入门必要基本（适合小白)
<a style="color: black;"><span style="color: black;">1、</span>CSS是什么？</a><a style="color: black;">1、什么是CSS？</a><a style="color: black;">2、CSS有什么<span style="color: black;">功效</span>？</a><a style="color: black;"><span style="color: black;">2、</span>CSS核心<span style="color: black;">基本</span></a><a style="color: black;">1、CSS样式规则</a><a style="color: black;">2、引入CSS的<span style="color: black;">办法</span></a><a style="color: black;">1)、行内式</a><a style="color: black;">2)、内嵌式</a><a style="color: black;">3)、链入式</a><a style="color: black;">2、CSS<span style="color: black;">选取</span>器</a><a style="color: black;">1)、<span style="color: black;">基本</span><span style="color: black;">选取</span>器</a><a style="color: black;">2)、后代<span style="color: black;">选取</span>器</a><a style="color: black;">3)、并集<span style="color: black;">选取</span>器</a><a style="color: black;">4)、交集<span style="color: black;">选取</span>器</a><a style="color: black;">5)、通配符<span style="color: black;">选取</span>器</a><a style="color: black;"><span style="color: black;">3、</span>文本的样式属性</a><a style="color: black;">1、字体样式属性</a><a style="color: black;">1)、font-s</a>ize：字号<span style="color: black;">体积</span><a style="color: black;">2)、font-weight: 字体粗细</a><a style="color: black;">3)、font-family:字体</a><a style="color: black;">4)、font-style:字体风格</a><a style="color: black;">5)、font:</a><a style="color: black;">2、文本样式属性</a><a style="color: black;">1)、line-height：行间距</a><a style="color: black;">2)、text-align: 文本对齐方式</a><a style="color: black;">3)、text-decoration:修饰线</a><a style="color: black;">4)、text-in</a>dent:首行缩进<a style="color: black;">5)、color:文本颜色</a><a style="color: black;"><span style="color: black;">4、</span>CSS的高级特性</a><a style="color: black;">1、CSS的层叠性</a><a style="color: black;">2、CSS的继承性</a><a style="color: black;">3、CSS的优先级</a><a style="color: black;"><span style="color: black;">5、</span>盒子模型</a><a style="color: black;">1、内容区域：width 和 height</a><a style="color: black;">2、内填充区域： padding</a><a style="color: black;">3、 边框： border</a><a style="color: black;">4、外填充区域：margin</a><a style="color: black;">5、背景： bac<span style="color: black;">公斤</span>round</a><a style="color: black;"><span style="color: black;">6、</span>浮动</a><a style="color: black;">1</a>、元素的浮动<a style="color: black;">2、清除浮动</a><a style="color: black;"><span style="color: black;">7、</span>拓展</a><h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>CSS是什么？</h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、什么是CSS？</h2>CSS是层叠样式表<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、CSS有什么<span style="color: black;">功效</span>？</h2>用来美化、布局。以HTML为<span style="color: black;">基本</span>，<span style="color: black;">供给</span>了丰富的功能，如设置字体颜色、<span style="color: black;">体积</span>、样式、背景颜色，以及页面排版等等。<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">2、</span>CSS核心<span style="color: black;">基本</span></h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、CSS样式规则</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span><span style="color: black;">必须</span><span style="color: black;">认识</span>CSS样式规则，基本语法如下：</p><span style="color: black;">选取</span>器{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、引入CSS的<span style="color: black;">办法</span></h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1)、行内式</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">亦</span>叫内联样式，是直接写在标记名后面的。基本语法如下：</p><标记名 style =“属性1:属性值1;属性2:属性值2;···属性n:属性值n;”>/</标记名><h3 style="color: black; text-align: left; margin-bottom: 10px;">2)、内嵌式</h3>写在head头部标签中，并且<span style="color: black;">运用</span>style标记定义，基本语法如下:<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
<style>
<span style="color: black;">选取</span>器{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}
</style>
</head>
</div>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">3)、链入式</h3>在head头部标签中直接<span style="color: black;">经过</span>link链接到html文档中，基本语法如下：<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
<link herf="CSS文件路径"type="text/css" rel="stylesheet">
</head></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、CSS<span style="color: black;">选取</span>器</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1)、<span style="color: black;">基本</span><span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签<span style="color: black;">选取</span>器： html标记名<span style="color: black;">做为</span><span style="color: black;">选取</span>器。基本语法如下：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标记名{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">类<span style="color: black;">选取</span>器： class<span style="color: black;">选取</span>器。<span style="color: black;">运用</span> .类名 进行标识，基本语法如下：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">.类名{属性1:属性值1;属性2:属性值2;···属性n:属性值n;}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">id<span style="color: black;">选取</span>器： <span style="color: black;">运用</span> #id名<span style="color: black;">叫作</span> 进行标识，基本语法如下：</p>#idname{属性1:属性值1;属性2:属性值2;···属性n:属性值n;]<h3 style="color: black; text-align: left; margin-bottom: 10px;">2)、后代<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">后代<span style="color: black;">选取</span>器用来<span style="color: black;">选取</span>元素<span style="color: black;">或</span>元素组的后代，把外层标记写前面，内层标记写后面，中间<span style="color: black;">必须</span>加上空格。</p>例如：.box p soan {属性1:属性值1;属性2:属性值2;···属性n:属性值n;}<h3 style="color: black; text-align: left; margin-bottom: 10px;">3)、并集<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">任何形式的<span style="color: black;">选取</span>器都<span style="color: black;">能够</span><span style="color: black;">做为</span>并集<span style="color: black;">选取</span>器的一部分，中间<span style="color: black;">必须</span>用逗号隔开。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如：</p>h1,h2,p,.classNmae{属性1:属性值1;属性2:属性值2;···属性n:属性值n;]<h3 style="color: black; text-align: left; margin-bottom: 10px;">4)、交集<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">亦</span><span style="color: black;">叫作</span>作标签指定式<span style="color: black;">选取</span>器，在A<span style="color: black;">选取</span>器中选中的B<span style="color: black;">选取</span>器，中间用.连接，<span style="color: black;">无</span>空格。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如：</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">p.box{属性1:属性值1;属性2:属性值2;···属性n:属性值n;]</p><span style="color: black;">暗示</span><span style="color: black;">选取</span>p标签中的class="box"这个类<h3 style="color: black; text-align: left; margin-bottom: 10px;">5)、通配符<span style="color: black;">选取</span>器</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">通配符用*<span style="color: black;">暗示</span>，能匹配页面中所有元素，<span style="color: black;">功效</span>范围最广。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">例如：</p>*{margin:0;padding:0}<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">3、</span>文本的样式属性</h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">1、字体样式属性</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1)、font-size：字号<span style="color: black;">体积</span></h3>属性值了<span style="color: black;">能够</span><span style="color: black;">运用</span>相对长度单位em，<span style="color: black;">举荐</span><span style="color: black;">运用</span>像素单位px。<h3 style="color: black; text-align: left; margin-bottom: 10px;">2)、font-weight: 字体粗细</h3>属性值默认normal，<span style="color: black;">能够</span>设置加粗bold,更粗bolder，<span style="color: black;">或</span>1
你的话语如春风拂面，让我感到无比温暖。 祝福你、祝你幸福、早日实现等。
页:
[1]