HTML缺陷:
- 不能适应多种设备
- 要求浏览器足够智能
- 数据和显示没有分开
- 功能不够强大
CSS (Cascading Style Sheet)层叠样式表
作用:给HTML页面标签添加各种样式
优点:
- 数据和显示分开
- 降低网络流量
- 视觉效果好
- 提高开发效率
1、CSS基础
CSS语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS语法</title>
<style type="text/css">
p{
font-weight: bold;
font-style: italic;
}
</style>
<link rel="stylesheet" type="text/css" href="CSS样式1.css">
</head>
<body>
<pre style="font-size: 16px">
CSS与HTML结合有多种方式
1、行级样式表:采用style属性
2、内部样式表:采用<style>标签
3、外部样式表:引用外部CSS文件,需要用标签<link>引入
</pre>
<p style="color: red">1、采用style属性添加CSS样式的p标签</p>
添加<style>样式,在里面对各个标签进行设置,例如,对<p>标签设置<br>
注意:不要随机加空格,没加一个属性要分号结束
<p>2、通过style标签添加CSS样式的p标签,每个该文件中的p标签都有该属性</p>
<p>3、通过外部CSS文件设置p标签,使每个p标签都有了这个属性</p>
</body>
</html>
CSS选择器
1)基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<style type="text/css">
div{
color: red;
}
.b{
border: 1px dashed red;
}
#c{
border: 2px dashed green;
}
*{
padding: 2px;
margin: 3px;
}
</style>
</head>
<body>
<pre style="font-size: 16px">
CSS选择器:
1、基本选择器:
a.标签选择器
定义:在<style>标签中定义:<某标签>{}
只有这某一类标签使用
b.类选择器
定义:用.xxx定义
可以多类标签使用
在标签中用class属性选择
c.ID选择器
定义:用#定义
针对特定一个标签使用
在标签中用id属性选择
d.通用选择器
定义:用*定义
</pre>
<div>1a、标签选择器,字体红色,通用选择器效果也有</div>
<p class="b">1b、类选择器,p标签通过class属性使用</p>
<p>没有设置class属性的p标签还有样式效果吗?</p>
<h4 class="b">h4标签也通过类选择器使用</h4>
<p id="c">1c、ID选择器,通过id使用</p>
<p>没有设置id属性的p标签还有样式效果吗?</p>
<h3 id="c">h3可以通过ID选择器再次使用吗?</h3>
id是在取值情况下使用的,需要唯一,所以在取值时,h3的值取不到<br>
虽然他可以显示CSS样式~但该做法不对。
</body>
</html>
2)扩展选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS扩展选择器</title>
<style type="text/css">
div,p,h3{
color: green;
}
b i span{
border: 1px solid red;
}
a:link{
color: blue ;
}
a:visited{
color: red;
}
input:onfocus{
border: 1px solid red;
color: yellow;
background-color: #ffcc11;
}
p:active{
color: blue;
}
label:hover{
cursor: hand;
}
</style>
</head>
<body>
<pre style="font-size: 16px">
2、扩展选择器
a.组合选择器:用逗号隔开选择器的名称,大括号内的属性一样
b.关联/后代选择器:用空格隔开,中间的添加属性?
c.伪类选择器
i.静态伪类:只能用于超链接。:link,:visited
ii.动态伪类:适用于各种标签
:onfocus 控件获得焦点
:active 点击控件时
:hover 单鼠标移动到某个控件上时
补充几个控件/属性:
输入框<input>
鼠标cursor,值:hand
label
</pre>
<div>组合选择器1:div</div>
<p>组合选择器2:p</p>
<h3>组合选择器3:h3</h3>
<b>关联1<i>关联2<span>关联3</span>关联22</i>关联11</b><br>
<a href="">静态伪类选择器,点击前后</a><br>
<input type="text" name="动态伪类"><br>
<label>动态伪类hover,鼠标样式改变</label>
</body>
</html>
- cursor的hand值在低版本不适用,改为pointer
- border的线属性值:实线solid、点划线dotted、双划线double
CSS样式冲突解决
样式可以从行级style属性、内部style标签代码、外部CSS文件应用;
而内部和外部的选择器又可以从标签选择器、类选择器、ID选择器进行选择;
所以CSS样式的优先级可以分为如下:
- 行级 > 内部 > 外部
- 内部/外部ID选择器 > 内部/外部类选择器 > 内部/外部标签选择器 (即这个不分内部外部)
- 总的原则,定义的就近原则
2、CSS属性
参考CSS手册
link的rel属性
- stylesheet 默认定义样式表
- alternate stylesheet 候选样式表
CSS单位
HTML只有一个单位:像素PX
CSS单位:
- 绝对单位 1in=2.54cm=25.4mm=72pt=6pc
- 相对单位 px ,%
字体属性
name | 意义&值 |
---|---|
font-size | 大小 |
font-family | 样式:华文彩云,幼圆,宋体 |
font-weight | 加粗 bolder |
font-style | 斜体 italic |
font-variant | 小写变大写 small-caps |
文本属性
name | 意义&值 |
---|---|
color | 颜色 |
text-align | 文本布局:居中center |
text-decoration | 下划线underline,删除线line-through |
text-transform | 字母大小写uppercase,lowcase,capitalize |
letter-spacing | 每个字间隔大小 |
word-spacing | 单词间隔大小 |
背景属性
name | 意义&值 |
---|---|
background-image | url() |
background-repeat | 不重复no-repeat,横向平铺repeat-x,纵向平铺repeat-y |
background-position | 背景位置:right,left,center,center center等 |
background-attachment | 背景滚动方式:fixed,scroll |
background-color | 背景颜色 |
列表属性
name | 意义&值 |
---|---|
list-style | 列表前样式:none,是简写属性序列 |
list-style-image | 列表前图片:url() |
margin-left | 距离左边的间距 |
list-style-type | 列表前面序列标记 |
盒子模型
- 明白margin、border、padding、content、width、height指示意义。
- 可以在浏览器的开发者模式上查看盒子模型,快捷键F12
位置属性
在style中添加position属性,值有两种:absolute、relative,并需要设置left与top的间距大小;
- 绝对定位absolute:绝对位置,其原点是父容器的左上角
- 相对定位relative:相对位置,其原点是自身容器原本的左上角位置
<style type="text/css">
p{
position: absolute;
left: 50px;
top: 50px;
font-weight: bold;
font-style: italic;
}
</style>
会脱离顺序流的两种情况:
- 位置设置为绝对属性absolute
- 设置了float属性
float、overflow、z-index属性
-
float:none | left | right 设置浮动
-
clear:none | left | right | both 不允许有浮动
-
overflow:盒子的内容超出范围时的相关处理
:auto | visible | hidden -
z-index:解决重复内容覆盖层级的问题,数值最大的为顶层、最小的为底层
即垂直于界面的Z轴方向上的显示层级,所以取名为z-index