网页设计css样式代码大全,快来收藏吧!

减少很多不必要的代码,html+css可以很方便的进行网页的排版布局。小伙伴们收藏好哦~

网页设计css样式代码大全,快来收藏吧!

一.文本设置   

1、font-size: 字号参数 

2、font-style: 字体格式

3、font-weight: 字体粗细

4、颜色属性

立即学习“前端免费学习笔记(深入)”;

color: 参数

注意使用网页安全色

二、超链接设置   

text-decoration: 参数

主要用途是改变浏览器显示文字链接时的下划线。 

参数取值范围: 

underline:为文字加下划线 

overline:为文字加上划线 

line-through:为文字加删除线 

blink:使文字闪烁 

none:不显示上述任何效果

三、背景   

1、背景颜色

background-color: 参数

2、背景图片

background-image: url(URL)

URL就是背景图片的存放路径,none表示无。

3、背景图片重复

background-repeat: 参数

参数取值范围 :

no-repeat:不重复平铺背景图片

repeat-x:使图片只在水平方向上平铺

repeat-y:使图片只在垂直方向上平铺

如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。

4、背景图片固定

背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时转移浏览者的注意力,一般都设为固定

background-attachment: 参数

参数取值范围:

fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动

scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动

四、区块   

1、单词间距 

word-spacing: 间隔距离

2、字母间距 

letter-spacing: 字母间距

3、文本对齐

text-align: 参数

参数的取值:

left:左对齐

right:右对齐

center:居中对齐

justify:相对左右对齐

4、垂直对齐

vertical-align: 参数

top:顶对齐

bottom:底对齐

text-top:相对文本顶对齐

text-bottom:相对文本底对齐

baseline:基准线对齐

middle:中心对齐

sub:以下标的形式显示

super:以上标的形式显示

5、文本缩进

text-indent: 缩进距离

12px相当于一个文字距离

6、空格

white-space: 参数

normal 正常

pre 保留

nowrap 不换行

7、显示样式 

display: 参数

参数取值范围: 

block:块级元素,在对象前后都换行 

inline:在对象前后都不换行 

list-item:在对象前后都换行,增加了项目符号 

none:无显示

五、方框   

height 高度

width 宽度

padding 内边距

margin 外边距

float(浮动):可以让块级元素在一行中排列,例如横向菜单。 

clear 清除浮动

六、边框   

1、样式

border-style 参数

边框样式的参数:

none:无边框 

dotted:边框为点线

dashed:边框为长短线

solid:边框为实线

double:边框为双线

2、宽度

border-width:参数

3、颜色

border-color:参数

七、列表   

list-style-type:列表样式

不同浏览器的列表符可能不相同,可能会影响到网页,所以网页中的列表大多都是由背景图片显示。

控制用户界面的样式

八、鼠标

cursor:鼠标形状参数

CSS鼠标形状参数表: 

鼠标形状:CSS代码

style="cursor:hand"      手形style="cursor:crosshair"   十字形style="cursor:text"      文本形style="cursor:wait"      沙漏形style="cursor:move"     十字箭头形:style="cursor:help"      问号形style="cursor:e-resize"    右箭头形style="cursor:n-resize"    上箭头形style="cursor:nw-resize"   左上箭头形style="cursor:w-resize"    左箭头形style="cursor:s-resize"    下箭头形 style="cursor:se-resize"   右下箭头形 style="cursor:sw-resize"   左下箭头形

总结:

用常用HTML+CSS的代码做一个漂亮简单的个人网页,小伙伴来试试。

推荐学习:CSS视频教程

以上就是网页设计css样式代码大全,快来收藏吧!的详细内容,更多请关注php中文网其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1620768.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 07:15:53
下一篇 2025年12月21日 20:39:43

相关推荐

  • css怎么做半圆

    css做半圆的方法:1、使用border-radius画半圆,语句如“border-radius: 50px 50px 0 0;”;2、使用clip属性画半圆,语句如“clip: rect(0px 50px 100px 0px);”。 本文操作环境:windows7系统、HTML5&&amp…

    2025年12月24日
    000
  • css样式怎么实现超出隐藏

    css样式实现超出隐藏的方法:首先创建一个HTML示例文件;然后通过“overflow: hidden;text-overflow: ellipsis;”设置文本超出隐藏效果即可。 本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑 css样式怎么实现超…

    2025年12月24日
    000
  • css中设置下划线的方法

    css中设置下划线的方法:1、使用“text-decoration:underline;”设置下划线样式;2、使用“border-bottom”属性设置下划线样式。 本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑 css中设置下划线的方法 在CSS中…

    2025年12月24日
    000
  • css层叠性重要么

    css层叠性是很重要的。层叠是html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 不知道大家有没有想过这样一个问题,…

    2025年12月24日
    000
  • css中怎么设置标题字体大小

    css中设置标题字体大小的方法是,使用标签来定义最高等级的标题,使用标签来定义最低等级的标题,例如【这是标题 1这是标题 6】。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 在网页中我们可以直接使用 到 标签来定义标题字体的大小。下面我们来简单地介绍下这个标签…

    2025年12月24日
    000
  • css中什么是块元素

    在css中块元素又称为行元素,它支持全部的样式。如果没有设置高度,那么块元素的宽度是父级宽度的100%。块元素在盒子中占一行,即使我们设置了宽度。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 块元素,也可以称它为行元素,布局中常用的标签有: div p 立即学…

    2025年12月24日
    000
  • 什么是css预处理器

    css预处理器是一个能让我们通过预处理器自己独有的语法来生成CSS的程序。当下最流行的css预处理器有Sass、LESS、Stylus和PostCSS。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 简介: CSS 预处理器是一个能让你通过预处理器自己独有的语法…

    2025年12月24日
    000
  • css中权重是什么意思

    css中权重是一个相对的概念,它是针对某一指标而言的。某一指标的权重是指该指标在整体评价中的相对重要程度。每一个css的选择器都有一个相对的重要程度值,也就是权重的值。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 权重,是一个相对的概念,是针对某一指标而言。某…

    2025年12月24日
    000
  • css如何设置斜体

    css设置斜体的方法是,将要定义斜体的文本包含在标签中即可,例如【斜体】。标签定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 标签是专门用来定义斜体的,它可以定义与文本中其余部分不同的部分,并把这部分…

    2025年12月24日
    000
  • css怎么加滚动条

    css添加滚动条的方法是,给div添加overflow属性,并且设置属性值为scroll,如【overflow: scroll;】。overflow属性指定了内容溢出时,会发生什么。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 要添加滚动条其实很简单,有一个属…

    2025年12月24日
    000
  • 在CSS中怎么给按钮添加背景图片(详解及实例)

    这里文章可以按钮添加好看的图片,让你可以轻而易举地让页面的风格千变万化。可以用渐变背景;button的background就可以给按钮换颜色;可以利用overflow: hidden然后去掉遮罩的。 这里用top、left、right、bottom来调整高度和宽度来遮住按钮,加上上面说的渐变和透明。…

    2025年12月24日
    000
  • 老司机来和你谈谈,为什么说css是最难的!!

    之前文章给大家介绍是《在CSS中怎么给按钮添加背景图片(详解及实例)》内容是美工设计。本篇章里面说: CSS 不是科学而是美术。伙伴们来看一下。 CSS 为什么这么难学? 最近半年,我一直都没在知乎上遇到好的前端问题,而这个问题,问到我心坎上了。在过去一年的教学过程中,不断有学生尝试理性地理解 CS…

    2025年12月24日 好文分享
    000
  • 浅谈CSS如何实现九宫格提示超出数量

    本篇文章给大家介绍一下使用纯css实现九宫格提示超出数量。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 经常在某些 app 中看到这样的九宫格设计。当缩略图不足 9 张时,正常排列,当超过 9 张时,会提示还剩多少张,如下: 如何使用纯 CSS 实现这一效果呢?一起来看看吧 立即学…

    2025年12月24日 好文分享
    000
  • css 伪类有哪些

    css伪类有:“:link”、“:visited”、“:hover”、“:active”、“:focus”、“:lang()”、“not()”、“:root”、“:first-child”、“:last-child”、“:empty”等等。 本教程操作环境:windows7系统、CSS3版、Dell…

    2025年12月24日
    000
  • 给元素设置圆角半径的css属性是什么

    给元素设置圆角半径的css属性是border-radius,该属性可以设置元素的外边框圆角,只需要给指定元素添加“border-radius: 圆角值;”代码样式即可实现圆角效果。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 给元素设置圆角半…

    2025年12月24日 好文分享
    000
  • 5款实用CSS 3D特效,让你的页面更惊艳!

    本篇文章给大家分享5款实用CSS 3D特效,有的是网站开发中常用的、实用的功能,可以让你的页面更惊艳。下面我们来一起看看吧! 图像转换 与THREE.js 结合使用- 此图片幻灯片将让您的访问者惊呆了。你不能错过这一个,相信我! 演示地址:https://codepen.io/zadvorsky/p…

    2025年12月24日 好文分享
    000
  • css声明语句总是以什么结束

    CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。选择器就是需要改变样式的HTML元素;每条声明由一个属性和一个值组成,css声明语句总是以分号“;”结束,声明组以大括号“{…}”括起来。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。…

    2025年12月24日
    000
  • css怎么设置4个边框颜色不同

    在css中,可以利用border-top-color、border-bottom-color、border-left-color、border-right-color属性来分别设置上边框、下边框、左边框和右边框的颜色即可。 本教程操作环境:windows7系统、CSS3&&HTML5…

    2025年12月24日
    000
  • css精灵图怎么定位

    精灵图利用background-image,background-repeat,background-position的组合进行背景定位,background-position属性可以用数字能精确的定位出背景图片在布局盒子对象位置。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css怎么设置盒子两像素黑色边框

    在css中,可以利用border属性来设置盒子两像素黑色边框,只需要给盒子元素添加“border:2px 边框样式值 black;”或者“border:2px 边框样式值 #000000;”样式即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信