css复合样式怎么做

css复合样式的写法是通过空格的方式实现的;复合写法有的是不需要关心顺序,例如“background、border”;有的是需要关心顺序,例如“font”。

css复合样式怎么做

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

CSS复合样式

一个CSS属性只控制一种样式,叫做单一样式。

一个CSS属性控制多种样式,叫做复合样式。

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

复合样式

复合的写法,是通过空格的方式实现的。复合写法有的是不需要关心顺序,例如background、border;有的是需要关心顺序,例如font。

1、backgroud :red url() repeat 0 0;2、border:1px red solid;3、font:

注:最少需要两个值:size family

weight style size familystyle weight size familyweight style size/line-height family

注:尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式。

推荐:《css视频教程》

实践

        CSS复合样式            div {            width: 300px;            height: 300px;            background: greenyellow url("img/gougou.jpg") no-repeat center center;            border: dashed 2px blue;            font:  bold italic 30px/50px 宋体;        }    
MW

效果图

a6be0f5f49c78b53fe31406ba36e5e0.png

以上就是css复合样式怎么做的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:59:10
下一篇 2025年12月24日 05:59:28

相关推荐

  • css 怎么去掉按钮样式

    css去掉按钮样式的方法:首先打开查看按钮样式的css代码;然后通过“border: none;outline: none;”属性去除边框以及消除默认点击蓝色边框效果即可。 本文操作环境:windows7系统、css3版,DELL G3电脑。 浏览器为我们提供的按钮样式,只能说是够用,它不够美观,在…

    2025年12月24日 好文分享
    000
  • css里的rgb怎么用

    css里rgb的使用方法:首先创建一个HTML代码示例文件;然后通过rgb语法“rgb(red, green, blue)”来生成各式各样的颜色即可。 本文操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑。 rgb是什么意思? RGB:一种色彩模式 ,是工…

    2025年12月24日 好文分享
    000
  • css选择器怎么选取第几个元素

    css选择器选取第几个元素的方法:1、使用“first-child”选择器选取属于其父元素的首个子元素;2、使用“last-child”选择列表中的最后一个标签;3、使用“nth-child(3)”选择第3个标签等等。 本文操作环境:windows7系统、HTML5&&CSS3版本、…

    2025年12月24日
    000
  • css 不规则边框怎么设置

    css不规则边框的设置方法:首先创建一个HTML示例文件;然后通过“border-image: url(border.png) 30 stretch;”属性设置不规则边框即可。 本文操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。 css如何设置不规则…

    2025年12月24日
    000
  • 如何复制网页css

    复制网页css的方法:首先找到想要复制的网站;然后按f12或者右击“检查”;接着查看查询层,并找到css样式表;最后全选样式表复制,并将css样式复制到新建的css文件中即可。 本文操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。 做网站的人想复制网站…

    2025年12月24日 好文分享
    000
  • css中什么是内联元素

    css中的内联元素也称为行内元素;内联元素包括布局中常用的标签如a、span、em、b、strong、i等;内联元素和它的兄弟元素之间一个挨着一个,并且都在同一行按从左至右的顺序显示,不单独占一行。 本文操作环境:windows7系统、css3版本、Dell G3电脑。 1、什么是内联元素? 内联元…

    2025年12月24日
    000
  • css如何让字体下沉

    css让字体下沉的方法:首先创建一个HTML示例文件;然后使用伪元素“::first-letter”选中一段文本的首字;接着使用“font-size”属性设置首字大小;最后通过float属性实现下沉效果即可。 本文操作环境:windows7系统、HTML5&&CSS3版本、Dell …

    2025年12月24日
    000
  • css设置表格某一行固定不动

    css设置表格某一行固定不动的方法:1、使用css定位th,并根据父级滚动条scrolltop的偏移量获取值,然后用js把偏移量赋值到th的定位top上;2、使用jq插件设置表格某一行固定不动。 本文操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。 c…

    2025年12月24日 好文分享
    000
  • css代码规范分享

    我们在学习css的过程中会发现css学习起来并不难,但是在大型项目中,它会变得很难打理。不同的编程者在书写风格上有很大不同,这就导致在团队合作时会很难沟通。因此便有了css代码书写规范。 1、使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默…

    2025年12月24日
    000
  • 4个可以用来提高页面渲染速度的CSS技巧

    【推荐教程:css视频教程 】 本文将重点介绍4个可以用来提高页面渲染速度的CSS技巧。 1. Content-visibility 一般来说,大多数Web应用都有复杂的UI元素,它的扩展范围超出了用户在浏览器视图中看到的内容。在这种情况下,我们可以使用内容可见性( content-visibili…

    2025年12月24日 好文分享
    000
  • 推荐一个Chrome DevTools实用小插件:CSS Overview Panel

    本篇文章给大家推荐一个实用chrome devtools小插件:css overview panel(css概览面板),使用它重构和改善样式表。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 CSS概览面板(CSS Overview Panel)提供了关于你的CSS的有趣信息。你可…

    2025年12月24日
    000
  • 通过14张有趣生动的图片来了解 flexbox 的用法(值得收藏)

    2021 年了,我们在来重新复习一下 flexbox 的用法,还有一些用的比较少的属性,方便大家理解,这里使用有趣的图片来讲解。 FlexBox 架构 FlexBox图表 flex-direction flex-item在flex-container内部分布的行/列方向。 justify-conte…

    2025年12月24日 好文分享
    000
  • html如何用css美化表格

    html用css美化表格的方法:首先创建一个HTML示例文件;然后在body中创建table表格;最后通过style标签给表格添加css样式即可。 本文操作环境:Windows7系统、HTML5&&CSS3、Dell G3电脑。 html如何用css美化表格? 下面通过示例来看看。 …

    2025年12月24日
    000
  • css里面div如何居中显示文字

    css里面div居中显示文字的实现方法:首先创建一个HTML示例文件;然后在body中添加div文字;最后通过为文字所在div添加“text-align:center”样式来设置div中文字居中即可。 本文操作环境:Windows7系统、HTML5&&CSS3、Dell G3电脑。 …

    2025年12月24日
    000
  • CSS中处理不同长度文本的几种小技巧

    【推荐教程:CSS视频教程 】 当我们使用 CSS 构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题。 在许多情况下,添加或删除一个单词会改变 UI 的外观,更糟的是,它可能会破坏原有的设计,使其无法访问。在我学习 CSS 的早期,我低估了添…

    2025年12月24日 好文分享
    000
  • 聊聊你可能不了解的CSS属性函数 attr()

    本篇文章带大家了解一下css属性函数 attr()。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 属性函数 attr() 用于获取HTML元素里面的属性值,并用于样式中,但目前暂时只能应用于CSS元素中的伪元素。 例子 实现一个Tooltip 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • 提升你的CSS技能的20个css技巧

    随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用css速度会更快。 这里涵盖了20个css技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常见的…

    2025年12月24日
    000
  • css如何控制输出字数

    css控制输出字数的方法:首先创建一个HTML示例文件;然后定义一些文本;最后通过css样式“overflow:hidden;”和“text-overflow:ellipsis;”等来实现文本溢出显示省略号效果即可。 本教程操作环境:windows7系统、HTML5&&CSS3版本、…

    2025年12月24日
    000
  • css 页面显示不全怎么办

    css页面显示不全的解决办法:1、取消css中对象的高度css样式;2、减少内容;3、在设置高度和宽度的同时再设置“overflow:hidden”属性样式。 本教程操作环境:windows7系统、HTML5&&CSS3版本、Dell G3电脑。 div css网页显示不完整的原因分…

    2025年12月24日
    000
  • css横着写还是竖着写

    不同的css写法有不同的优势,比如在开发时,css竖着写,按规范编码,格式缩进,一是代码可读性强,二是容易调试;在上线时,css让横着写,可以用gulp或grunt等构建工具编写脚本,优化css缩小css体积,使生成代码变横的。 本教程操作环境:windows7系统、css3版本、Dell G3电脑…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信