unit1 初识CSS3
1、CSS基础
1、概念
级联样式表
表现HTML或XHTML文件样式的计算机语言 :
括对字体、颜色、边距、高度、宽度、背景图片、网页 定位等设定。
2、用途
1、外观美化
2、布局、定位
3、优势
1、内容与表现分离
2、 网页的表现统一,容易修改
3、丰富的样式,使得页面布局更加灵活
4、 减少网页的代码量,增加网页的浏览速度,节省网 络带宽
5、运用独立于页面的CSS,有利于网页被搜索引擎 收录
2、定义css的方式
1、 标签选择器直接应用于HTML标签
2、 类选择器可在页面中多次使用
3、ID选择器在同一个页面中只能使用一次
方式一:内部样式
将样式放到html网页的style标签中 (style在head中)
- 1、标签选择器
1)标签选择:以标签名字作为选择器的名字
标签名{
样式列表;
}
- 2、类选择器
2)类选择器:以标签的类名作为选择器的名字
.标签的类名{
样式列表;
}
补充:所有的标签都有class属性
- 3、id选择器
3)id选择器:以标签的id值作为选择器的名字
#id名{
样式列表;
}
补充:所有的标签都有id属性,id的属性值是唯一了
方式二:外部样式
css定义的方式二:外部样式表(推荐)
1.创建.css文件
2.在.css文件中写上样式列表(3种选择器)
3.引入外部样式表
1)link (推荐)
2) import 必须放到style标签中(不推荐)
- 导入方式
链接式与导入式的区别:
1、<link><link/>标签属于XHTML,@import是属于CSS2.1
2、使用<link/>链接的CSS文件先加载到网页当中,再 进行编译显示
3、使用@import导入的CSS文件,客户端显示HTML 结构,再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的,对不兼容CSS2.1 的浏览器是无效
• 导入式import
• 链接式link
方式三:行内样式表
css定义的方式三:行内样式表(不推荐--复用性很差)
1.所有标签都有一个style属性
2.style属性值为样式列表
3、优先级
1、样式表的优先级
样式表优先级:
行内样式表>内部样式表>外部样式表
2、选择器的优先级
选择器的优先级
id选择器>类选择器>标签选择器
注意:选择器的优先级不遵循就近原则。
4、CSS高级选择器
1、层次选择器
/*后代选择器*/
/*body p{
background: red;
}*/
/*子选择器*/
/*body>p{
background: pink;
}*/
/*/!*相邻兄弟选择器*!/*/
/*.active + p{
background: green;
}*/
/*/!*通用选择器*!/*/
.active~p{
background: yellow;
}
<body>
<p>1</p><!-- 为了说明相邻兄弟选择器,在此处添加一个类名active -->
<p class="active">2</p>
<p>3</p>
<p>4</p>
<ul>
<li>
<p>4</p>
</li>
<li>
<p>5</p>
</li>
<li>
<p>6</p>
</li>
</ul>
</body>
- 1、E F 后代选择器
E:父元素
F:子元素
选择匹配的F元素,且匹配的F元素(子元素和孙元素)被包含在匹配的E元素内。
- 2、E>F 子选择器
选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
- 3、E+F 相邻兄弟选择器
选择匹配的F元素,且匹配的F元素紧位 于匹配的E元素后面。
- 4、E~F 通用兄弟选择器
选择匹配的F元素,且位于匹配的E元素 后的所有匹配的F元素
2、伪类选择器
<!--
p:nth-child(2)与p:nth-of-type(2)区别:
前者:父元素的第2个子元素,如果是p标签 ,则使用该样式
后者:父元素的第2个类型为p的元素
-->
- 1、E F:first-child
选择父元素 E的第一个子元素的元素F
- 2、E F:last-child
作为父元素的最后一个子元素的元素F
- 3、E F:nth-child(n)
选择父级元素E的第n个子元素F
- 4、E F:first-of-type
选择E父元素内具有指定类型为F的第一个元素
- 5、E F:last-of-type
选择父元素E内具有指定类型为F的最后一个元素
- 6、E F:nth-of-type(n)
选择父元素E内具有指定类型为F的第n个元素
- 7、E F:nth-last-child(n)
选择父元素 E 的倒数第n个子元素,且该子元素类型为 F。
此选择器与E:nth-child(n)选择器计算顺序刚好相反。但是使用方法都是一样。
其中:nth-last-child(1)始终匹配 最后一个元素,与last-child等同。
- 8、E F: nth-last-of-type(n)
选择父元素 E 的倒数第二个类型为 F 的子元素
- 9、only-child
选择父元素 E 的唯一的一个子元素,且该子元素类型为F
- 10、only-of-type
选择父元素 E 的唯一的一个类型为F 的子元素。
3、属性选择器
- 1、E[attr]
选择匹配具有属性attr的E元素
- 2、E[attr=val]
选择匹配具有属性attr的E元素,并且属性值为val(其中 val区分大小写)
- 3、E[attr^=val]
选择匹配元素E,且E元素定义了属性attr,其属性值是以 val开头的任意字符串
- 4、E[attr$=val]
选择匹配元素E,且E元素定义了属性attr,其属性值是以 val结尾的任意字符串
- 5、E[attr*=val]
选择匹配元素E,且E元素定义了属性attr,其属性值包含 了“val”,换句话说,字符串val与属性值中的任意位置 相匹配