css 第一次亲密接触_综合

css：层叠样式表，不能单独使用，要和html相结合
1. 样式表：有很多的属性和属性值，来设置内容样式
2. 层叠：一层一层的，样式优先级
3. 优先级：最终以谁的样式为准
使用css的目的：把网页的样式和内容进行分离，利于代码维护。
html和css的四种结合方式：
1. 在html标签内使用style属性值，style=”css代码”，css代码一般格式为属性：属性值

<div style="background: red;color: blue;">你好，css</div>

2.使用html标签

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>你好，css</title>
</head><style type="text/css"> /*样式标签*/div{ /*指定标签*/background: yellow; /*修饰*/color: red;}</style>
<body><div id="">             <!--css修饰的内容-->一定转前端</div>
</body>
</html>

3.使用link标签，写在head里面
新建一个css文件，在link里面指定css文件的路径

<link rel="stylesheet" type="text/css" href="css/first.css" /><!--stylesheet:样式表 href指定的路径-->
div{background: green;color: blueviolet;
}

使用html的style标签，在标签内使用@import url(指定css的文件路径)

<style type="text/css">@import url(css/first.css); </style>

5.css选择器

标签选择器

div{ color: red;}

class选择器，每一个Html标签都有一个class属性，可以设置class属性的值，写法为： .class属性值或者标签.属性值

<!--html代码--><div class="aa">            这些年，一个人</div><p class="aa">风也过，雨也走</p>/*css代码*/
.aa{color: #FF0000;
}
p.aa{color:blue;
}

每一个html标签都有一个id属性，通过设置id值来设置css样式,写法为： #id属性值，或者标签#id属性值

<!--html代码--><div id="hehe">         这些年，一个人</div><p id="hehe">风也过，雨也走</p>
/*css代码*/
#hehe{  /*所有id值为hehe的都设置背景色为#00ff00*/background: #00FF00;
}
p#hehe{background: black;
}

6.css的扩展选择器
a.关联选择器，设置嵌套标签的样式

<!--html代码--><div >      <!--只有这一个发生变化，字体颜色为红色--><p>这些年，一个人</p></div><p>风也过，雨也走</p>    <!--不发生变化-->
/*css代码*/<style type="text/css"> /*样式标签*/div p{ /*指定标签*/color: red;}</style>

b. 组合选择

<!--html代码--><div >          <p>                   //发生变化，字体颜色为红色这些年，一个人</p></div><p>风也过，雨也走</p>       //也发生变化，字体颜色为红色
<!--css代码--><style type="text/css"> /*样式标签*/div,p{ /*指定标签*/color: red;}</style>

c.伪元素选择器，伪类，伪对象
举例：

a:link{                             //原始状态background: black;texts}a:hover{                   //鼠标放上去状态background: red;}a:active{                 //点击状态链接状态background: blue;}a:visited{                //点击完成后链接状态background: green;}

7.css的优先级一般是后加载的优先级高
style选择器 > id选择器 >class选择器 > 标签选择器 >

<!--html代码--><div id="hehe" class="aa" style="background: black;">           这些年，一个人</div>
/*css代码*/
#hehe{  /*所有id值为呵呵的都设置背景色为#00ff00*/background: blue;
}
.aa{color: green;
}
<style type="text/css"> /*样式标签*/div{ /*指定标签*/background: red;} </style>