我们在学习HTML之后，前端三件套第二件便是CSS，但CSS内容较多，我们分几部分讲解：
（如果没有学习HTML，请参考之前文章：HTML知识点概括——一篇文章带你完全掌握HTML>）
如果说HTML为网页提供内容，那么CSS就是为内容进行装饰，为网页进行布局
CSS可以控制整体框架，控制文本字体，大小等诸多事宜
CSS基本语法只有一条：
选择器 { 声明1； 声明2；}首先我稍微解释一下元素显示模式：
HTML的元素类型模式：
我们先讲解一下块元素：
我们再来讲解一下行内元素：
最后我们介绍一下行内块元素：
这些属性并非都是绑定的，我们可以通过方法进行转换：
display：inline/block/inline-block 分别对应行内元素，块元素，行内块元素CSS作用HTML中一共有三种方法，我们一一介绍：
上面三种语法讲究就近原则，当前标签距离谁较近，就是用哪种css
一般情况：行内元素>内部样式>外部样式
下面给出代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导入方法</title><!-- 注意：这里遵循就近原则，当前标签离哪个近就用哪个样式 --> <!-- 内部样式：在HTML的Head部位书写 --> <style> h1 { color: aliceblue; } </style> <!-- 外部样式：在CSS中书写，然后通过Link导入 --> <link rel="stylesheet" href="css.css"></head><body> <!-- 行内样式：在body中书写标签时直接写入style --> <h1 ></h1></body></html>h1 { color: black;}CSS的基本选择器分为四种：
通配符选择器：
标签选择器：
类选择器（class）：
id选择器（id）：
三种选择器具有明确的优先级：id选择器>类选择器>标签选择器
下面给出示例代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>三种选择器</title> <!-- 这里选择器的样式遵循：id选择器>类选择器>标签选择器 --> <style> /* 1.标签选择器： 样式： 标签名{} 自动选中所有标签的代码 */ h1 { color: bisque; } p { color: blueviolet; font-size: 30px; } /* 2.类选择器： 样式：.类名{} 自动选中所有带类名的代码，可以跨标签，类名定义用class */ .myStyle { color: blue; font-size: 20px; } /* 3.id选择器： 样式：#id名{} 自动选择带有id名的代码，注意id具有全局唯一性 */ #w123 { color: aquamarine; font-size: 40px; } #w333 { color: aquamarine; font-size: 40px; } /* 4.通配符选择器 样式： * {} 全部锁定，全部标签都带有以上特征 */ </style></head><body> <h1>标题1</h1> <p>我是30px大小的</p> <p > 我是类选择器</p> <p id="w123">我是id选择器</p> <p id="w333"> 我的最高权限是id选择器</p> <p >我的最高权限是类选择器</p></body></html>层次选择器分为五种：
并集选择器：
后代选择器：
子选择器：
相邻选择器：
通用选择器：
下面给出代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>层次选择器</title> <!-- 层次选择器主要用于后代，下一代，兄弟等 --> <style> /* 后代选择器： 格式：父类 父类的后代{} 用于父类的后代所有标签内 */ ul li{ color: rgb(255, 0, 0); } /* 子选择器： 格式：父类 子类{} 仅用于父类的下一代 */ body>p{ color: aqua; } /* 相邻兄弟选择器： 格式：.class名 + 同辈标签{} 选定class的标签的相邻标签 */ .active + p { color: black; } /* 通用兄弟选择器： 格式：.class名 ~ 同辈标签{} 选定class的标签的以下所有兄弟标签 */ .allover ~ p { color: rgb(243, 255, 7); } </style></head><body> <p> <p>孙子1</p> </p> <p >儿子2</p> <p >儿子3</p> <p>儿子4</p> <p>儿子5</p> <ul> <li> <p>我是孙子辈</p> </li> <li>我是儿子辈</li> </ul></body></html>结构伪选择器主要负责有条件性的标签选择
下面直接给出代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>结构伪类选择器</title> <!-- 结构伪类选择器在实际开发中并不常用，但我们仍需了解认识 结构伪类选择器具有条件性，它有条件地选择部分内容进行CSS操作 具体结构：父类：条件{} --> <style> /* 例如我们希望在ul中的第一个和最后一个li中单独进行CSS操作 */ ul li:first-child { color: brown; } ul li:last-child { color: red; } /* 这里我们以p的父元素为父类，来选择第2个孩子 */ /* 我们可以通过nth-child（n）来选择第n个元素 */ p:nth-child(2){ color: aquamarine; } /* 这里我们以p的父元素为父类，来选择第2个p类型的孩子 */ /* 我们可以通过nth-of-type（n）来选择第n个元素 */ p:nth-of-type(2){ color: antiquewhite; } /* 同时，“：”也具有其他性质；例如a的hover属性表示当鼠标放在a上时的CSS操作 */ a:hover { background-color: black; } </style></head><body> <a href="#">123</a> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>l1</li> <li>l2</li> <li>l3</li> </ul></body></html>属性选择器是CSS3新加入的特性，极大程度方便了选择器的利用
属性选择器的格式如下：
下面给出代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性选择器</title> <!-- 属性选择器 结构分有五种，分别有不同的作用： 标签[属性名]{} 标签[属性名=属性]{} 标签[属性名*=属性]{} 标签[属性名^=属性]{} 标签[属性名$=属性]{} --> <style> /* 首先我们把下方连接都变成框框，以便于效果明显（这里后面会涉及，目前不需要深究） */ .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: #2700ff; text-align: center; color: gray; text-decoration: none; margin-right: 5px; font: bold 20px/50px Arial; } /* 以下操作为防止冲突，均以注释格式出现，请测试时去除注释 */ /* 标签[属性名]{} ：该标签内带有该属性的所有标签 .demo a[id]{ background: red; } */ /* 标签[属性名=属性]{} :该标签内带有该属性，且属性值对应的所有标签（注意：需要完全匹配） .demo a[id=w123]{ background-color: aquamarine; } .demo a[]{ background-color: black; } */ /* 标签[属性名*=属性]{}：该标签内带有该属性，且属性值对应的所有标签（注意：存在匹配即可） .demo a[class*="class1"]{ background-color: aqua; } */ /* 标签[属性名^=属性]{}:该标签内带有该属性，且以该属性开头 .demo a[href^="https"]{ background-color: red; } */ /* 标签[属性名$=属性]{}:该标签内带有该属性，且以该属性结尾 .demo a[href$="https"]{ background-color: red; } */ </style></head><body> <p > <a href="https://www.baidu.com" id="w123">1</a> <a href="https://www.taobao.com/" >2</a> <a href="#" >3</a> <a href="#" >4</a> <a href="#" id="w321">5</a> <a href="#" >6</a> <a href="#" >7</a> <a href="#" >8</a> <a href="#" >9</a> <a href="#" >10</a> </p></body></html>我们依次介绍字体样式 ：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体样式</title> <style> .divclass p{ /* 我们常用的字体样式就以下四种 */ font-family: 微软雅黑; font-size: 20px; font-weight: bold; color: brown; } </style></head><body> <!-- 这里稍微介绍一下div和span，就是简单的盒子，属于行内元素，我们常常用来规范做某些事情 --> <div > <p>123</p> <span>123</span> </div></body></html>文本样式主要是对文本进行操作，大致包括以下五种：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本样式</title> <style> /* 颜色 color 有三种形式 1.直接写英文颜色 red 等 2.以#开头，写000000~ffffff之间的颜色 3.以RBG来写 4.以RBGA来写（可写透明度） */ .class1 { /* 这里之间为大家举例（这样书写是不对的） */ color: red; color: #121212; color: rgb(0, 255, 255); color:rgba(0, 255, 255, 0.1); } /* 文本对齐 text-align 有三种情况 center 居中对齐 left 靠左对齐 right 靠右对齐 */ .class2 { text-align: center; } /* 首行缩进 text-indent 通常采用em，em表示一个文字大小，常用2em */ .class3 { text-indent: 2em; } /* 行高 text-height 行高常用来使文字位于框架垂直中心 当行高=框架高度，文字位于垂直中心 */ .class4 { background-color: #121212; height: 300px; line-height: 300px; } /* 修饰 text-decoration 可以跟 none underline line-through overline 因为超链接a自带下划线，我们常使用none去除下划线使其美观 */ a { text-decoration: none; } </style></head><body> <p >123</p> <p >123</p> <p >123</p> <p >123</p> <a href="#">我是链接</a></body></html>在CSS的超链接中会出现动态情况，所以css给出相关伪类来改变超链接各种状态下的形态
下面给出代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接伪类和阴影</title> <!-- 我们先解释一下超链接伪类 --> <style> /* 正常情况下超链接伪类是很丑的且带下划线 */ /* 首先我们对a进行修正 */ a { /* 取消下划线，修改颜色 */ text-decoration: none; color: black; } /* 我们来讲解一下a的一些伪类操作 */ /* 这里表示当鼠标触及到超链接的状态 */ a:hover{ color: yellow; } /* 这里表示当鼠标点击超链接且未松开的状态 */ a:active{ color: green; } /* 这里表示当鼠标未点击超链接的状态（可能与a发生冲突，尽量不要使用） */ /* a:link{ color:blue; } */ /* 这里表示鼠标已点击过的状态 （可能与a发生冲突，尽量不要使用）*/ /* a:visited{ color:red; } */ </style> <!-- 我们稍微介绍一下阴影 --> <style> /* text-shadow: 阴影颜色 阴影水平移动大小 阴影垂直移动大小 阴影光晕半径 （移动大小是可以写负数的） */ #price{ text-shadow: blue 10px 10px 2px; } </style></head><body> <p> <a href="#"> <img src="../../../../Resources/picture/1.jpeg" alt="纱雾老师"></a> </p> <p> <a href="#">纱雾老师</a> </p> <p> <a href="#" id="price">￥99</a> </p></body></html>input:focus选择器专用于表单input中：用来表示当点击该表单时的标签状态
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单选择器</title> <style> /* 用来表示选中该input标签时的状态 */ input:focus{ background-color: orange; } </style></head><body> <input type="text"> <input type= "button"></body></html>在css基本课程中，我们给出列表的一些简单美化步骤
下面内容稍微阅读理解即可，后面我们会给出更加美观详细的步骤
下面给出代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单列表练习</title> <!-- 与css链接 --> <link rel="stylesheet" href="ccs.css"></head><body> <!-- div是一个盒子，用来控制整体大小 --> <div id="nav"> <h2>淘宝销售</h2> <ul> <li><a href="#">女装</a> <a href="#">男装</a> <a href="#">童装</a> </li> <li><a href="#">女鞋</a> <a href="#">男鞋</a> <a href="#">童鞋</a> </li> <li><a href="#">手机</a> <a href="#">电脑</a> <a href="#">数码</a> </li> </ul> </div></body></html>/* 首先设置最上方标题 */h2{ background-color: blanchedalmond; font-size: 20px; font-weight: bold; text-indent: 2em; line-height: 35px;}/* 然后我们设置盒子大小 */#nav { width: 300px; background-color: gray;}/* 然后我们对li做出调整 */ul li{ /* 首先我们去掉前方的索引号 list-style: none 无 circle 空心圆 decimal 数字 square 方形 */ list-style: none; height: 30px; text-indent: 1em;}/* 最后我们设置a和a：hover */a { text-decoration: none; color:black; font-size: 14px;}a:hover{ color: orange;}CSS背景主要分为两部分：
我们的解释主要围绕这两部分展开：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>背景</title> <!-- --> <style> /* 背景颜色：background-color: transparent*/ /* 背景图片：background-image: none/url("图片地址") 背景图片可以选择其展示样式： background-repeat：选择是否平铺 repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺 背景图片可以选择位置： background-position：x y；选择x，y位置 x：top/center/bottom y：left/center/right 背景图片可以选择是否固定： background-attachment：选择背景图片是否固定 scroll可滚动 fixed固定 背景图片具有复合写法： background：颜色 地址 平铺 是否固定 位置 背景图片可选择透明度： background：rgba（，，，a）a是透明度 */ </style></head><body> <div id="nav"></div></body></html>关于CSS的基本知识点，我们就简单介绍到这里，后面我会逐渐更新CSS三大特性，盒子浮动等内容，请多多关注，谢谢