CSS的基本概念
Posted 任伟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS的基本概念相关的知识，希望对你有一定的参考价值。
<!--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>
以上是关于CSS的基本概念的主要内容，如果未能解决你的问题，请参考以下文章