Web前端學習筆記之CSS基礎知識
一、CSS介紹
1、CSS是指层叠样式表（Cascading Style Sheets）。一般情况下，样式通常存储在样式表中，而外部样式通常存储在CSS文件中，并且多个样式定义可层叠为一。
2、CSS可以解决以下几个问题：
（1）定义如何显示HTML元素；
（2）解决内容与表现分离的问题；
（3）提高工作效率。
二、CSS的基本语法
CSS的构成
CSS主要是由选择器，以及一条或者多条声明构成。
即：选择器{ 声明1，声明2，...，声明N } （其中选择器通常是需要改变样式的HTML元素，声明是由属性和值构成，中间用冒号隔开）
例如：h1 {color:red; font-size:14px;} 或 h1{
color:red;
font-size:14px;
}
注意：（1）若值为多个单词，则要给值添加双引号；
（2）css对大小写不敏感，为了容易编译，通常会在“：”和值之间加入空格，因为空格不会影响css实现效果；
三、CSS选择器
CSS选择器大致可以分为：派生选择器、id选择器、类选择器、属性选择器。
1、派生选择器
通过依据元素在其上下文之间的位置关系来定义样式。
比如有一段html代码：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol>
我希望将代码中的<li><strong>标签之间的代码，变为斜体字，可以这样定义：
li strong{
font-style:italic;//字体样式：斜体字
font-weight:normal;字体的粗细：正常
}2、id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式，以“#”号来定义。
例如下面的html代码：
<p id="red">这个段落是红色。</p> <p id="green">这个段落是绿色。</p>
将id=“red”的p元素改为红色，将id="green"的p元素改为绿色
#red {
color:red;
}
#green {
color:green;
}id选择器也可以和派生选择器一起使用，例如：
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}注意：id属性只能在每个html中出现一次
3、类选择器
在CSS中，类选择器以一个点号显示
例如下面的html代码：
<h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
定义类选择器：
.center {
text-align:center;
}类选择器也可以被用做派生选择器，例如：
.fancy td {
color: #f60;
background: #666;
}4、属性选择器
对带有指定属性的html元素设置样式。
例如对下面的html代码：
<h1>可以应用样式：</h1> <h2 title="Hello world">Hello world</h2> <a title="W3School" href="http://w3school.com.cn">W3School</a>
设置样式：
[title]
{
color:red;
}还可以扩展为属性和值选择器等，如
[title=w3school]
{
color:red;
}四、CSS的引用
引用样式表的方法有三种：内部样式表、外部样式表、内联样式
1、内部样式表
<head> <style type="text/css"> //css代码段 </style> </head>
2、外部样式表
<head> <link rel="stylesheet" type="text/css" href="xxx.css"/> </head>
其中：rel表示当前文档和被链接文档之间的关系，href指定被连接文档的地址，格式为“.css”
3、内联样式表（一般不使用）
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
如此，将样式写在标签里
注意：html文档中，内部样式表和外部样式表同时存在的话，会以内部样式表为主，外部样式表为辅。
五、CSS样式
CSS样式分为：背景、文本、字体、链接、列表、表格、轮廓
六、CSS框模型（盒子模型）
分为：内边距、外边距、边框、外边距合并
七、CSS定位
分为：相对定位、绝对定位、浮动
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT