CSS
CSS 语法
语法格式
选择器 {属性名:属性值;属性名:属性值;}
CSS 的一些简单常见的属性
- 括号中内容为快捷键
字体颜色:(c)
color:red;
字号大小:(fos)
font-size:40px;
背景颜色:(bgc)
background-color: blue;
加粗:(fwb)
font-weight: bold;
不加粗:(fwn)
font-weight: normal;
斜体:(fsi)
font-style: italic;
不斜体:(fsn)
font-style: normal;
下划线:(tdu)
text-decoration: underline;
没有下划线:(tdn)
text-decoration:none;
样式表
- 行内样式:在某个特定的标签里采用 style属性。范围只针对此标签。
- 内嵌样式表:在页面的 head 里采用
<style>
标签。范围针对此页面。 - 引入外部样式表 css 文件的方式。分为两种:
- 1、采用
<link>
标签。例如:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 2、采用 import,必须写在
<style>
标签中,并且必须是第一句。例如:@import url(a.css) ;
CSS 的四种基本选择器
CSS 的选择器分为两大类:基本选择题和扩展选择器。
基本选择器:
- 标签选择器:针对一类标签
- ID 选择器:针对某一个特定的标签使用
- 类选择器:针对你想要的所有标签使用
- 通用选择器(通配符):针对所有的标签都适用
1、标签选择器:选择器的名字代表 html 页面上的标签
标签选择器,选择的是页面上所有这种类型的标签
p{ font-size:14px; }
2、ID 选择器:规定用#
来定义
针对某一个特定的标签来使用,只能使用一次
#mytitle{ border:3px dashed green; }
3、类选择器:规定用圆点.
来定义
.one{ width:800px; }
1、类选择器可以被多种标签使用。
2、同一个标签可以使用多个类选择器,用空格隔开。
上面这三种选择器的区别:
- 标签选择器针对的是页面上的一类标签。
- ID 选择器是只针对特定的标签(一个),ID 是此标签在此页面上的唯一标识。
- 类选择器可以被多种标签使用
4、通配符*
:匹配任何标签
通用选择器,将匹配任何标签。
* {
margin-left: 0px;
margin-top: 0px;
}
CSS 的几种高级选择器
高级选择器:
- 后代选择器:用空格隔开
- 交集选择器:选择器之间紧密相连
- 并集选择器(分组选择器):用逗号隔开
- 伪类选择器
1、后代选择器: 定义的时候用空格隔开
<style type="text/css">
.div1 p {
color: red;
}
</style>
空格就表示后代。.div1 p
表示.div1
的后代所有的p
。
2、交集选择器:定义的时候紧密相连
定义交集选择器的时候,两个选择器之间紧密相连。一般是以标签名开头,比如div.haha
,再比如p.special
。
如果后一个选择器是类选择器,则写为div.special
;如果后一个选择器 id 选择器,则写为div#special
。
注: 交集选择器没有空格。没有空格的div.red
(交集选择器)和有空格的div .red
(后代选择器)不是一个意思。
3、并集选择器:定义的时候用逗号隔开
三种基本选择器都可以放进来。
p,
h1,
#mytitle,
.one {
color: red;
}
1.子代选择器,用符号>
表示
div > p {
color: red;
}
div 的儿子 p。和 div 的后代 p 的截然不同。
能够选择:
<div>
<p