css基本语法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css基本语法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11097字，纯文字阅读大概需要16分钟。
内容图文
【W3C倡导的Web结构】
1.内容与表现分离。html与css分离。
2.内容与行为分离。html与javaScript分离。
3.html代码，必须要实现语义化。
【W3C的规范】
1.标签名和属性名称必须小写。
2.html标签必须关闭。
3.属性值必须用引号括起来。
4.标签必须正确嵌套。
①嵌套的标签，不能发生交叉
②块级标签可以包裹行级，行级标签不能包裹块级；p标签不能包裹p标签等。。
1、引入CSS的三种方式
1.行内样式表
直接在html标签中，使用是style=""的方式引用；
<
div
style
="height:100px;"
></
div
>
优点:使用灵活，优先级权重最高
缺点：不符合W3C关于“内容与表现分离”的要求，不利于样式复用；
2.内部样式表
在<head></head>标签中，使用<style>标签包裹css代码；
<
style
type
="text/css"
>
#div
{
width
:
100%
;
height
:
200px
;
background-color
:
darkgray
;
box-sizing
:
border-box
;
}
特点：一定程度的实现了html与css的分离，但是分离不够彻底，没有办法实现多页面公用样式。
3.外部样式表
将css单独写入css文件中，并于html文件关联。
优点：彻底实现html与css的分离，符合W3C规范，有利于多页面复用统一样式。
[导入css文件的两种方式]
①在<head>标签中，使用link链接：
<
link
rel
="stylesheet"
type
="text/css"
href
="css/02css.css"
/>
②在style标签中，使用@import导入：
<
@import
url（"css/02css.css"）
/>
2、CSS常用选择器
注意：
选择器的命名规范
1.只能有字母、数字、下划线、减号组成；
2.开头不能用数字。也不能只是一个减号。
一般，起名要求有语义，使用英文单词和数字组合。
标签选择器
写法：html标签名{}
div{}
作用：可以选中页面中，所有与选择器同名的html标签。
类选择器（class选择器）
写法：.class名{}
.div{}
调用:在需要调用选择器样式的标签，使用class="class名"调用选择器。
ID选择器
写法：#ID名{}
#div{}
作用：需要调用样式的标签，起一个id=“ID名”
优先级：ID选择器>class选择器
注意：一个页面中，不能出现同名ID
通用选择器
写法：*{}
*{}
作用：选中页面中所有标签。
后代选择器
写法：选择器1 选择器2 ...选择器n 选择器之间用 空格 分隔。
生效规则：只要满足，后一选择器是前一个选择器的后代，即可生效。（后代包括子代、孙代、 重孙代。。）
通俗的讲：只要后一个选择器在前一个选择器里面即可。
div .ul{}
子代选择器
写法：选择器1>选择器>...选择器n{} 选择器直间用>分隔
生效规则：必须满足，后一代选择器是前一代选择器的直接子代，才能生效（中间不能隔任何标签）
div>ul>li{}
并集选择器
写法：选择器1，选择器2，.....选择器n{}
生效规则：多个选择器取并集，只要标签满足任意一个选择器，样式即可生效。
div1,div2{}
交集选择器
写法：选择器1选择器.....2选择器n 所有选择器紧挨着，没有分隔
生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效。
.div1.li{}
伪类选择器
写法：选择器名称:伪类状态{}
.div:hover{}
常见的伪类状态：①link 未访问状态；②visited 已访问状态；③hover 鼠标指上状态；
④active 激活选定状态；⑤focus 获得焦点时状态(input常用)。
注意 ：伪类共存时的顺序必须按此顺序。
.a:link{
color: blue;
text-decoration: none;
}
.a:visited{
color: red;
text-decoration:overline;
}
.a:hover{
color: yellow;
text-decoration:underline;
}
input:focus{
}
★选择器的优先级
1 、第一原则：近者优先！最内层选择器>>>>>>>外层！！！
例如：div ul li > div #ul
li在ul内层，所以li标签选择器能覆盖外层id选择器
2 、当作用在同一层时：ID选择器>class选择器>标签选择器！！！
例如：div #li > div .li > div li
只要最后一个选择器都作用于li上，那无论之前有多少层
选择器嵌套，均没有远近关系。
3 、当作用于同一层，且最后一层为同等选择器。
例如： div ul .li > div li
作用范围越精准，则优先级更高。
4、 当优先级完全相同时，写在后面的选择器会覆盖前面的选择器 。
3、css常用文本属性
css中的颜色表示方式
①直接使用颜色的单词表示：red、green、blue
②使用颜色的十六进制数表示：#ff0000
六位数两两分组，分别表示红、绿、蓝的配比。
③rgb（0~255，0~255，0~255）；三位数分别表示红、绿、蓝的配比。
rgba（）；第四位数表示透明度。
1.字体、字号类：
① font-weight: 字体粗细
bold：加粗 、 normal：正常、lighter：细体
也可以使用100-900数值，400表示normal，700表示bold
② font-style:字体样式
italic：倾斜
③ font-size: 字体大小
可以写px单位，也可以写% 200%表示浏览器默认大小（16px）的两倍=32px
④font-family:字体系列（字体族）。
可以直接写字体名，也可以写字体系列
常用字体系列：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 initial 32px/50px "微软雅黑",serif;
2.字体颜色
① color：字体颜色 可以使 单词、16进制、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-x:scroll;overflow-y: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-表示
⑩ text-shadow:文字阴影，有四个属性值，空格分隔；
水平阴影距离，正数表示阴影右移，负数左移
垂直阴影距离，正数表示阴影下移，负数左移
阴影模糊距离，0表示阴影一点也不模糊
阴影的颜色
eg:text-shadow: 20px -10px 2px blue;
例子：
div{
width: 200px;
height: 200px;
background-color: rgba(254,227,137,1);
font: bold initial 32px/50px "微软雅黑",serif;
opacity: 0.8;
line-height: 200px;
text-align: center;
letter-spacing: ;
text-decoration:none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-indent: ;
text-shadow:2px 2px 2px blue ;
}
结果:
4、常用背景属性
1. background 缩写形式
2. background-color 背景色
3. background-image 背景图
background-image: url(路径);
背景图和背景色同时存在时，背景图会覆盖背景色。
4. background-repeat 背景图重复方式
no-reapeat最常用，不平铺
reapeat平铺（默认）
repeat-x水平平铺
repeat-y垂直平铺
5. background-size 背景图大小：
[指定宽度高度]
宽度高度的指定，可以写px，也可以写%（父容器的宽度的百分比）
当写两个属性时，分别表示宽度、高度
当写一个属性时，表示宽度、高度将会等比缩放。
宽高的写法: ①直接写像素；
②写百分比，代表父容器宽高的百分比；
[其他属性值]
contain：图片等比缩放，直到宽或高中较大的一边缩放到100%为止。
（可能导致较短一边<100%,图片无法覆盖全部区域）
cover：图片等比缩放，直到宽或高中较小的一边缩放到100%为止。
（可能导致较长一边>100%,图片超出区域显示不全）
background-position:背景图偏移量
指定位置：left/center/right top/center/bottom
当，只写一个值时，另一个默认居中
指定坐标：两个属性分别表示： 水平位移 垂直位移
① 坐标的值可以是px单位，也可以是 %
② 当写px单位时：水平方向：正数右移 负数左移；垂直方向：正数下移 负数上移；（左负右正，上负下正）
③ 当写%百分数时：
一般只能是正数。表示的是，去掉图片的宽度，剩余空白区域分布比例。
eg:background-position: 30%;水平方向去掉图片宽度，剩余区域3：7分
6.background-clip 裁切背景图和背景色显示区域。
（不再显示区域内的背景图或背景色会被裁切不显示）
从边框外缘 border-box；从边框内缘 padding-box；从文字内容 content-box
不改变定位位置，只是通过裁切显示部分区域。
7. background-origin 设置背景图的定位方式，不能改动背景色。
从边框外缘 border-box；从边框内缘 padding-box；从文字内容 content-box
不改变背景图显示区域大小，只决定左上角定位位置。
5、css盒子模型
1. 外边距：margin
缩写形式
写一个值：表示四周的外边距为指定的值。
写两个值：第一个数为上下外边距，第二个数为左右外边距。
写三个值：分别表示上、右、下三个方向，左边默认等于右边。
写四个值：表示上、右、下、左四个边顺时针方向。
margin:0 auto;设置块级元素，在父容器中水平居中！！
2. 边框：border
三个属性值，宽度width、 样式style 、颜色color 原则上不能少任何一个，顺序无影响
可以通过top/right/bottom/left分别修改四个方向
3. 内边距：padding
注意：设置padding，将会导致div区域被撑大！！！使用时必须注意div实际的区域
其他同margin，但没有0 auto的用法！！
注意：当父盒子包裹子盒子，给子盒子添加上边线margin-top时，子盒子与父盒子的上边线不能分开，而是会导致，
两个盒子同时下来。
[解决方法]
1.给父盒子添加一点padding-top； 不推荐使用，会导致父盒子结构多余1px padding。
2.给父盒子添加1px的border-top；同样会导致1px的多余空间，不推荐使用。
3.给父盒子或者子盒子添加浮动；可能会由于浮动，一定程度的影响页面的布局。
4.给父盒子添加overflow:hidden属性，推荐使用的方式。
6、css浮动
1.标准流中块级盒子宽度将会自动伸展为100%；
而浮动的块级盒子，宽度不会自动伸展，而是由内撑开；
2.当一个盒子浮动， 标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置。
(浮动盒子，会盖在这个盒子的上方)但是，未浮动盒子中的文字内容，将会受到浮动盒子宽度的影响。
(未浮动盒子中的内容，不会被浮动盒子盖住)
3.由于第二条的原因
可以给受影响的盒子，添加clear属性，清除掉浮动盒子对自身的影响。
clear可选值：left-清除左浮动影响， right-清除右浮动影响；
both-同时清除左右浮动影响 ，常选；
4.父盒子没有指定高度。如果孩子没有浮动，则父盒子的高度可以被子盒子撑开。
如果父盒子中所有的子盒子都浮动，则父盒子的高度为0.
[解决所有子盒子浮动，父盒子塌陷的问题]
① 给父盒子也添加浮动
② 给父盒子添加overflow属性，推荐使用！！！。
③在父盒子最后，添加一个高度为0的空div。 给这个div添加clear: both;属性，清除掉浮动效果。
④ 可以将第三条的div，用伪对象选择器::afyer实现；
[盒子模型分类]
1、 标准盒子(W3C盒子)： 我们设置的宽度和高度，仅仅包含content部分； 再添加padding或border，会导致盒子变大；
2、 IE盒子(怪异盒子)： 我们设置的宽度和高度，包含content+padding+border； 再添加padding或border，会压缩content区域，但盒子总大小不变；
[手动设置盒子类型]
box-sizing: border-box; 怪异盒子；
box-sizing: content-box; 标准盒子； 默认效果。
7、css定位
[相对定位relative]
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 属性，要考虑父容器z-index的约束；
如果父容器设置了z-index属性，则父容器的所有元素，将不能脱离父容器的约束。
（即，在给子容器设置z-index，则自容器只能以父容器的数值为准，再给子容器设置z-index
只能调整自容器在父容器之间层次之内的层叠次序。）
如果父容器没有设置z-index，或者设置为z-index:auto;则自容器调整z将不受父容器层次约束。
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中的四个值，上、下两个得距离都是从上边量取；左右两个的距离
都是从左边量取。
8、负边距
1、实现块级元素在父容器中水平垂直居中
① 设置子容器为定位元素；
② left: 50%; margin-left: -width/2;
top: 50%; margin-top: -height/2;
2、使用负边距增大元素的宽度
① 子容器的宽度，不指定； 只指定高度、或者由内容撑开高度；
② margin:0px -50px; 可以使左右两边，均超出父容器50px;
负边距第二个作用的应用 解决div中多个li之间间隙的问题
9、css3的新增属性
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-attachment 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) 缩放，第二个不写，默认等于第一个
>>> 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度。
css3动画的使用
1.声明一个关键帧（动画）：
@keyframes name{
from{}
to{}
}
阶段的写法：
① 可以直接用from-to的写法；
②可以设置0%-100%的写法，但开头和结尾必须是0%和100%。
2.在css选择器中，使用animation调用声明好的动画
animation缩写形式
Animation-name:动画名称，动画就是我们声明的关键帧name
Animation-duration：动画持续时间
Animation-timing-function：动画速度曲线 常选ease
Animation-delay：动画开始的时间，延迟时间
Animation-iteration-count：动画播放次数，默认为1.无线次表示infinite
Animation-direction：动画在下一个是否逆向播放，默认为normal表示不进行逆向播放，
alternate表示下一次将逆向播放（100%-0%）
Animation-fill-mode：表示动画结束后动画停留在何种状态。要使用这个属性，动画的执行次数必须是有限次。
（forwards：表示动画停留在结束状态；backwarks：表示动画停留在初始状态，默认效果。）
Animation-name和Animation-duration必须要设置，其他的选填；
Animation可以同时设置多个动画，多个动画之间用逗号隔开
Animation:frame1 1s,frame2 2s......
原文：http://www.cnblogs.com/suitongyu/p/7295126.html
内容总结
以上是互联网集市为您收集整理的css基本语法全部内容，希望文章能够帮你解决css基本语法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。