首页 > 代码库 > CSS基本语法
CSS基本语法
CSS常用选择器
1、页面中，所有的CSS代码，需要写入到<style></style>标签中。style标签的type属性应该选择text/css
2、CSS 注释
CSS修改页面中的所有标签，必须借助选择器选中。
选择器中，可以写多对CSS属性，用{}包裹：
每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔。
3、【CSS常用选择器】
①标签选择器
写法： HTML标签名{}
作用： 可以选中页面中，所有与选择器同名的HTML标签。
②类选择器(class选择器)
写法： .class名{}
调用： 在需要调用选择器样式的标签上，使用class="class名"调用选择器
优先级： >标签选择器
③ID 选择器
写法： #ID名{}
调用： 需要调用样式的标签，起一个id="ID名"
优先级： ID选择器>class选择器
注意： 一个页面中，不能出现同名ID
【Class选择器与ID选择器的区别】
写法不同:class选择器用.声明，ID选择器用#声明；
优先级不同： ID选择器>class选择器
作用范围不同： class选择器可以多次调用，ID选择器只能使用一次。
【选择器的命名规范】
只能有字母、数字、下划线、减号组成；
开头不能是数字。也不能是只有一个减号。
一般，起名要求有语义，使用英文单词与数字的组合。
④通用选择器
写法： *{}
作用： 可以选中页面中所有的HTML标签。
优先级： 最低！！！
⑤并集选择器
写法： 选择器1,选择器2,……,选择器n{}
生效规则： 多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。
⑥交集选择器
写法： 选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔
生效规则： 多个选择器取交集，则必须满足所有选择器的要求，才能生效
⑦后代选择器
写法： 选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔
生效规则： 只要满足，后一选择器是前一个选择器的后代，即可成效。（后代包括子代、孙代、重孙代。。。）
通俗的讲：只要后一个选择器，在前一个选择器里面即可。
⑧子代选择器
写法： 选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
生效规则： 必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能间隔任何标签）
如果需要两个类名，用空格分隔
导入方式和优先级
1、【优先级的权重问题】
CSS生效的第一原则是“近者优先”！即，哪个选择器作用于最里层标签，则这个选择器生效；
当选择器作用于同一层时，可以根据优先级权重，进行累加计算：
ID选择器*100 > class选择器*10 > 标签选择器*1
注意： 并集选择器，相当于多个选择器拆开写，所以，并集选择器的优先级不能累加。
当选择器作用于同一层，且优先级权重相等时。则，写在最后的选择器生效。
2、【引入CSS的三种方式】
① 行内样式表：直接在HTML标签中，使用style=""的方式引用；
<div style="height: 100px;"></div>
优点： 使用灵活，优先级权重最高？
缺点：不符合W3C关于“内容与表现分离”的要求；不利于样式复用；
② 内部样式表： 在<head></head>标签中，使用<style>标签包裹CSS代码；
特点： 一定程度的实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面共用样式。
③ 外部样式表： 将CSS单独写入CSS文件中，并与HTML文件关联。
优点： 彻底实现HTML与CSS的分离，符合W3C规范，有利于多页面复用统一样式；
[导入CSS文件的两种方式]
a、在<head>标签中，使用link链接：
<link rel="stylesheet" type="text/css"
href="http://www.mamicode.com/css/02-CSS.css" />
b、在<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文件。
css常用文本属性
1、CSS中的颜色表示方式
① 直接使用颜色的单词表示：red、green、blue
② 使用颜色的十六进制数表示：#ff0000 #f00
六位数，两两分组，分别表示红、绿、蓝的配比；
③ rgb(0~255,0~255,0~255); 三位数，分别表示红、绿、蓝的配比
rgba(); 第四位数，表示透明度。
2、【CSS常用文本属性】
a、字体、字号类：
① 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;
3、 字体颜色
① color： 字体颜色 可以使单词、十六进制、RGB等
② opacity： 透明度，可选值0-1
[opacity和RGBA的区别]
--- RGBA本身可以设置颜色，而opacity必须配合其他颜色属性来用；
---rgba仅仅是让当前元素设置的颜色透明；
---而opacity，会让当前元素里面的所有文字、背景、子元素都透明；
4、行距、对齐、其他类
① 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;
【CSS常用背景属性】
1、 background-color： 背景色
2、 background-image: 背景图。使用url("")选择背景图片。背景图和背景色同时存在时，背景图覆盖背景色。
3、 background-repeat: 背景图的重复方式。
no-repeat-不平铺、repeat-平铺、repeat-x-x轴平铺、 repeat-y-y轴平铺
4、 background-size： 背景图的大小
[指定宽度高度]
--- 宽度高度的指定，可以写px，也可以写%(父容器宽高的百分比)
--- 当写两个属性时，分别表示宽度、高度；
当写一个属性时，表示宽度，高度将会等比缩放；
[其他属性值]
---- contain: 图片等比缩放，直到宽或高中较大的一边缩放到100%为止。(可能导致较短的一边<100%,图片无法盖住全部区域)
--- cover： 图片等比缩放，直到宽或高中较小的一边缩放到100%为止。(可能导致较大的一边>100%,图片超出区域显示不全)
5、 background-position： 背景图偏移量
--- 指定位置： left/center/right top/center/bottom
当，只写一个值时 ，另一个默认居中。
--- 指定坐标： 两个属性分别表示 ：水平位移 垂直位移
① 坐标的值，可以是px单位，也可以是百分数
② 当写px单位时：
水平方向：正数右移 负数左移 ； 垂直方向： 正数下移 负数上移；
(左负右正 上负下正)
③ 当写%百分数时：
一般只能是正数。表示的是，去掉图片的宽高，剩余空白区域的分布比例。 eg：background-position:30%; 水平方向去掉图片宽度，剩余区域3:7分。
6、list-style： 修改列表小黑点的样式；
none 去掉小黑点；
7、url(): 可以使用url导入一个小图片，作为列表的标识符号
list-style: none;
8、 float: 浮动，可以实现让块级元素，在一行中显示。
[伪类选择器]
1、写法： 伪类选择器，在选择器后面，用:分隔，紧接伪类状态；
eg ： .a:link
2、 超链接的伪类状态：
:link - 未访问状态 :visited - 已访问状态
:hover - 鼠标指上状态 :active - 激活选定状态(鼠标点下未松)
注意：当超链接多种伪类状态同时存在时，必须按照link-visited-hover-active的顺序，否则会导致部分选择器不生效；
3、 input的伪类状态：
:hover :focus - 获得焦点状态 :active
注意input的多种状态同时存在时，必须按照上面的顺序；
4、 其他标签，基本只用:hover事件
【margin 外边距：】
1、只写一个值： 表示四周的外边距均为指定的值；
2、写两个值： 第一个数为上下外边距 第二个数为左右外边距；
3、写三个值： 分别表示上、右、下三个方向，左边默认等于右边；
4、写四个值： 表示上、右、下、左 四条边顺时针方向；
5、 margin:0 auto; 设置块级元素，在父容器中水平居中！！！！
【padding 内边距：】
设置方式，与margin完全相同；
注意：设置padding，将会导致div区域被撑大！！！使用时必须注意div实际的宽高为多少！！！！！
【边框】
1、设置边框需要三个属性： 宽度 样式 颜色
原则上，三个属性缺一不可，顺序可以随便修改；
2、可以使用top、right、bottom、left分别设置四个边
盒模型
1、当父盒子包裹子盒子，给子盒子添加margin-top时，子盒子与父盒子的上边线并不能分开，而是会导致两个盒子同时下来。
【解决办法】
--- 1、给父盒子添加一点padding-top;不推荐使用，会导致父盒子结构多余1px的padding
--- 2、给父盒子添加1px额border-top；同样会导致1px的多余空间，不推荐使用；
--- 3、给父盒子或者子盒子添加浮动；可能会由于浮动，一定程度的影响页面的布局；
--- 4、给父盒子添加overflow属性，推荐使用；
2、[border-radius 圆角]
-- 1、border-radius可以接受8个属性，分别表示：
X轴（左上 右上 右下 左下角）、Y轴（左上 右上 右下 左下角）
eg：border-radius:10px 20px 30px 40px/10px 20px 30px 40px
-- 2、缩写形式
只写X轴，Y轴将默认等于X轴；
四个角写不全，默认对角相等；
只写一个值，默认8个数相等；
eg：border-radius:50px 20px；
=border-radius:50px 20px/50px 20px；
=border-radius:50px 20px 50px 20px/50px 20px 50px 20px
--- 3、当圆角弧度>=正方形边长一半，将会显示为圆形；
3、[border-image 图片边框]
--- 1、border-image：一共可以放10个属性值：
①图片的路径：url（）
②图片的切片宽度：4个值，分别代表上、右、下、左四条边。
通过4条切线切割，可以将图片分为9宫格。9宫格四个角分别对应边框的四个角(不会进行任何 拉伸)，9宫格四个边分别对应四条边框（会根据设置进行拉伸/平铺/重复等操作）
注意：写的时候必须不能带px单位；
③边框的宽度:4个值，分别代表上、右、下、左4条边框的宽度；
注意：写的时候，必须带px单位，与切片宽度用/分隔；
④边框的重复方式： ：stretch（拉伸） round（铺满） repeat（重复）
[repeat与round的区别]
round：会对四条边进行适当的拉伸压缩，确保四条边可以重复整数;
repeat:会保持每条边的长度比例不变，可能导致四角处，无法显示一条完整的边；
--- 2、属性值的写法：border-image:① ②/③px ④；
--- 3、border-image在webkit内核的浏览器中，必须带-webkit-前缀；
【outline 外围线】
显示早border外面，并且不会占据空间，可能会覆盖四周的内容。
4、[box-shadow: 盒子阴影]
1/6个属性值，用空格分隔：
①X轴阴影距离（必选）：可正可负，正-右移 负-左移；
②Y轴阴影距离(必选)：可正可负，正-下移 负-上移；
③阴影模糊半径（可选）：只能为正，默认为0，数值越大，阴影越模糊；
④阴影扩展半径（可选）：可正可负，默认为0.数值增大，阴影扩大；数值减小阴影缩小；
⑤阴影颜色（可选）：默认为黑色；
⑥内外阴影（可选）：默认为外阴影。inset为内阴影；
二、浮动
1、标准流中的块级盒子，宽度将会自动伸展为100%；
而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开；
2、 当一个盒子浮动， 标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置。(浮动盒子，会盖在这个盒子的上方)
但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响。(未浮动盒子中的内容，不会被浮动盒子盖住)
3、由于第二条的原因。
可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响。
clear可选值：left-清除左浮动影响， right-清除右浮动影响；
both-同时清除左右浮动影响 ，常选；
4、 父盒子没有指定高度。 如果子盒子没有浮动，则父盒子的高度可以被子盒子撑开。
如果，父盒子中的所有子盒子都浮动，则父盒子高度将变为0；
[解决所有子盒子浮动，父盒子高度塌陷的问题]
① 给父盒子也添加浮动；
② 给父盒子添加overflow属性； 推荐使用！！！
③ 在父盒子最后，添加一个高度为0的空div。 给这个div添加clear: both;属性，清除掉浮动效果。
5、[盒子模型分类]
---1、 标准盒子(W3C盒子)： 我们设置的宽度和高度，仅仅包含content部分； 再添加padding或border，会导致盒子变大；
--- 2、 IE盒子(怪异盒子)： 我们设置的宽度和高度，包含content+padding+border； 再添加padding或border，会压缩content区域，但盒子总大小不变；
[手动设置盒子类型]
box-sizing: border-box; 怪异盒子；
box-sizing: content-box; 标准盒子； 默认效果。
CSS新增属性
一、display 属性
可以设置元素以何种状态显示，可选值：
none: 隐藏元素；
block：显示为块级元素；
inline： 显示为行级元素；
inline-block: 显示为内联块级元素。 本身将是一个行级元素，但是，拥有块级元素的所有属性。 比如宽度、高度、margin、padding等。。。
[常见的inline-block级别的标签]
<img /> <input /> <textarea></textarea> <td></td>
[隐藏一个元素的方式]
1、宽度或高度设为0px； 配合overflow:hidden; 属性
2、 display:none; 显示display:block;
3、 opacity: 0; 设为全透明。 但是元素的空间会占据；
4、 visibility: hidden; 隐藏元素，但是元素所在空间依然会占据。 与opacity: 0;效果很像；
显示visibility隐藏的元素，visibility: visible;
二、【CSS3 新增的属性前缀】
1、 -webkit- : Chrome/Safari浏览器；
2、 -moz- : 火狐浏览器；
3、 -ms- : IE浏览器；
4、 -o- : Opera 欧朋浏览器
【CSS 长度单位】
1、 px： 表示像素。长度是固定的，表示占分辨率的几个像素点；
2、 % ： 表示相对于默认值的百分比；
3、 em： 长度与元素的字号挂钩。表示几倍的字号。
4、 rem: 与根元素的字号挂钩。即，与<html>标签的font-size挂钩，如果不设置则默认字号为16px;
[em与rem区别]
em是与当前元素自身的font-size挂钩，如果当前元素没有设置，则向上查找最近的祖先元素字号，直到跟字号；
rem与当前元素字号无关，直接与根元素字号挂钩。
三、【CSS3 背景属性】
1、background-clip : 设置背景图或背景色的裁切显示区域。
>>> border-box从边框外缘开始显示；
>>> padding-box从边框内缘开始显示；
>>> content-box从文字内容区域开始显示;
>>> 如果不在显示区域的背景图或者背景色，会被裁切掉不显示；
2、 background-origin： 设置背景图从哪开始定位。
>>> border-box: 背景图左上角从边框外缘开始；
>>> padding-box: 背景图左上角从边框内缘开始；
>>> contentbox: 背景图左上角从文字内容区开始；
3、 background-origin不会改变背景图显示区域的大小，只是决定背景图的左上角从哪里开始定位；
background-clip 只负责裁切出显示区域，但是并不关心背景图定位在哪；
4、 background-attachment： 背景图的附着方式；
>>> scroll: 背景图跟随区域滚动。默认效果；
>>> fixed: 背景图充满整个区域，并且背景图是固定的，不随滚动条滚动；
5、background 缩写形式：缩写顺序
background:background-color background-image background-repeat background-atachment background-position;
transition: 过渡属性，接受四个属性值
① 设置那个CSS属性，参与过渡； 可以直接指定all/none
② 过渡多少时间完成。 通常 .3s .5s
③ 过渡的样式效果。 通常选ease；
④ 过渡延时几秒后再开始。 可以省略不写；
transition属性可以同时定义多个过渡效果，用逗号隔开。
eg:transition: width .5s ease,height 1.5s ease;
四、[transform 定义变换属性]
1、常用的变换函数：
>>> translate(10px,10px) 平移,第二个不写默认为0
常用>>> scale(1.1)（1.1表示倍数） 缩放，第二个不写，默认等于第一个
>>> rotate(90deg) 旋转，默认绕Z轴转可以使用rotateX()等
>>> skew(20deg,30deg) 扭曲，水平、垂直方向扭曲多少度；
2、transform可以同时实现多种变换，用空格分隔
eg: transform: skew(20deg) scale(1.3) translate(100px);
3、transform-origin： 定义变换起点，常用于旋转变换。
可选值： left/center/right bottom/center/top
也可以直接指定X、Y轴坐标点，第一个数为X轴；
例如：transform: rotate(90deg);
transform-origin:right bottom;
表示：绕右下角旋转90度。
定位
[相对定位position](定位只是用来调整上下层关系)
1、使用position: relative；设置元素为相对定位元素；
2、使用top、right、bottom、left调整元素的位置；
当left和right同时存在时，left生效；当top和bottom同时存在时，top生效；
3、定位机制
①相对定位不会释放掉元定位是相对于自己原来的定位。当top等属性不指定时，元素位置不会发生改变；
②相对素在原有文档流中的位置。不会影响其他文档流元素的位置；
4、定位元素的Z轴重叠：
①定位元素，默认的Z轴高于普通文档流元素；
②同为定位元素，“后来者居上”。（后面的盖住前面的）
③可以使用z-index手动调节定位元素的上下层z轴顺序；
z-index默认为0，而且只能作用于定位元素；
【绝对定位】
1、使用position: absolute；设置元素为绝对定位；
2、定位机制：
①相对于第一个非static定位的祖先元素进行定位。(相对于第一个已经进行定位的)
（即：相对于使用了relative、absolute、fixed定位的祖先元素进行定位）
②如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位；
③使用absolute的元素，会从文档流中完全删除。原有空间会被释放。
【固定定位 fixed】
1、使用position：fixed；设置固定定位；
固定定位，是一种特殊的绝对定位！！只是祖先元素无法使用定位锁住；
2、定制机制： 永远相对于浏览器的左上角进行定位，而且不随滚动条的滚动而滚动；
【z-index 属性】
1、作用：根据z-index属性设置的数值，决定元素在z轴方向上的层叠顺序；
2、使用要求：
①z-index 只能给定位元素调整层叠顺序。
relative、absolute、fixed
②元素的z-index属性，要考虑父容器z-index的约束
-----如果父容器设置了z-index属性，则子容器的所有元素，将不能脱离父容器层次的约束。（即，父容器设置了z-index，则子容器只能以父容器的数值为准。再给子容器设置z-index，只能调整子容器在父容器层次之内的层叠次序）
-----如果父容器没有设置z-index，或者设置为z-index：auto；则子容器调整z-index将不受父容器层次约束。
3、z-index：auto；和z-index：0；的异同：
①z-index：auto；是默认值，与z-index：0；处于同一平面；
②z-index：0 会约束子元素必须与父容器在同一平面；
z-index：auto不会约束子元素的层次；
[clip 属性]
1、作用：clip属性用于裁剪图片标签，显示图片的指定区域
2、使用要求：clip属性，只能用于有absolute或fixed的图片标签上
3、clip属性，接受一个rect（）函数，函数传入四个值，分别表示上、右、下、左四条切线的位置
注意：与其他属性不同的是，rect中的四个值，上、下两个值的距离都是从上边量取；左、右两个值的距离都是从左边量取
二、负边距的使用
[1、实现块级元素在父容器中水平居中]
①设置子容器为定位元素
② left：50%； margin-left：-width/2; （垂直居中）
top:50%; margin-top:-height/2 （水平居中）
2、【使用负边距增大元素的宽度】
①子容器的宽度，不指定；只指定高度、或者由内容撑开高度；
②margin: 0 -50px；可以使左右两边，均超出父容器50px；
3、负边距第二个作用的应用 解决div中多个li之间间隙的问题
CSS基本语法