![](https://img-blog.csdnimg.cn/20190918140053667.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 80
CSS 的基本用法
菇毒
这个作者很懒,什么都没留下…
展开
-
CSS 3 之多列布局(二)
属性值相同,包括none、hidden、dotted、dashed、solid、double、groove、ridge、insert、ouset;多列布局中,可根据内容和喜好不同,调整多列布局中列与列之间的距离,从而完成整体版式规划;边框是样式属性中重要的属性之一,通诺边框能容易地界定边框内容,从而划分为不同的区域;在多列布局中,也能设置多列布局的边框,用来区分不同的列数;属性定义,包括边框宽度、边框颜色和边框样式等等;属性用于定义边框颜色,颜色值支持所有颜色值;属性定义边框样式,属性值和。...原创 2022-07-17 17:29:48 · 423 阅读 · 0 评论 -
CSS3 之 多列布局
是由浮点数和单位标识符组成的长度值,不可为负值;auto根据浏览器计算自动设置;属性定义多列布局中每列的宽度,可单独使用,也能和其他多列布局属性组合使用;表示值是一个整数,用来定义栏目的列数,取值大于0的整数,不可以为。属性能指定多列布局的列数,不需要通过列宽度自动调整列数;auto属性值表示根据浏览器计算值自动设置;...原创 2022-07-16 21:27:18 · 520 阅读 · 0 评论 -
盒子模型与元素定位
块1的position属性值为relative,块1现在是相对于页面的相对定位(即在其默认显示的位置上,通过上下左右四个参数设置偏移一定的距离,仅仅是显示出来的效果偏移了,但它实际还占用着原来的位置);定位是指定块的位置,即块相对于其父块的位置和相对于它自身应该在的位置;,当设置元素向右向左浮动时,元素回向父元素的左侧或右侧靠近;属性时,该值便能设置各块之间的重叠高低关系;,z-index值大的页面位于其值小的上方;/*高低值-1*//*高低值0*//*高低值1*/...原创 2022-07-14 21:40:40 · 380 阅读 · 0 评论 -
图片与文字翻转效果
@toc在网页设计的过程中,有时候需要对文字或图形进行翻转;下面介绍几种翻转的方法:rotateY 输入能让图片或文字水平镜像翻转;例子1:使用 rotateY 属性翻转文字和图片rotateX 属性能让文字或图片垂直镜像翻转;例子2:和 的 属性都能对文字或图片进行水平镜像翻转; 属性参数必须是 负数,否则不能完成翻转;参数数字越大翻转后图形或文字就会增大多少;例子 3: 如上的水平镜像翻转的使用方法类似;例子 4:注意: 镜像翻转以轴为镜像,普通旋转以点为镜像;......原创 2022-07-13 23:50:57 · 1325 阅读 · 0 评论 -
CSS 3之模糊与透明色背景
blue 滤镜能实现页面模糊效果,即在一个方向上的运动模糊;语法格式如下所示:radius 参数表示接单单个参数半径,该参数半径以长度形式保存模糊半径;例子 1:原创 2022-07-06 08:00:00 · 1363 阅读 · 0 评论 -
CSS 3之 CSS 滤镜
CSS 滤镜是IE浏览器厂商为了增加浏览器功能和竞争力,而推出的一种网页特效;CSS 滤镜不是浏览器插件,也不符合 CSS 标准;从 Interne Explorer 4.0 开始,浏览器就开始支持多媒体滤镜特效,允许使用简单代码对文本和图片进行处理,如模糊、火焰特效、彩色投影、色彩渐变等;当把滤镜和渐变结合到网页脚本中时,就能建立一个动态交互的网页;CSS 滤镜属性的标识符是 ;语法格式如下所示:filtername 是滤镜的名称,如 alpha、blur、chroma、dropshadow原创 2022-07-05 08:00:00 · 550 阅读 · 0 评论 -
CSS 3之超链接特效
通过使用伪类能对超链接进行修饰;伪类是一种特殊的选择符,能被浏览器自动识别;最大的用处是在不同状态下能对超链接定义不同的样式效果,是 CSS 3本身定义的一种类;例子 1:例子 2:给超链接加入提示内容将图片作为背景图添加到超链接中,这样超链接能有更加精美的效果;使用 属性来实现;例子 2:例子 3:...原创 2022-07-04 08:00:00 · 1343 阅读 · 0 评论 -
CSS 3之鼠标特效
使用 属性(鼠标指针属性)能实现对鼠标样式的控制;例子 1:HTML 鼠标样式效果例子2:鼠标放在超链接上,能看到超链接的颜色、背景图片发生变换,且鼠标样式变化原创 2022-07-02 11:44:45 · 882 阅读 · 0 评论 -
CSS 3之菜单的横竖转换
在设计网页时,不但能创建垂直导航菜单,也能创建水平导航菜单;例子1:垂直菜单效果水平效果设置超链接样式例子2:原创 2022-07-01 22:26:25 · 1032 阅读 · 0 评论 -
CSS 3之美化菜单(二)
有序或无序列表能通过 改变项目前的特殊符号,还能使用 属性将每项前面的项目符号替换成任意的图片;属性能定义有序和无序列表项标志的内容;图像相对于列表项内容的放置位置,通常使用 属性控制;语法格式如下所示:none 表示不指定图像,url 表示使用绝对路径和相对路径指定背景图像;例子 1:属性能设置图片显示位置,当使用图片作为列表符号时,图片通常显示在列表的外部,实际上还能将图片列表中的文本信息进行对其,从而显示另一种效果;语法格式如下所示:例子 2:...原创 2022-06-30 21:33:30 · 273 阅读 · 0 评论 -
CSS 3之美化菜单
无序列表是网页中常见的元素之一,会用 标记罗列哥哥项目,且每个项目前都带有特殊符号;使用 属性来定义无序列表的项目符号;无序列表的 语法格式如下所示:例子 1:有序类别标记能创建具有顺序的列表;使用 属性,能改变有序列表前面的符号;有序列表的 语法格式如下所示:例子 2:...原创 2022-06-30 16:04:25 · 298 阅读 · 0 评论 -
CSS 3之美化表格样式(二)
在定义表单元素边框时,可采用 、 和 及其衍生属性;若要对表单元素设置背景色,可采用 属性,其中将值设置为 (透明色)是最常用的一种方式;代码如下所示:例子 1:原创 2022-06-29 22:08:19 · 1383 阅读 · 0 评论 -
CSS 3之美化表格样式
使用属性定义表单元素背景色;例子1:原创 2022-06-27 21:36:21 · 1832 阅读 · 0 评论 -
CSS 3之 表格
在显示一个表格数据时,通常都带有表格边框,用来界定不同单元格的数据;当表格的描述标记值大于0时,显示边框;若值为0,则不显示边框;边框显示时,可用属性及衍生属性,以及属性对边框进行修饰,属性表示对边框进行样式、颜色和宽度设置,以达到提高样式效果的目的;属性主要用设置表格的边框是否合并为一个单一的边框,像在标准的 HTML 中那样分开显示;语法格式如下所示: 是默认值,表示边框会被分开,不会忽略 和 属性;而 属性表示边框会合并为一个单一的边框,会忽略 和 属性;例子 1:使用 属原创 2022-06-25 20:37:15 · 768 阅读 · 0 评论 -
CSS 3之背景属性
使用 属性,能设置背景图片大小;语法格式如下所示:例子 1: 属性能设置一个或多个值,一个为必填,一个为选填;第一个值指定图片宽度,第二个值指定图片高度;若只设定一个值,则第二个值默认为auto;使用 属性,能完成背景图片的定位;默认情况下, 属性总是以元素左上角原点作为背景图片定位,适应 属性能改变这种定位方式;语法格式如下所示:例子 2:使用 属性,能裁剪背景图片;语法格式如下所示:例子 3::...原创 2022-06-23 08:00:00 · 270 阅读 · 0 评论 -
CSS 3之背景图片(二)
若网页的文本较多,出现了多屏页面,此时背景图片若不能覆盖页面,就会出现看不到背景图片的现象;使用 属性,用来设定背景图片是否随文档一起滚动; 属性包含了两个属性值:,适用于所有元素;例子 1: 属性的值为时,背景图片的位置固定并不是相对于页面的,而是相对于页面的可视范围;使用 属性,设置的重复方式,包括水平重复、垂直重复与不重复等 属性用于设定背景图片师傅重复平铺;例子 2:背景图片垂直重复...原创 2022-06-22 08:00:00 · 194 阅读 · 0 评论 -
CSS 3之背景图片
使用 属性能设定标记的背景图片,在 中使用,将图片置于整个主体中;语法格式如下所示:默认属性时无背景图,当要使用背景图时可用 进行导入; 可以使用绝对路径或相对路径;例子 1:使用 属性能调整背景图片位置; 属性用于指定背景图片在页面中所处的位置;该属性值能分为4类:绝对定义位置(length)、百分比定义位置(percentage)、垂直对齐值与水平对齐值;垂直对齐值包括,水平对齐值包括;例子 2:使用垂直对齐值和水平对齐值只能格式化地放置图片;若页面中要自由地定义图片的位置,需要原创 2022-06-21 08:00:00 · 718 阅读 · 0 评论 -
CSS 3之网页背景颜色
使用 属性设定网页背景颜色;对于没有设定背景色的标记,默认背景颜色为透明(tranaparent);语法格式如下所示: 是默认值,表示透明;背景颜色 color 设定方法能采用英文单词、十六进制、RGB、HSL、HSLA、GRBA 来决定颜色;例子1: 不仅能设定整个网页的背景颜色,还能设置指定 HTML 元素的背景色;例子 2:...原创 2022-06-20 08:00:00 · 1405 阅读 · 0 评论 -
CSS 3之图文混排效果
用 属性能设计图片和文字之间的距离,即文字与图片之间在一定间距; 属性主要用来在一个声明中设置所有内边距属性,即能设置元素所有内边距的宽度,或设置各边上内边距的宽度;注意: 不允许指定负边距值;语法格式如下所示:参数说明:例子 1:使用 属性能实现文字环绕效果; 属性主要定义元素在哪个方向浮动;一般应用于图像,使文本环绕在图像周围,也能定义其他元素浮动;浮动元素会生成一个块级框,不论它本身是何种元素;若浮动元素非替换元素,则要指定一个明确的值;否则,他们尽可能地窄;语法格式如下所示:原创 2022-06-18 12:09:03 · 4729 阅读 · 0 评论 -
CSS 3之图片对齐方式
图片横向对齐,即水平方向向上进行对齐;对齐样式与文字对齐,都有 3 种对齐方式,分别为左、中、右;若要定义图片对齐方式,不能在样式表中直接定义图片样式,需要在图片的上一个标记级别,即父标签级别定义对齐方式,让图片继承父标记的对齐方式;这是因为 (图片)本身没有对齐属性,需要使用 CSS 继承父标记的 来定义对齐方式;例子 1:纵向对齐,即垂直对齐,在垂直方向上和文字进行搭配使用;通过对图片垂直方向上的设置,能设定图片和文字高度一致;使用 属性定义图片纵向对齐; 属性设置元素的垂直对齐方式,即原创 2022-06-18 09:59:06 · 9661 阅读 · 0 评论 -
CSS 3之设置图片边框
通过 中的 让图片是否具有边框;示例如下:通过 HTML 标记设置图片边框,其边框显示都是黑色,且风格单一,唯一能够设定的就是边框的粗细,不能对边框的样式进行设置;使用 属性定义边框样式,即边框风格(点线式-dotted、破折式边框-dashed、直线式边框-solid、双线式边框-double等);例子 1:若需要单独定义边框一边的样式,可使用 设定上边框样式、 设定右边框样式、 设定下边框样式、 设定左边框样式;例子 2:...原创 2022-06-17 18:04:58 · 7885 阅读 · 0 评论 -
CSS 3之图片缩放
使用 的描述标记 和 能设置图片大小; 和 分别表示图片的高度和宽度,可以是数值或百分比,单位可以用 px,也可以是**%、em、pt**;注意: 高度属性是和宽度属性 设置要求相同;例子1:CSS 3 中,可使用属性 和 设置图片的宽度和高度,以此达到图片的缩放效果;例子 2:CSS 3 中, 和 用来设置图片宽度最大值和高度最大值; 和 的值一般是数值类型;语法格式如下所示:或在定义图片大小时,若图片默认尺寸超过了定义的大小,就以 所定义的宽度显示,二图片高度将同比例原创 2022-06-16 22:11:36 · 8805 阅读 · 1 评论 -
CSS 3之段落文字(二)
文字垂直居中称为文字顶部对齐或底部对齐; 属性,该属性用来定义垂直对齐方式;该属性定义行内元素的基线相对于该元素所在的基线的垂直对齐,允许指定负长度值和百分比值,这会让元素降低而不是升高;在单元格中,这个属性会设置单元格框中的单元格内容的对齐方式;语法格式如下所示:例子 1:在段落中,通常用首行缩进两个字符表示这是一个段落的开始;通过 属性能设定文本块的首行缩进;语法格式如下所示: 属性表示有百分比数字或由浮点数字和单位标识符组成的长度值,允许为负值; 属性可看成能定义两种缩进方式,一原创 2022-06-14 08:00:00 · 372 阅读 · 0 评论 -
CSS 3之段落文字
属性能设置字符文本之间的距离,即在文本字符之间插入多少空间,允许负值,即让字母之间更加紧凑;语法格式如下:例子 1:单词之间的间隔若设置合理,一是会给整个网络布局节省空间,二是能给人赏心悦目的感觉,提高阅读效果;使用 属性直接定义指定区域或段落中单词之间的间隔; 属性用于设定词与词之间的间距,即增加或减少词与词之间的间隔;语法格式如下:例子 2:通过 属性,可设置多种对齐; 属性用于定义对象文本的对齐方式;语法格式如下:例子 3:...原创 2022-06-12 14:42:21 · 466 阅读 · 0 评论 -
CSS 3之 文本样式(三)
在网页显示信息时,若指定显示区域宽度,而显示的信息过长,其结果就是信息会撑破指定的信息区域,进而破坏整个网页布局;若设定的显示区域过长,就会影响整体的网页显示;使用 属性能解决上述问题;属性用来定义文本溢出时显示省略标记,即定义省略文本的出来方式;它不具备其他的样式属性定义,要实现溢出时产生省略号的效果还需要定义强制文本在一行内显示()及溢出内容为隐藏(),只有这样才能实现溢出文本显示省略号的效果;语法格式如下:例子 1:当在一个指定区域显示一整行文字时,若文字在一行显示不完时,就需要换行;原创 2022-06-11 22:58:17 · 191 阅读 · 3 评论 -
CSS 3 之文字样式(二)
通过设置字体主粗细,能让文字显示不同的外观; 属性能定义字体的粗细程度;语法格式如下所示:属性有 13 个有效值,分别是bold、bolder、lighter、normal、100~900;若没有设置该属性,则使用默认值 normal;属性值设置为 100~900,值越大,加粗的程度就越高;例子 1: 用来定义文字风格,即字体显示的样式;语法格式如下:例子 2:显示字体时,有时需要给文字添加阴影效果,并且为阴影添加颜色;需要用到 属性,该属性还具有不透明度效果;语法格式如下:原创 2022-06-11 16:16:00 · 255 阅读 · 0 评论 -
CSS 3之文字样式
在 css 样式中,多使用 color属性定义颜色;例子1 :# 2. 定义文字的字体 属性用于指定文字字体类型,即在网页中展示字体不同的形状;语法如下所示:有两种声明方式;第一种为使用 name字体名称,按优先顺序排列,以逗号隔开,若字体名称包含空格,则应使用引号括起;第二种声明方式使用所列出的字体序列名称,若使用 fantasy序列,将提供默认字体序列;CSS 3 中常使用使用第一种声明方式;例子2:注意: 在字体显示时,若指定一种特殊字体类型,而在浏览器或操作系统中该类型不能正确获原创 2022-06-10 22:33:44 · 380 阅读 · 0 评论 -
CSS 3之继承
HTML 网页可看成一个节点的集合,在一个HTML 文档中能包含不同的标记,HTML 文档中的每个成分都是一个节点;一个节点数中的所有节点彼此都是由关系的;一个节点树能把一个 HTML 文档展示为一个节点集,以及它们之间的连接;在一个节点树中,最顶端的节点被称为根;每一个节点,除根之外,都拥有父节点;一个节点能有无数的子,叶是无子的节点,同级节点拥有相同的父的节点,如下图所示;CSS 继承是指子标记会继承父标记的所有样式风格,并能在父标记样式风格的基础上加以修改,产生新的样式,而子标记样式完全不原创 2022-06-10 17:41:35 · 272 阅读 · 0 评论 -
CSS 之选择器声明
集体声明就是在声明各种CSS选择器时,若某些选择器的风格完全相同,或者部分相同,可将风格向提供的 CSS 选择器同时声明;例子1:在 CSS 控制 HTML 标记样式时,还能使用层层递进的方式,即嵌套方式,对指定位置的 HTML 标记进行修饰;例子 2:...原创 2022-06-05 15:45:38 · 563 阅读 · 0 评论 -
CSS 之CSS3 选择器
标签选择器最基本的形态如下:通过一个具体标记来命名,能对文档里这个标记出现的每一个地方应用样式定义。例子 1:在一个页面,使用标签选择器会控制该页面中所有此标记的显示样式;若需要为此类标记中的一个标记重新设定,仅使用标签选择器是不能达到效果的,还要使用类别(class)选择器;类选择器用来为一系列标记定义相同的呈现方式,语法格式如下: 是选择器的名称,若一个标记具有 class 属性且 class 属性为 ,那么该标记的呈现样式由该选择器指定;在定义类选择符时,需要在 classValue 前面原创 2022-06-03 16:57:07 · 534 阅读 · 0 评论 -
CSS 之样式表的用法(三)
样式表的用法(三)1. UI 元素状态伪类选择器1. UI 元素状态伪类选择器UI元素状态伪类也是 css3 新增的选择器,UI 即 User Interface(用户界面)的简称;UI 设计则是指对软件的人机交互、逻辑操作、界面美观的整体设计;UI 元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等,css3 定义了 3 种常用的状态伪类选择器;例子1:使用 UI 元素状态伪类选择器的示例<!DOCTYPE html><html> <原创 2022-06-01 08:00:00 · 129 阅读 · 0 评论 -
CSS 之样式表的用法(三)
样式表的用法(三)1. UI 元素状态伪类选择器1. UI 元素状态伪类选择器UI元素状态伪类也是 css3 新增的选择器,UI 即 User Interface(用户界面)的简称;UI 设计则是指对软件的人机交互、逻辑操作、界面美观的整体设计;UI 元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等,css3 定义了 3 种常用的状态伪类选择器;例子1:使用 UI 元素状态伪类选择器的示例<!DOCTYPE html><html> <原创 2022-05-31 08:00:00 · 126 阅读 · 0 评论 -
CSS 之样式表的用法(二)
样式表的用法1. 属性选择器2. 结构伪类选择器1. 属性选择器不通过标记名称或自定义名称,通过直接标记属性来修饰网页,直接使用属性控制 HTML 标记样式,称为属性选择器;属性选择器即根据某个属性是覅存在或属性值来寻找元素,因此能够实现某些非常有意思和强大的效果;在 css2 中已经出现了属性选择器,但 css3 中有新增了 3 个属性选择器,即现在 css3 中有 7 个属性选择器,共同构成 css 功能强大的标识属性过滤体系;例子 1:使用属性选择的示例<!DOCTYPE html&原创 2022-05-30 08:00:00 · 302 阅读 · 0 评论 -
CSS 之样式表的用法(一)
样式表的用法1. 在 HTML 中插入样式表2. 单独的链接 css 文件1. 在 HTML 中插入样式表可以直接把 css 代码添加到 html 的标记中,即作为 HTML 标记的属性标记存在;这样能很简单地对某个元素单独定义样式;例子 1:使用 css 的实例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>在HTML中插入样式表</title>原创 2022-05-26 21:12:14 · 789 阅读 · 1 评论