2021css常用代码大全

2021css常用代码大全

css常用代码大全

html+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:无显示

五、方框

1、height 高度

2、width 宽度

3、padding 内边距

4、margin 外边距

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

6、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”   左下箭头形

感谢大家的阅读,希望大家收益多多。

本文转自:https://blog.csdn.net/xujiuba/article/details/78926554

推荐教程:《CSS教程》

以上就是2021css常用代码大全的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2885194.html

(0)
上一篇 2025年3月10日 20:36:46
下一篇 2025年3月4日 22:41:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • css如何实现圆角内凹效果

    实现思路: (推荐教程:css快速入门) 两个并排的div,在第二个div内定义一个2倍宽高的名为item,对item进行设置border-radius: 50%,再对其进行绝对定位。 代码实现:     Title   .box { wi…

    2025年3月10日
    200
  • css如何实现蒙版效果

    重要知识点: (推荐教程:css快速入门) background-color:#fff;filter:Alpha(Opacity=60);opacity:0.6; 登录后复制 样式: .back {background:url(images…

    2025年3月10日
    200
  • css中伪类和伪元素有什么区别

    一、定义区别 (推荐教程:css快速入门) 伪类 伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素,比如 :visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比…

    2025年3月10日
    200
  • css清除浮动的原理介绍

    首先我们要知道clear:both是清除浮动的关键。 (推荐教程:css快速入门) clear是CSS中的定位属性,规定元素的哪一侧不允许其他浮动元素。那么clear:both就是规定在左右两侧均不允许浮动元素。 clear属性只能在块级元…

    2025年3月10日 编程技术
    200
  • CSS Flex 的用途详解

    一、可以利用flex来布局一个p在另一个p里面水平垂直居中 如:html代码:  登录后复制 css代码: .container{width:600px;height:400px;border:1px solid blue;display:…

    2025年3月10日
    200
  • CSS 实现三栏自适应布局

    所谓三列自适应布局指的是两边定宽,中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现。 1. 基于传统的pos…

    2025年3月10日
    200
  • css中的伪元素有什么作用

    伪元素可以用来添加一些选择器的特殊效果。 (推荐教程:css快速入门) 语法: selector:pseudo-element {property:value;} 登录后复制 举例: 1、”first-line” 伪…

    2025年3月10日
    200
  • CSS 中 @ 用法详解

    at-rule是一个声明,为CSS提供执行或怎么表现的指令。每个声明以@开头,后紧跟一个可用的关键字,这个关键字充当一个标识符,用于表示CSS该做什么。这是一个通用的语法,尽管每个at-rule有其它语法变体。 常规规则 常规规则遵循下面的…

    2025年3月10日
    200
  • 如何建立纯css的滑块

    可以使用 max-height 属性来建立纯 css 的滑块。 (推荐教程:css快速入门) 属性介绍: max-height 属性设置元素的最大高度。max-height属性不包括填充,边框,或页边距! 代码实现: 立即学习“前端免费学习…

    2025年3月10日
    200
  • CSS的三种样式形式?

    CSS的三种样式形式? 1、内联式,是把css代码直接写在现有的HTML标签中; 这里文字是红色。 登录后复制 2、嵌入式,是把css样式代码写在“style”标签之间; span{color:red;} 登录后复制 3、外联式,是把css…

    2025年3月10日
    200

发表回复

登录后才能评论