CSS常用样式

css概述：表现

Cascading Style Sheets 层叠式样式表

1.html与css的结合方式：

① 行内式：html中的标签属性 style ：适用于单纯只有一个标签需要设置时的特 殊样式。如果多个标签需要应用同一个样式，建议采用内嵌式。

格式：

样式名称：样式值;

样式名称：样式值;

样式名称：样式值;

② 内嵌式：建议在head中使用，使用标签 style.适用于当前页面多个标签使用同 一个样式。

<style type="text/css">
p{
font-size: 40px;
color: pink;
}
</style>

格式：

选择器：要应用样式的内个标签或元素。

选择器{

样式名称:样式值;

样式名称:样式值;

样式名称:样式值;代码： }

③ 外链式：link:适用于多个页面使用同一个样式时。

<link rel="stylesheet" href="css/main.css" />

注意： link中href属性必须有，表示链接的css文件。

2.常见样式：

① font-size：字体大小 px

② color：字体颜色

css基本选择器

css的基本选择器

1.id选择器:# 建议id选择器只有一个

2.class选择器:. class类选择器可以有多个

3.标签选择器：元素标签

4.通配符选择器:*

优先级： id选择器优先级高于class选择器。

所有的样式只要不冲突，就叠加，冲突，根据优先级来显示

<style type="text/css">
/*id选择器*/
#p1{
font-size: 40px;
}
/*class选择器*/
.p2{
color: red;
font-size: 30px;
}
/*标签选择器*/
p{
color: yellow;
}
/*通配符选择器*/
*{
font-size: 50px;
}
</style>
<p  id="p1" >这是一个p标签1</p>/*id选择器*/
<p class="p2">这是一个p标签2</p>/*class选择器*/
<div class="p2">/*标签选择器*/

css的扩展选择器

css的扩展选择器

1.css并集选择器： 格式： 选择器1,选择器2,选择器3

2.css交集选择器： 格式： 选择器1选择器2

3.css的后代选择器: 格式： 选择器1 选择器2 选择器3

4.css的子代选择器: 格式： 选择器1 > 选择器2>选择器3

伪类选择器

1.超链接

:link /* 未访问的链接 */

:visited /* 已访问的链接 */

:hover /* 鼠标移动到链接上 */

:active /* 选定的链接 激活状态 */

2.css的下划线 ：

text-decoration：none /underline 下划线 /overline 上划线 /linethrough 中划线

3.超链接定义样式时，有顺序： LVHA 一般情况下，未访问与已经访问过的链接，都是一个样式，鼠标划上和激活状态都 是一个样式。

<style>
:link{
color: black;
font-size:20px ;
text-decoration: none;
}
:visited{
color: grey;
}
a:hover{
color: red;
font-size:30px ;
}
:active{
font-size: 20px;
color: blue;
}
#div1:hover{
color: pink;
}
</style>
........
<a href="http://www.baidu.com">点我跳转到百度</a>

css背景样式

css背景样式

1.background-color 背景色

2.background-image 背景图

3.background-repeat 设置是否重复

4.background-position 规定背景图的位置。

注意：

① 写法一： top center bottom left center right 第一个参数表示垂直方向对齐 第二个参数表示水平方向对齐

② 写法二： 像素或百分比，第一个参数表示水平，第二个参数表示垂直。

5.css背景滚动设置

1.background-attachment：

① scroll：景图像会随着页面其余部分的滚动而移动。

② fixed：当页面的其余部分滚动时，背景图像不会移动