css样式表的三个组成部分：1、选择器，用于告诉浏览器指定样式将作用于页面中哪些对象；2、属性，是CSS提供的设置好的样式选项，主要包括字体属性、文本属性、背景属性、布局属性等；3、属性值，是指定属性的有效值，属性与属性值间以“:”号分割。

复合选择器有7种：1、并集选择器，是多个选择器通过逗号连接而成，为多个元素定义相同CSS样式时使用；2、后代选择器，语法“E F”，可选择元素或元素组的后代；3、子元素选择器，语法“E>F”，可选择作为某元素子元素的元素；4、伪类选择器等。

引入css样式使用的标签是“<link>”。link标签用于定义文档与外部资源的关系，最常见的用途是链接外部CSS样式表，语法为“<link href="外部样式表文件路径" />”。在加载页面时，link标签引入的css样式会被同时加载。

注意点：1、浮动元素的左外边界不能超出其包含块的左内边界，右外边界亦然；2、一个浮动元素的顶端不能比其父元素的内顶端更高；3、浮动元素的顶端不能比之前浮动元素或块级元素的顶端更高；4、左浮动元素必须向左尽可能远，右浮动元素须向右尽可能远等。

在css中，margin-right的意思为“右外边距”，是用于设置元素的右边位置距离的一个外边距属性，其值允许设为负数，语法为“margin-right:边距值;”；边距值可以设置为关键字“auto”，也可是百分比的相对值，或固定边距值。

css3给盒子设置阴影的属性是“box-shadow”。该属性用于实现边框阴影效果，将阴影应用于盒子元素，语法“box-shadow:水平阴影 垂直阴影 模糊半径 扩展半径 阴影颜色 投影方式”；若投影方式设为“inset”可实现内侧阴影。

本篇文章给大家分享10个不错的CSS实用小技巧，让前端开发更轻松，快来收藏吧，希望对大家有所帮助！

五一疫情在家哪都不能去？那就来学习吧~PHP中文网给大家整理推荐一些适合新手学习的web开发基础入门教程（最新），欢迎大家在五一假期间拓展学习！

实现方法：1、利用“元素{animation:名称 时间}”语句给元素绑定动画，并设置动画所需的时间；2、利用“@keyframes 名称{100%{height:渐变高度值;}}”语句，设置高度改变的动画动作，实现渐变效果即可。

在css3中，可以利用transition属性实现元素过渡效果，该属性可以设置元素过渡效果的属性名称、过渡时间、过度速度和过渡什么时候开始，语法为“元素{transition:属性名称 时间 速度曲线 delay}”。

在css3中，可用“pointer-events”属性设置input不可编辑，该属性可定义元素是否对指针做出反应，属性值设置为none时，元素不对指针事件做出反应，也即不可编辑，语法“input{pointer-events:none}”。

在css3中，可以利用“animation-timing-function”属性设置动画旋转速度，该属性用于指定动画将如何完成一个周期，设置动画的速度曲线，语法为“元素{animation-timing-function:速度属性值;}”。

css3能让图片倾斜；可用transform属性配合skew()方法让图片倾斜，transform属性可允许对元素进行倾斜操作，skew()方法用于设置元素的倾斜转换，语法“图片元素{transform:skew(x轴角度,y轴角度)}”。

在css3中，odd和even用于在伪类选择器中作为关键字选中指定元素，odd表示奇数元素，even表示偶数元素；odd和even常与“:nth-child(n)”选择器配合使用，语法“元素:选择器(odd或even){css样式代码}”。

在css3中，media媒体查询用于针对不同的媒体类型或者设备定义不同的样式，可以针对不同的屏幕尺寸或者分辨率设置不同的样式，语法为“@media not|only 媒体类型 and (...){CSS样式代码}”。

在css3中，可用“:hover”选择器和“font-style”属性设置鼠标划过字体改变，“:hover”可设置元素在鼠标划过时的样式，“font-style”属性可设置字体样式，语法“p:hover{font-style:字体样式}”。