CSS基本知识整理
<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;">CSS<span style="color: black;">一般</span><span style="color: black;">叫作</span>为CSS样式表或层叠样式表（级联样式表），<span style="color: black;">重点</span>用于设置HTML页面中的文本内容（字体、<span style="color: black;">体积</span>、对齐方式等）、<span style="color: black;">照片</span>的外形（宽高、边框样式、边距等）以及版面的布局等外观<span style="color: black;">表示</span>样式。</p>CSS以HTML为<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>针对<span style="color: black;">区别</span>的浏览器设置<span style="color: black;">区别</span>的样式。
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2 CSS语法</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS<span style="color: black;">基本</span>语法</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS规则由两个<span style="color: black;">重点</span>部分<span style="color: black;">形成</span>：<span style="color: black;">选取</span>器以及一条或多条声明。</p>每条声明由一个属性和一个值<span style="color: black;">构成</span>。属性(property)是设置的样式属性，<span style="color: black;">每一个</span>属性有一个值，属性和值被冒号<span style="color: black;">掰开</span>。
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">例如</span> selector{property：value}</div>
<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>改变样式的HTML元素。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">例如</span> h1{color:red; font-size:14px;}
h1是<span style="color: black;">选取</span>器，color和font-size是属性，red和14px是值。</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：</p>
<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{text-align:center;color:red}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>值为若干单词，则要给值加引号： 例如：p {font-family: "sans serif";}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS高级语法</p><span style="color: black;">选取</span>器的分组
<div style="color: black; text-align: left; margin-bottom: 10px;"> h1,h2,h3,h4,h5,h6 {
color: green;
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">继承及其问题：<span style="color: black;">按照</span> CSS，子元素从父元素继承属性。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">body {
font-family: Verdana, sans-serif;
}</div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">3 创建CSS</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS 创建样式表分为三种<span style="color: black;">状况</span>：</p>内部样式表
<div style="color: black; text-align: left; margin-bottom: 10px;"><head>
<style type="text/CSS">
<span style="color: black;">选取</span>器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
div{width:200px; height:200px; border:1px solid red;}
</style>
</head>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">行内式(内联样式)</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div style="width:200px;height:100px;border:1px solid black;"></div></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">外边</span>样式表(外链式)</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"> <head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head></div>
<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;">样式优先级：内联样式>内部样式><span style="color: black;">外边</span>样式</p>三种样式表区别：
<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;">内部样式表：优点 部分结构和样式相分离； 缺点 <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;"><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>；<span style="color: black;">掌控</span>范围 <span style="color: black;">掌控</span><span style="color: black;">全部</span>站点(多)。</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">4 id和class<span style="color: black;">选取</span>器</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ID<span style="color: black;">选取</span>器：</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 的 HTML 元素指定特定的样式，id 属性和身份证<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;">HTML元素以 id 属性来设置 id <span style="color: black;">选取</span>器，CSS 中 id <span style="color: black;">选取</span>器以 "#" 来定义。<span style="color: black;">重视</span>： id 属性<span style="color: black;">不可</span>以数字开头。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">语法：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</div>
<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;">class<span style="color: black;">选取</span>器：</p>class <span style="color: black;">选取</span>器用于描述一组元素的样式，<span style="color: black;">亦</span>叫做类<span style="color: black;">选取</span>器。
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">class <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;">在 CSS 中，类<span style="color: black;">选取</span>器以一个点 "." 号来定义。</p>
<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;">第1</span>个字符<span style="color: black;">亦</span><span style="color: black;">不可</span><span style="color: black;">运用</span>数字。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">语法：
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }</div>
<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;">ID <span style="color: black;">选取</span>器和类（class）<span style="color: black;">选取</span>器的区别：</p>相同点：都<span style="color: black;">能够</span>应用于任何元素<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">区别</span>点：</p>ID <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>多次。<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>设置多个样式(<span style="color: black;">亦</span><span style="color: black;">便是</span>一个元素<span style="color: black;">能够</span>制定多个类名)，而ID只能指定一个。<h2 style="color: black; text-align: left; margin-bottom: 10px;">5 CSS元素<span style="color: black;">选取</span>器</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">最<span style="color: black;">平常</span>的CSS<span style="color: black;">选取</span>器<span style="color: black;">便是</span>元</p>
这篇文章真的让我受益匪浅，外链发布感谢分享！ 认真阅读了楼主的帖子，非常有益。
页:
[1]