首页 > 代码库 > 第二部分----CSS的基础语法
第二部分----CSS的基础语法
PART-1 CSS的基础常识
一、什么是CSS？
W3C标准中，倡导有3：其一为内容与表现分离，其二为内容与行为分离，其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets，中文名为层叠样式表，是一种用来表现HTML等文件样式的计算机语言。
二、CSS应用的三种方式：
1. 行内样式表
行内样式表将CSS样式与HTML代码完全杂糅在一起，不符合W3C关于内容与表现分离的的基本规则，且不利于网站的维护。但是行内样式表在样式测试方面提供了便利，且优先级最高。不推荐使用。
2. 内部样式表
内部样式表在一定程度上将CSS样式与HTML代码分离，但是分离不够彻底，无法实现样式复用。（样式复用：多个网页共享同一样式。）内部样式表的优先级要低于行内样式表。
3. 外部样式表
外部样式表实现了CSS样式与HTML代码的彻底分离，方便样式复用和网站的维护，符合W3C规范。外部样式表的优先级低于内部样式表。在后续开发中，首推外部样式表。
[导入CSS文件的两种方式]
* ① 在<head>标签中，使用link链接：
* <link rel="stylesheet" type="text/css"
* href="http://www.mamicode.com/css/02-CSS.css" />
* ② 在<style>标签中，使用@import导入：
* @import url("css/02-CSS.css");
*
* [两种导入方式的区别]
* ① link属于标准的HTML标签，而@import不是标准标签；
* ② link可以兼容所有低版本浏览器，而@import只在CSS2之后能用；
* ③ link是将两个文件链接起来，起桥梁作用； 而@import相当于将CSS文件复制到HTML文件中；
* ④ link会在HTML文件边加载的过程中，边链接CSS文件；
* @import会在HTML文件全部加载完以后，再导入CSS文件；
*
* 综上所述，我们使用link链接的方式，加载CSS文件。
4. 注意
①除行内样式表，内部样式表与外部样式表的链接均写于HTML的HEAD部分中。
②导入外部样式表时，除type属性可选写外，rel与href属性必须出现。
PART-2 CSS的常用选择器
1. 选择器的命名规则
①只能由字母、数字、下划线组成，不能有任何特殊字符；
②开头不能是数字，只能由下划线或者字母开头。
2. 常用选择器
2.1 标签选择器
写法：HTML标签名{}
作用：选中页面中所有的对应标签。
2.3 Class选择器
写法：.选择器名称{}
作用：需要改变样式的标签上使用class="选择器名称"来调用对应选择器。
2.4 Id选择器
写法：#选择器名称{}
作用：需要改变样式的标签上使用id="选择器名称"来调用对应选择器。
2.5 通用选择器
写法：*{}
作用：选中页面中所有标签。
2.6 后代选择器
写法：选择器1 选择器2 选择器3...{}
作用：比如说 div .li{}就表示满足div里面的class="li"的元素样式，其中选择器之间允许隔代。
生效规则： 只要满足，后一选择器是前一个选择器的后代，即可成效。（后代包括子代、孙代、重孙代。。。）
*
* 通俗的讲：只要后一个选择器，在前一个选择器里面即可。
2.7 子代选择器
写法：选择器1>选择器2>选择器3...{}
作用：用法大致与后代选择器相同，但要注意的是，选择器之间不允许隔代。
2.8 并集选择器
写法：选择器1,选择器2,选择器3...{}
作用：比如说 .li,#li{} 表示具备class="li"或者id="li"的形式便可生效，相当于数学逻辑中的“或”。
生效规则： 多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
2.9 交集选择器
写法：选择器1选择器2选择器3...{}
作用：比如 .li,#li{} 表示必须同时具备class="li"和id="li"的形式可生效，相当于数学逻辑中的“且”。
生效规则： 多个选择器取交集，则必须满足所有选择器的要求，才能生效
2.10 伪类选择器
写法：选择器名称:伪类状态{}
常见的伪类状态：①link 未访问状态；②visited 已访问状态；③hover 鼠标指上状态；
④active 激活选定状态；⑤focus 获得焦点时状态(input常用)。
超链接多种伪类共存时的顺序： link/visited→visited/link→hover→active
3. 选择器的优先级
3.1 第一原则：近者优先！最内层选择器>>>>>>>外层！！！
例如：div ul li > div #ul
li在ul内层，所以li标签选择器能覆盖外层id选择器
3.2 当作用在同一层时：ID选择器>class选择器>标签选择器！！！
例如：div #li > div .li > div li
只要最后一个选择器都作用于li上，那无论之前有多少层
选择器嵌套，均没有远近关系。
3.3 当作用于同一层，且最后一层为同等选择器。
例如： div ul .li > div li
作用范围越精准，则优先级更高。
3.4 当优先级完全相同时，写在后面的选择器会覆盖前面的选择器 。
PART-3 CSS的属性单位
1. 长度单位：像素px，在某些情况下可以使用百分比。
2. 颜色：
2.1 十六进制写法：#XXXXXX （X：1-F）。
2.2 颜色的英文名称。
2.3 RGB写法：(0-255,0-255,0-255) 三者由前到后分别对应红、绿、蓝三种颜色的比例。
2.4 RGBA写法：(0-255,0-255,0-255、0-1) 前三者同RGB写法，最后为透明度，此透明度 只会使当前控件变透明，并不会影响其子控件。
PART-4 CSS的常用文本属性
1、 字体、字号类：
* ① font-weight： 字体粗细。 bold-加粗、normal-正常、lighter-细体
* 也可以使用100-900数值，400表示normal，700表示bold
*
* ② font-style: 字体样式。 italic-倾斜、normal-正常
*
* ③ font-size: 字号。 可以写px单位，也可以写%
* 200%表示浏览器默认大小(16px)的两倍=32px
*
* ④ font-family: 字体系列(字体族)。
* >>> 可以直接写字体名，也可以写字体系列名。
* >>> 常用字体系列：serif-衬线体 sans-serif-非衬线体；
* >>> font-family可以接收多个值，用逗号分隔。表示优先使用第一个，如果没有这个字体，依次向后使用。 通常，最后一个值放字体系列名；
* eg: font-family: "黑体","微软雅黑",sans-serif;
*
* ⑤ font缩写形式：
* >>> 顺序必须是：
* font-weight font-style font-size/line-height font-family
* >>> 不同属性之间，用空格分隔；
* >>> font-size/line-height必须一组，用/分隔；
* >>> font-family多个字体之间，用逗号分隔
* >>> eg： font: bold italic 32px/50px "微软雅黑",serif;
*
* 2、 字体颜色
* ① color： 字体颜色 可以使单词、十六进制、RGB等
*
* ② opacity： 透明度，可选值0-1
* [opacity和RGBA的区别]（重点）
* >>> RGBA本身可以设置颜色，而opacity必须配合其他颜色属性来用；
* >>> rgba仅仅是让当前元素设置的颜色透明；
* 而opacity，会让当前元素里面的所有文字、背景、子元素都透明；
*
*
* 3、行距、对齐、其他类
* ① line-height: 行高。 可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)
*
>>> 行高重要作用： 让单行文字在div中垂直居中？
* 设置行高等于div的高度，即可让单行文字垂直居中。
*
* ② text-align：设置区域内的行级元素水平对齐方式left/center/right
*
* ③ letter-spacing： 字符间距，字与字之间的距离
*
* ④ text-decoration: 文本修饰；
* underline-下划线、overline-上划线、line-through-删除线、none-去下划线
*
* ⑤ overflow： 设置超出区域文字的显示方式。
* >>> overflow: hidden; 超出区域的文字隐藏不显示；
* >>> overflow: scroll; 无论文字多少，都会显示水平垂直滚动条
* >>> overflow: auto; 自动。文字多显示滚动条，文字少，不显示滚动条。
* >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
* overflow-y: scroll; overflow-x: hidden;
*
* ⑥ text-overflow：设置行末多余文字的显示方式；
* >>> clip-多余文字裁剪掉（默认效果） ellipsis-多余文字省略号显示
* >>> 显示省略号，需要配合white-space: nowrap;使用
* >>> 【重点】 设置行末显示省略号(三行代码，缺一不可)
* overflow: hidden;
* white-space: nowrap;
* text-overflow: ellipsis;
*
* ⑦ white-space: nowrap; 设置中文行末，不断行显示
*
* ⑧ text-indent: 首行缩进。
*
* ⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
* -webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari
*
* ⑩ text-shadow: 文字阴影，有四个属性值，空格分隔；
* >>> 水平阴影距离，正数表示阴影右移，负数左移；
* >>> 垂直阴影距离，正数表示阴影下移，负数上移；
* >>> 阴影模糊距离， 0表示阴影一点不模糊；
* >>> 阴影的颜色；
* >>> eg:text-shadow: 20px -10px 2px blue;
* 文字加空格
以下举例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS常用文本属性</title> <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: rgb(177,0,0); font-weight: 900px; font-style: italic; font-size:50px ; color: #CCCCCC; opacity: 0.7; line-height: 100px; letter-spacing: 10px; text-decoration: line-through; overflow: hidden; text-shadow: 1px 1px 20px green; text-indent: 20px; -webkit-text-stroke: 1px red; white-space: nowrap; text-overflow: ellipsis; /*font:italic bold 75%/1.8 ‘Microsoft Yahei‘,sans-serif；*/ } </style> </head> <body> <div class="div1"> 嘿嘿嘿 <br />哈哈哈哈哈 </div> </body> </html>
效果图如下：
PART-5 CSS的常用背景属性
第二部分----CSS的基础语法