CSS样式 选择器
什么是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)在父级里先看类型,再看位置