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
    HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganHTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

    Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

    HTML: Adakah bahasa pengaturcaraan atau yang lain?HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

    Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

    HTML: Membina struktur laman webHTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

    HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

    Dari teks ke laman web: Kekuatan HTMLDari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

    HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

    Memahami HTML, CSS, dan JavaScript: Panduan PemulaMemahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

    WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

    Peranan HTML: Penstrukturan Kandungan WebPeranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

    Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

    HTML dan Kod: Melihat lebih dekat pada istilahHTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

    Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

    HTML, CSS, dan JavaScript: Alat penting untuk pemaju webHTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

    HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

    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.

    Artikel Panas

    R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
    4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Tetapan grafik terbaik
    4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
    4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. Arahan sembang dan cara menggunakannya
    4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

    Alat panas

    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

    VSCode Windows 64-bit Muat Turun

    VSCode Windows 64-bit Muat Turun

    Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft

    SublimeText3 Linux versi baharu

    SublimeText3 Linux versi baharu

    SublimeText3 Linux versi terkini

    Muat turun versi mac editor Atom

    Muat turun versi mac editor Atom

    Editor sumber terbuka yang paling popular

    SublimeText3 versi Cina

    SublimeText3 versi Cina

    Versi Cina, sangat mudah digunakan