<!--CSS 一.概念:CSS的全称是Cascading Style Sheets,层叠样式表,用来控制HTML标签样式,在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的,比如 color: red;
font-size: 20px;
冒号:冒号左边是属性名,冒号右边是属性值
二.CSS的3中书写形式 1.行内样式:(内联样式)直接在标签的style属性中书写 <body style = "color: red;"> 2.页内标签:在本网页的style标签中书写 <style> body{ color:red; } </style> 3.外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用 <link rel="stylesheet" href="index.css">
三.CSS规律: 1.就近原则 2.叠加原则
四.CSS的两大重点 1.属性:通过属性的复杂叠加才能做出漂亮的网页 2.选择器:通过选择器找到对应的标签设置样式 a.标签选择器: 作用:选择对应的标签,为之添加样式 根据标签名找到标签 <div>div1</div> <div>div2<div> div{ color:red } b.类选择器 <p class="high">第一段文件</p> <p>第二段文字</p>
<div class="high">div1</div> <div>div2</div>
.high { color:red }
c.id选择器 <p id="first">第一段文件</p> <p>第二段文字</p>
#first { color:red; }
d.并列选择器 <p class="high">第一段文件</p> <p>第二段文字</p>
<div class="high">div1</div> <div>div2</div>
div, .high { color:red }
e.复合选择器 <p class="high">第一段文件</p> <p>第二段文字</p>
<div class="high">div1</div> <div>div2</div>
div.high { color:red }
f.后代选择器 <div> <p>div里边的p</p> <span> <p>div里边的span里边的P</p> </span> </div>
<P>外面的p</P>
div p { color: red; }
g.直接后代选择器 div>p { }
h.相邻兄弟选择器 div+p { color: red; }
i.属性选择器 1)<div name="jack">111</div> <div name="rose">222</div> <div>333</div>
div[name] { color:red; }
2)<div name="jack">111</div> <div name="rose age="20">222</div> <div>333</div>
div[name][age] { color:red; }
3)<div name="jack">111</div> <div name="rose">222</div> <div>333</div>
div[name="jack"] { color:red; }
五.伪类:在点击的时候触发的操作
六:标签之间的类型转化
七:CSS的属性 CSS有N多种属性,根据继承性,主要分为可继承属性和不可继承属性 1.可继承属性 父标签的属性值可以传递给子标签 一般是文字控制属性 2.不可继承属性 父标签的属性值不能传递给子标签 一般是区块控制属性-->
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body>
</body></html>
时间： 2024-11-02 14:52:57