css属性有哪些类型

css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。

css属性有哪些类型

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css属性类型有:

一、html标签

...

文字格式化

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

……

列块容器

字体大小变化 想输入的字

字体颜色 想输入的字

字体变粗 想输入的字

字体变斜 想输入的字

字体加下划线 想输入的字

对正中央ㄉ语法

内容

对正左边ㄉ语法

内容

对正右边ㄉ语法

内容

字体删除线 想输入的字

字体设置 想输入的字

打字机字体 想输入的字

上标字 想输入的字

下标字 想输入的字

水平线


换行输入 想输入的字
想输入的字

超链接 链接地的名称

要显示的字打这里网络邮寄标签

贴图 css属性有哪些类型

跑马灯(循环) 想输入的字

外部文件导入格式标签

CSS外部导入格式:


直接引用:

javascript – 加载外部.js独立文件:


二、CSS文字属性:

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration:overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

三、CSS符号属性:

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position:outside; /*凸排*/

list-style-position:inside; /*缩进*/

四、CSS背景样式:

background-color:#F5E2EC; /*背景颜色*/

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

指定背景位置

background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

五、CSS连接属性:

a /*所有超链接*/

a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式:

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}

六、CSS框线一览表:

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc; /*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /*设置上框线top颜色*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单运用:

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单 选项1

选项2

八、CSS边界样式:

margin-top:10px; /*上边界*/

margin-right:10px; /*右边界值*/

margin-bottom:10px; /*下边界值*/

margin-left:10px; /*左边界值*/

九、CSS边框空白:

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白*/

相关教程推荐:CSS视频教程

以上就是css属性有哪些类型的详细内容,更多请关注创想鸟其它相关文章!

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
如何通过css设置背景图片全屏
上一篇 2025年12月24日 06:20:20
animate.css使用方法是什么
下一篇 2025年12月24日 06:20:33

相关推荐

  • mPDF页面分页机制解析与控制局限性

    本文深入探讨mPDF在HTML转PDF过程中处理页面分页的机制及其固有限制。我们将阐明mPDF对自动分页的控制能力有限,且不提供“孤行”或“寡行”保护,这意味着将所有内容强制输出到单一PDF页面的需求,在内容较长时,可能难以通过mPDF直接实现。 理解mPDF的页面分页核心机制 mpdf是一个强大的…

    2026年9月5日
    100
  • Flexbox布局下如何实现文字始终跟随尾行?

    巧用Flexbox实现文字尾部跟随效果 本文将深入探讨如何利用CSS Flexbox布局,实现文字始终跟随尾行的效果,并有效处理文本换行问题。 目标是在Flexbox布局下,无论文本内容多少(单行或多行),都能确保文字紧贴尾部。 文章将针对单行文本跟随和多行文本换行后的跟随效果进行详细分析。 此前,…

    2026年9月2日
    200
  • 如何用CSS绘制任意形状的圆弧线?

    利用css绘制任意形状圆弧线的技巧 许多前端开发者在CSS页面设计中,常常需要绘制各种形状,其中,创建特定形状的圆弧线是一个常见的挑战。本文将通过一个案例分析,讲解如何使用CSS实现复杂的圆弧效果。 文中探讨了使用CSS实现曲线效果的方法。 提问者尝试使用border-radius属性: img {…

    2026年8月31日
    100
  • CSS如何实现图片中所示的底部弧形边框?

    CSS打造底部弧形边框:巧妙运用border-radius 在网页设计中,创建特定形状的边框,例如图片所示的底部弧形边框,常常需要一些技巧。单纯的border-radius属性难以直接实现这种效果。本文将详细讲解如何通过CSS技巧,精确绘制出这种底部弧形边框。 许多开发者尝试使用border-rad…

    2026年8月31日
    100
  • 百度浏览器兼容模式切换 解决网页显示问题的实用指南

    兼容模式可解决百度浏览器访问老旧网站时的显示问题,通过切换至IE内核模拟渲染。2. 网页异常多因历史遗留技术与现代标准不兼容,兼容模式用Trident内核适配旧站,极速模式用Blink内核支持现代网页。3. 布局错乱、功能失效、资源无法加载等现象提示需切换兼容模式,点击地址栏右侧IE图标选择即可。 …

    2026年8月29日
    000
  • 使用 position: sticky 时,遇到失效的情况,该怎么办?

    在使用position: sticky时,遇到失效的情况,以下提供可能的原因和解决方案: 原因:被其他元素覆盖 如果sticky元素被其他元素覆盖,它将无法正确显示。例如,在给定代码中,第二个sticky元素被el-table元素覆盖,导致它似乎不起作用。 解决方案: 检查页面中是否有元素覆盖了st…

    2025年12月24日
    200
  • 移动端HTML如何强制横屏?

    移动端html如何强制横屏? 在移动端网页中强制横屏可以为用户提供更好的沉浸式体验。实现方法如下: meta标签 在html的 元素中添加以下 标签: 立即学习“前端免费学习笔记(深入)”; 这将禁用设备缩放并强制页面为横屏显示。 css属性 也可以使用css属性来强制横屏: body { -web…

    2025年12月24日
    400
  • 如何让移动端 HTML 页面强制横屏显示?

    强制移动端html横屏显示 在移动端html中强制横屏显示可以通过设置以下css属性实现: body { orientation: landscape;} 但是,需要注意的是,这个属性仅在某些浏览器中受支持,如safari和android上的chrome。在其他浏览器中,强制横屏显示可能需要额外的处…

    2025年12月24日
    800
  • 逻辑属性与旧版属性:如何根据文本方向选择合适的CSS属性?

    CSS 逻辑属性与旧版属性 CSS 中引入了逻辑属性和旧版属性的概念。这些属性负责控制页面元素的外观和布局。 逻辑属性 逻辑属性以逻辑方向命名,如左右、上下。它们根据元素在文档流中的位置来确定元素的外观。例如: 立即学习“前端免费学习笔记(深入)”; marginBlockStart:控制元素在垂直…

    2025年12月24日
    200
  • F12调试模式下不勾选的CSS属性如何设置?

    f12下不勾选的css属性如何设置? 在调试模式中遇到不勾选某项css属性的情况,需要设置未勾选的样式该怎么办? 回答 有两种解决方法: 立即学习“前端免费学习笔记(深入)”; 方法1:注释css代码 找到对应css属性的位置,将其注释掉。例如: /*p { color: red;}*/ 注释掉属性…

    2025年12月24日
    000
  • F12 中如何设置未勾选的 CSS 属性?

    f12中如何设置未勾选的css属性 在开发模式下,如何设置未勾选的css属性,例如在调试过程中发现未勾选的颜色属性后,但希望保留其样式? 解决办法: 注释掉css代码:找到对应css的代码位置,并在其前面添加注释符号(/ /),即可注释掉该属性,达到不勾选的效果。覆盖css样式:在外部样式表或内联样…

    2025年12月24日
    100
  • 如何利用混合模式实现前端盖章效果?

    前端盖章效果的实现 想要实现盖章效果,首先需要解决透明背景的问题。我们可以使用混合模式来实现。 混合模式 混合模式是一种css属性,用于控制元素如何与下面的元素混合。在盖章效果中,我们可以使用multiply混合模式,它将上面的元素与下面的元素相乘,从而创建一种叠加效果。 css 代码 立即学习“前…

    2025年12月24日
    000
  • CSS 属性查询:如何让元素成为一个空的容器?

    空的容器:css属性查询 您曾使用过一个css属性,它可以让元素成为一个没有实际空间、样式或交互性的空容器。请问您知道它的名称吗? 答案: 您指的应该是 display: contents 属性。这个属性会让元素像不存在一样,取消颜色、边框和其他样式。它甚至会让flex子元素关系跨越此层元素。 立即…

    2025年12月24日
    1100
  • 在 less 中如何使用变量来实现媒体查询的动态调整?

    less变量与媒体查询的灵活使用 在使用less变量时,若想根据屏幕尺寸动态调整某个css属性,单纯使用@media进行条件判断会失效。这是因为less变量是编译时变量,在编译后会转化为固定的css值。 解决方法之一是创建不同的变量,分别对应不同的屏幕尺寸。例如: @padding: 20px;@p…

    2025年12月24日
    300
  • CSS 中的折叠边距:初学者指南

    介绍 没有什么比应用一种样式但它没有按预期工作更令人沮丧的了。边距塌陷是一种导致意想不到的造型效果的现象。那么,什么是折叠边距以及它如何影响 css 中的边距? 利润崩溃 折叠边距源于css属性边距,它控制元素外部的间距。顾名思义,当相邻元素的边距组合或“折叠”为一个而不是相加时,就会发生折叠边距。…

    2025年12月24日
    400
  • css怎么设置底部div样式

    在CSS中设置底部div样式的方法有:固定底部:position: fixed; bottom: 0; left: 0; right: 0;相对定位:position: relative; bottom: 0;调整左右位置:left/right 属性;其他样式:height、width、backgr…

    用户投稿 2025年12月24日
    500
  • z-index是什么

    z-index 是一个 CSS 属性,用于控制元素在页面上的层叠顺序:较高 z-index 值表示元素位于更前面的层级。正整数使元素位于其父元素或兄弟元素的前面。负整数使元素位于其父元素或兄弟元素的后面。仅在包含定位的元素时起作用。嵌套元素的 z-index 值无效,除非父元素也具有定位。具有透明背…

    2025年12月24日
    000
  • css美化框怎么用

    CSS美化框是一种CSS属性,用于在网页元素周围添加边框样式,以提升视觉效果和增强页面可用性。其使用语法为:border: style width color;,其中style设置边框样式,width设置宽度,color设置颜色。美化框类型包括上边框、下边框、左边框和右边框。可以使用缩写形式bord…

    2025年12月24日
    000
  • css属性选择器怎么用

    CSS 属性选择器可根据元素的属性值选择元素,语法为“[attribute_name=”attribute_value”]”。优点包括精确、灵活和可维护性。缺点包括性能和兼容性问题。建议在需要精确选择时使用,避免在大型页面上过多使用,并考虑其他选择器以提高性能。 CSS 属性…

    2025年12月24日
    100
  • css插视频怎么插

    在 CSS 中插入视频步骤:在 HTML 中添加 元素。创建一个包含视频元素的 CSS 类。在 CSS 文件中应用样式控制视频的尺寸、位置和外观。 CSS中插入视频 在CSS中插入视频有以下几个步骤: 在HTML中添加视频元素创建一个包含视频元素的CSS类在CSS文件中应用样式来控制视频的尺寸、位置…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信