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>
posted @ 2016-08-31 17:01  任淏  阅读(1020)  评论(0编辑  收藏  举报