CSS实现和选择器
本课内容：
一、实现CSS四种方式
1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)
2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)
3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
4，通过HTML头标签中的link标签链接一个CSS文件
二、选择器
标签选择器 div{}
类选择器 .haha
id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)
类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高
三、CSS笔记
css：将网页内容和显示样式进行分离，提高了显示功能。
CSS层叠样式表cascading style sheets
将网页中的样式单独分离出来，完全由CSS控制，增强样式复用性和扩展性。
格式：选择器{属性名：属性值；属性名：属性值；……}
CSS与HTML结合的4中方式：
1、每个HTML标签都有style属性
2、当页面中有多个标签具有相同样式时，可定义style标签封装样式以复用
3、当多个页面使用相同样式时，可将样式单独封装为CSS文件导入
4、通过HTML头标签中的link标签链接一个CSS文件
技巧：为提高样式的复用性和可扩展性，将多个样式单独定义并封装为CSS文件，如p.css、div.css……在一个总的CSS文件中，使用import导入这些CSS文件，然后在HTML页面中用link标签将这个总的CSS文件导入即可。
优先级：就近原则 标签上设置的style属性可以覆盖其他样式
选择器：
1、标签选择器：每个HTML标签名即为一个选择器
2、类选择器：标签中的class属性指定 定义样式要加点 js引用时用className
3、ID选择器：标签的id属性，尽量保证唯一，便于JavaScript获取元素
4、扩展选择器：
a、关联选择器：标签中的标签 table div表示表格中的div区域
b、组合选择器：多个选择器 逗号分隔
c、为元素选择器：元素的状态 如超链接的默认状态、点击状态、悬停状态等
a:link a:visited a:hover a:active LVHA顺序
删除超链接默认下划线：text-decoration：none
p:first-letter p:first-line focus:IE6不支持
CSS滤镜：通过一些代码丰富了的样式
网页设计时，DIV+CSS
DIV和P标签都属于行级区域，回车效果，SPAN标签为块级区域，无回车效果
可加border、color等属性，P标签中不要嵌套DIV标签
四、代码一
1 <!-- 2 本课内容： 3 一、实现CSS四种方式 4 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签) 5 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签) 6 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入 7 <style type=”text/css”>@import url(“1.css”);</style> 8 4，通过HTML头标签中的link标签链接一个CSS文件 9 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)14 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高
15 -->16 <!DOCTYPE html>17 <html>18 <head>19 <meta charset="UTF-8">20 <title>Insert title here</title>21 <!-- type指定下面的css以什么方式解析 -->22 <!--指定这两个样式都作用与div，所以用div后的大括号括起来-->23 <!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->24 <!--25 第二种方式：26 标签选择器27 div{28 background-color: #000;29 color: #FFF
30 }31 32 -->33 <!-- @IMPORT url("div.css?1.1.11");第三种方式 -->34 <!-- 第四种 link -->35 <link rel="stylesheet" href="div.css?1.1.11" type="text.css?1.1.11">36 <style type="text/css">37 /*38 @IMPORT url(1.css);39 @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43 background-color: #000;44 }45 </style>46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->47 <!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->48 <!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->49 <!-- 按钮加多套这样的.haha实现动态样式 -->50 </head>51 <body>52 <!--53 css和html相结合的第一种方式54 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)55 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)56 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入57 <style type=”text/css”>@import url(“1.css”);</style>58 4，通过HTML头标签中的link标签链接一个CSS文件59 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>60 61 -->62 <!-- -->63 64 65 <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->66 <!-- color: #F00 为颜色的缩写 -->67 <div style ="color: #F00">这是一个div区域1</div>68 <div class="haha">这是一个div区域2</div>69 <span>span区域1</span>70 <span>span区域2</span>71 <p>这是一个段落1</p>72 <p>这是一个段落2</p>73 74 75 </body>76 </html>
五、代码二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--link rel="stylesheet" href="1.css?1.1.11" type="text/css" /--><style type="text/css">/*@import url(1.css);
div{
background-color:#09F;
color:#FFF;
}
.haha{
background-color:#FF3;
color:#0C0;
}*//*预定样式，实现动态的加载。.hehe{
background-color:#C93;
color:#00F;
}*//*#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
background-color:#000;
color:#FFF;
}*//*span b{关联选择器 选择器中的选择器background-color:#09F;
color:#FFF;
}*//*组合选择器*//*.haha,div b{对多种选择器进行相同样式定义background-color:#000;
color:#C00;
}*//*伪元素
超链接的状态。*//*未访问*/a:link{background-color:#06F;color:#FFF;text-decoration:none;font-size:18px;}/*鼠标悬停*/a:hover{background-color:#FFF;color:#F00;font-size:24px;}/*点击效果*/a:active{background-color:#000;color:#FFF;font-size:36px;}/*访问后效果*/a:visited{background-color:#FF9;color:#000;text-decoration:line-through;}p:first-letter{font-size:36px;color:#F00;}div:hover{background-color:#F00;color:#FFF;}input:focus{background-color:#09F;}#qq{float:left;}/*L V H A*/</style></head><body><input type="text" /><input type="text" /><hr /><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><hr /><!--css和html相结合的第一种方式。
1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。
2，使用style标签的方式。 一般都定义在head标签中
优先级：标签选择器<类选择器<id选择器<style属性 --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>
Atas ialah kandungan terperinci 实现CSS四种方式和选择器介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah tag root dalam dokumen HTML?Apr 29, 2025 am 12:10 AMTheroottaginanhtmldocumentis.itservesasthetop-levelementthatencapsulatesallotherContent, memastikanproperdocumentstructureandbrowserparsing.
Adakah tag dan elemen HTML perkara yang sama?Apr 28, 2025 pm 05:44 PMArtikel ini menerangkan bahawa tag HTML adalah penanda sintaks yang digunakan untuk menentukan unsur -unsur, manakala unsur -unsur adalah unit lengkap termasuk tag dan kandungan. Mereka bekerjasama untuk menyusun laman web.Character Count: 159
Apakah kepentingan & lt; kepala & gt; dan & lt; body & gt; Tag dalam html?Apr 28, 2025 pm 05:43 PMArtikel ini membincangkan peranan & lt; kepala & gt; dan & lt; body & gt; Tag dalam HTML, kesannya terhadap pengalaman pengguna, dan implikasi SEO. Penstrukturan yang betul meningkatkan fungsi laman web dan pengoptimuman enjin carian.
Apakah perbezaan antara & lt; strong & gt;, & lt; b & gt; tags dan & lt; em & gt;, & lt; i & gt; Tags?Apr 28, 2025 pm 05:42 PMArtikel ini membincangkan perbezaan antara tag HTML ,, dan, memberi tumpuan kepada kegunaan semantik dan presentasi mereka dan kesannya terhadap SEO dan kebolehaksesan.
Sila jelaskan bagaimana untuk menunjukkan set aksara yang digunakan oleh dokumen dalam HTML?Apr 28, 2025 pm 05:41 PMArtikel membincangkan menentukan pengekodan aksara dalam HTML, memberi tumpuan kepada UTF-8. Isu Utama: Memastikan paparan teks yang betul, menghalang watak -watak yang dihiasi, dan meningkatkan SEO dan kebolehcapaian.
Apakah pelbagai tag pemformatan dalam html?Apr 28, 2025 pm 05:39 PMArtikel ini membincangkan pelbagai tag pemformatan HTML yang digunakan untuk penstrukturan dan gaya web kandungan, menekankan kesannya pada penampilan teks dan kepentingan tag semantik untuk akses dan SEO.
Apakah perbezaan antara atribut 'ID' dan atribut 'kelas' elemen HTML?Apr 28, 2025 pm 05:39 PMArtikel ini membincangkan perbezaan antara atribut 'ID' dan 'kelas' HTML, yang memberi tumpuan kepada keunikan, tujuan, sintaks CSS, dan kekhususan mereka. Ia menerangkan bagaimana penggunaan penggunaannya mempengaruhi gaya dan fungsi laman web, dan menyediakan amalan terbaik untuk
Apakah atribut 'kelas' dalam HTML?Apr 28, 2025 pm 05:37 PMArtikel ini menerangkan peranan atribut kelas HTML 'dalam kumpulan penggabungan untuk gaya dan manipulasi JavaScript, membezakannya dengan atribut' ID 'yang unik.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Dreamweaver Mac版
Alat pembangunan web visual
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 terkini
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
