cari
Rumahhujung hadapan webhtml tutorialCSS属性_html/css_WEB-ITnose

  • CSS--属性
  • css属性键值对,property:value。主要是一下几类:
  • 文字相关属性:控制文字的字体,颜色,修饰,阴影等属性。
  • font-family  设置字体类型,如"Arial"、"宋体"等
    font-size 设置字体大小,常用度量单位pt和px
    font-style 设置字体风格,可选值normal, italic和oblique
    font-weigh 设置字体“重量”,常用值为normal和bold
    font 综合设置上述各种字体属性


  • 段落相关属性:控制整个段或者div的显示效果,包括文字的缩进,文字的对齐方式。
  • text-align  设置文本对齐方式,可选值left,center,right,justify
    text-indent 设置首行缩进,其值可采用绝对或相对的长度单位及百分比
    line-height 设置行高,其值可采用绝对或相对的长度单位及百分比
    letter-spacing  设置字符间距,其值可采用绝对或相对的长度单位
    color  设置文字颜色


  • 背景相关属性:控制背景色,背景图片等属性。
  • 表格相关属性:控制表格的外观。
  • 大小相关属性:控制目标对象的长,宽,最小长度,宽度等属性。
  • 在CSS样式表中,长度单位分为两类:

  • 位置相关属性:控制目标对象的位置,包括是否悬浮于页面上。这里有必要说下这类相关属性,其实这就是css的定位机制。
  • 文档流
    行框:按顺序水平摆放,放不下出现滚动条
    块框:按顺序垂直摆放,放不下出现滚动条
    1,相对定位,原来在文档流中的位置仍然保留,当前位置是相对于原始位置偏移后的结果。

    position: relative;#pos {position: relative;top: 5px;left: 55px;}
    2,绝对定位     position: absolute;
    从文档流中删除其原来的位置,就好像该元素从来都不存在一样。它当前所处的位置如果和其他元素重合则会遮盖住其他元素的显示,这就是 CSS 中层的概念。当前位置的定位有两种情况:
    ①父容器以及祖先容器未定位:相对于浏览器左上角
    #pos {position: absolute;top: 0px;left: 0px;}

    ②存在已定位的祖先元素:相对于最接近的已定位的祖先元素
    <div> </div><div> </div><div id="pos"><div id="test">测试</div></div><div> </div><div> </div>#pos {position: absolute;top: 30px;left: 100px;}#test {position: absolute;top: 5px;left: 20px;}
    3,浮动:脱离文档流,向上浮起一层,所有同一容器内的浮动元素根据 float 属性值按顺序进行排列,例如如果都是 float:left 则按从左向右的顺序排列。也会遮盖住文档流中未浮动的正常元素。

    <div> </div><div> </div><div> </div><div> </div><div> </div>div {border-style: solid;border-width: 1px;border-color: black;width: 50px;height: 50px;margin-right: 5px;float: left;}
  • 边框相关属性:设置目标对象的边框特征,包括颜色,粗细,以及使用的线型。
  • 轮廓相关属性:用于让目标对象周围产生一圈光晕,这圈光晕不会占用页面实际的物理布局。通过轮廓相关属性,可设置该光晕的颜色,线宽,线型。


  • 块元素和行元素:
  • HTML元素按其显示方式可分为“块级”(block)元素和“行内”(inline)元素两种:
    块级元素: 前后换行、可设定块大小(宽度和高度)、块的定位、块边框、块间距、块内和块边框间空隙等。如body,p,tr,td,div等。
    行内元素: 位于当前行中,前后不换行,不单独定位。如span元素。
      <p>一段文字中的<span style='="font-size:20pt;' color:red>一部分显示效果有所不同</span>,可以采用span元素来实现</p>

    可以使用CSS的display属性设置/修改元素的显示方式,其常用属性取值为:block、inline和none

    以上这些属性我们大概知道就OK了,具体的相关属性翻ipa文档就好了,如下图。


  • 特别介绍3个常用的属性
  • 1,display,用于设置目标对象是否以及如何显示。该属性的常用值是none,用于设置目标对象隐藏,一旦这个对象隐藏,其占用的页面空间也会释放。如果没有为该属性指定值,目标对象就会显示出来。这个还是比较常用的,一般的我们在页面上控制一部分页面的显示和隐藏,一般都是如下设置;
    显示:document.getElementById('id').style.display='' ;隐藏:document.getElementById('id').style.display='none' ;

    2,visibility,用于设置目标对象是否显示。与display不同的是,通过该属性隐藏某个html元素后,该元素占用的页面空间会被依然保留,不会被释放。该属性的2个常用值是:visible和hidden,分别用于控制对象的显示和隐藏。
    显示:document.getElementById('id').style.visibility='visible' ;隐藏:document.getElementById('id').style.visibility='hidden' ;

    3,cursor,用于设置目标对象上光标的形状。该属性常用的值auto(自动光标),crosshair(十字线光标),default(客户端光标),hand(手形光标),move(十字箭头光标),help(带问号的帮助光标),text(文本光标),wait(沙漏光标),url(自定义光标)。比如:

    <div style="cursor:wait;"></div>


    Kenyataan
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    创造动态背景效果:CSS属性的灵活运用创造动态背景效果:CSS属性的灵活运用Nov 18, 2023 pm 03:56 PM

    创造动态背景效果:CSS属性的灵活运用在网页设计中,背景效果是非常重要的一部分,它可以为网站增添生动的氛围,提升用户体验。CSS作为网页样式设计的关键语言,充分发挥了灵活性和多样性,提供了丰富的属性和技巧来创造各种动态背景效果。本文将通过具体的代码示例,介绍一些常见的CSS属性的灵活运用,以实现精彩的动态背景效果。1.渐变背景渐变背景可以为网页增添魅力,让

    Angular组件及其显示属性:了解非block默认值Angular组件及其显示属性:了解非block默认值Mar 15, 2024 pm 04:51 PM

    Angular框架中组件的默认显示行为不是块级元素。这种设计选择促进了组件样式的封装,并鼓励开发人员有意识地定义每个组件的显示方式。通过显式设置CSS属性 display,Angular组件的显示可以完全控制,从而实现所需的布局和响应能力。

    html虚线边框怎么设置html虚线边框怎么设置Apr 05, 2024 am 09:36 AM

    HTML中可以通过CSS的border-style属性将边框设置为虚线:确定要设置虚线边框的元素,例如使用p元素表示段落。使用border-style属性设置虚线样式,例如dotted表示小圆点状虚线,dashed表示短划线虚线。设置边框其他属性,如border-width、border-color和border-position,以控制边框宽度、颜色和位置。

    如何利用CSS3属性实现网页文字的环绕效果?如何利用CSS3属性实现网页文字的环绕效果?Sep 08, 2023 am 10:30 AM

    如何利用CSS3属性实现网页文字的环绕效果?在现代网页设计中,文字环绕效果是一种常见且有趣的展示方式。通过利用CSS3属性,我们可以轻松实现网页文字的环绕效果。本文将介绍一些常用的CSS3属性以及它们在实现文字环绕效果中的应用。一、float属性float属性是CSS中用来设置元素浮动的属性。结合clear属性,可以实现文字环绕图片的效果。下面是一个示例:&

    实现炫酷滚动效果的CSS属性技巧实现炫酷滚动效果的CSS属性技巧Nov 18, 2023 am 09:08 AM

    实现炫酷滚动效果的CSS属性技巧,需要具体代码示例CSS是网页设计中不可或缺的一部分,通过CSS可以实现各种各样的效果来提升网页的交互体验。其中,滚动效果是一种非常常见也非常炫酷的效果,它可以使网页元素以流畅的动画效果滚动到指定位置。本文将介绍一些实现炫酷滚动效果的CSS属性技巧,并提供具体代码示例。一、使用CSS属性scroll-behavior实现平滑滚

    如何解决WordPress网站头部错位问题?如何解决WordPress网站头部错位问题?Mar 01, 2024 am 09:54 AM

    如何解决WordPress网站头部错位问题?当你在WordPress网站上遇到头部错位的问题时,可能会让你感到困惑和沮丧。这种问题可能由于多种原因引起,比如CSS样式错误、Javascript冲突、插件问题等。在本文中,我们将讨论如何解决WordPress网站头部错位问题,并提供具体的代码示例。1.检查CSS样式首先,检查你的主题CSS样式表是否有错误或冲

    html滚动条怎么做html滚动条怎么做Feb 22, 2024 pm 03:24 PM

    HTML滚动条怎么做,需要具体代码示例在网页设计中,滚动条是一个常见的元素,它可以使网页在内容过多的情况下,能够方便地滚动查看。本文将介绍如何使用HTML创建滚动条,并提供具体的代码示例。首先,我们需要了解HTML中创建滚动条的基本原理。HTML中可以使用CSS样式来控制滚动条的外观和行为。具体来说,我们可以使用CSS属性对滚动条进行设置,其中常用的属性有o

    CSS中transition和transform的差别CSS中transition和transform的差别Feb 18, 2024 pm 07:46 PM

    CSS中transition和transform都是用来实现动画效果的属性,但它们的作用和使用方法有所不同。transition属性用于指定元素在CSS属性变化过程中的过渡效果。通过transition属性,我们可以使元素的属性发生变化时,从初始状态平滑过渡到最终状态,而不是突然改变。transition的语法如下:transition:property

    See all articles

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    AI Hentai Generator

    AI Hentai Generator

    Menjana ai hentai secara percuma.

    Alat panas

    mPDF

    mPDF

    mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

    SublimeText3 Linux versi baharu

    SublimeText3 Linux versi baharu

    SublimeText3 Linux versi terkini

    SublimeText3 versi Mac

    SublimeText3 versi Mac

    Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

    PhpStorm versi Mac

    PhpStorm versi Mac

    Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).