什么是CSS 样式
CSS
-层叠样式表(Cascading Style Sheet)
CSS的概念
表现HTML或XHTML文件样式的计算机语言
包括对字体，颜色，边距，高度，宽度，背景图片，网页的定位等设定
CSS的优势
内容与表现分离
网页的表现统一
丰富的样式，使用页面的布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络宽带
运用独立页面的CSS，有利于网页被搜索引擎收录
选择器{
属性：值
属性：值
}
Style标签
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
行内样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
h1 {
font-size:12px;
color:#F00;
}
</style>
- 标签选择器：选择器写法标签是一致的。所有的这些标签会使用同一的样式
如果有个别某些h1不想使用这个样式怎么办？--》肯定不能使用h1这个标签选择器了
如果某些段落p也想使用h1的那个样式怎么办？
h1 {
font-size:12px;
color:#F00;
}
- 类选择器
.red{
Color：#ff0000
}
<h1></h1>
<h1 class=”red”></h1>
<h1></h1>
<p></p>
<p class=”red”></p>
- ID选择器
#green{
Color:#00ff00;
}
<p id=”green”></p>
补充：css注释：/* */
- 标签选择器直接应用于HTML标签
- 类选择器可在页面中多次使用
- ID选择器在同一个页面中只能使用一次
- 内部样式表
<style></style>
- 内联样式
<p style=””></p>//范围小
- 外部样式表
链接式：
创建一个外部的css文件：*.css，把样式写在这个文件中
谁想用这个样式,谁就引入这个样式即可
<link rel=”stylesheet” href=”样式文件的路径”/> ****
导入式：
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
- 链接式与导入式的区别
- <link/>标签属于XHTML，@import是属于CSS2.1
- 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
- 使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
- @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
颜色
使用英文单词：red yellow blue green……….
使用十六进制数字表示 0-9 A B C D E F
RGB=Red Green Blue
层次选择器
后代选择器
body p{ background：red；}
注意！： 后代选择器两个选择符之间+必须要以空格隔开，中间不能有任何其他的符号插入
子选择器
body>p{ background: pink; }
相邻兄弟选择器
.active+p { background: green; }
通用兄弟选择器
.active~p{ background: yellow; }
结构伪类选择器：
示例
E:first-child
P：first-child{
background：red;
}
ul li：first-child{
background：red;
}
E:last-child
ul li：last-child{
background：red;
}
E F:nth-child(n)
ul li：nth-child(2){
background：green;
}
E:first-of-type
p：first-of-type{
background：blue;
}
- 使用E F:nth-child(n)和E F:nth-of-type(n)的 关键点
- E F:nth-child(n)在父级里从一个元素开始查找，不分类型
- E F:nth-of-type(n)在父级里先看类型，再看位置