注意:建议有css基础
1.引入CSS样式
1.行内式
- 其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- 案例:
<div style="color: red; font-size: 12px;">青春不常在,抓紧谈恋爱</div>
- 注意:
- style其实就是标签的属性
- 样式属性和值中间是`:`
- 多组属性值之间用`;`隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
- 缺点:
没有实现样式和结构相分离
2 内部样式(内嵌样式)
- 其基本语法格式如下:
<head>
<style type="text/CSS">
选择器(选择的标签) {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
<style>
div {
color: red;
font-size: 12px;
}
</style>
- 注意:
style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
type="text/css" 在html5中可以省略。
只能控制当前的页面
- 缺点:
没有彻底分离
3.外部样式(外链式)
- 其基本语法格式如下:
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
4 导入式
- 其基本语法格式如下:
@import url("css文件路径");
比前两中好,但一般就用第三种,因为这一种你可能都是第一次见
5 三种样式总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签(少) |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面(中) |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多,强烈推荐 | 控制整个站点(多) |
css 基础选择器
1.标签选择器
- 语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 作用:
标签选择器 可以把某一类标签**全部**选择出来 比如所有的div标签 和 所有的 span标签
- 优点:
是能快速为页面中同类型的标签统一样式
- 缺点:
不能设计差异化样式。
2 类选择器
- 语法:
<style>
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
<p class='类名'></p>
- 优点:
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
- 注意
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名, 尽量使用英文字母来表示。
- 给标签指定多个类名,从而达到更多的选择目的。
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
<div class="pink fontWeight font20">蒙多</div>
<div class="font20">压缩</div>
<div class="font14 pink">复仇之矛</div>
<div class="font14">圣枪游侠·奥巴马</div>
3 id选择器
- 语法格式如下:
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<p id="id名"></p>
- 元素的id值是唯一的,只能对应于文档中某一个具体的元素
- 用法基本和类选择器相同。
- W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
- 类选择器(class) 好比人的名字, 是可以多次重复使用的, 比如 张伟 王伟 李伟 李娜
- id选择器 好比人的身份证号码, 全中国是唯一的, 不得重复。 只能使用一次。
id选择器和类选择器最大的不同在于 使用次数上。
- 类选择器我们在修改样式中,用的最多。
- id选择器一般用于页面唯一性的元素身上,经常和我们后面学习的javascript 搭配使用。
4. 通配符选择器
语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码,使用通配符选择器定义CSS样式,清除所有HTML标记的默认边距。
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
注意:常用类选择器, 少用其他三种
一,常用样式-字体样式
font-size:大小
font-family:字体
列子:
p{ font-family:"微软雅黑";}
font-weight:字体粗细
代替了html中的b 和 strong 标签
属性值 | 描述 |
---|---|
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100~900 | 400 等同于 normal,而 700 等同于 bold 我们重点记住这句话 |
font-style:字体风格
代替了 i 和 em 标签 没说禁止(上下同)
属性 | 作用 |
---|---|
normal | 默认值,浏览器会显示标准的字体样式 font-style: normal; |
italic | 浏览器会显示斜体的字体样式。 |
简写:
选择器 { font: font-style font-weight font-size/line-height font-family;}
二,常用样式-外观样式
1 color:文本颜色
-
作用:
color属性用于定义文本的颜色,
-
其取值方式有如下3种:
表示表示 | 属性值 |
---|---|
预定义的颜色值 | red,green,blue,还有我们的御用色 pink |
十六进制 | #FF0000,#FF6600,#29D794 |
RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
-
注意
我们实际工作中, 用 16进制的写法是最多的,而且我们更喜欢简写方式比如 #f00 代表红色
2.text-align:文本水平对齐方式
-
作用:
text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性
-
其可用属性值如下:
属性 | 解释 |
---|---|
left | 左对齐(默认值) |
right | 右对齐 |
center | 居中对齐 |
-
注意:
是让盒子里面的内容水平居中, 而不是让盒子居中对齐
尺寸单位
单位为px
width : 宽高
height: 高度
3 line-height:行间距
-
作用:
line-height属性用于设置行间距,就是行与行之间的距离,即字符的垂直间距,一般称为行高。
-
单位:
- line-height常用的属性值单位有三种,分别为像素px,相对值rem,em和百分比%,vh,vw,实际工作中使用最多的是像素px
-
技巧:
一般情况下,行距比字号大7.8像素左右就可以了。
line-height: 24px;
4 text-indent:首行缩进
-
作用:
text-indent属性用于设置首行文本的缩进,
-
属性值
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%,允许使用负值,
- 建议使用em作为设置单位。
1em 就是一个字的宽度 如果是汉字的段落, 1em 就是一个汉字的宽度
p {
/*行间距*/
line-height: 25px;
/*首行缩进2个字 em 1个em 就是1个字的大小*/
text-indent: 2em;
}
5 text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 取消下划线(最常用) |
underline | 定义文本下的一条线。下划线 也是我们链接自带的(常用) |
overline | 定义文本上的一条线。(不用) |
line-through | 定义穿过文本下的一条线。(不常用) |
CSS 三大特性
1 层叠性
所谓层叠性是指多种CSS样式的叠加。
样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
样式不冲突,不会层叠
2 继承性
-
概念:
子标签会继承父标签的某些样式,如文本颜色和字号。
想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是: 子承父业。
- 注意:
- 恰当地使用继承可以简化代码,降低CSS样式的复杂性。比如有很多子级孩子都需要某个样式,可以给父级指定一个,这些孩子继承过来就好了。
- 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的可以继承,以及color属性)
3 CSS优先级
继承权重为 0 < 标签为 1 < class 10 < id 100<行内 1000 < !important 无穷大
复杂选择器
- 后代选择器 空格
- 子代选择器 大于号
- 兄弟选择器 加号
- 群组选择器 逗号
- 伪类选择器 hover 当鼠标移入标签时的样式
a 标签的链接样式:
:link
:hover
:active
:visited
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 后代选择器 */
/* .father div{
width: 100px;
height: 100px;
background-color: red;
} */
/* 子代选择器 */
/* .father>div{
width: 100px;
height: 100px;
background-color: red;
} */
/* 权重30 */
.father .son .target{
background-color: red;
}
/* 300 */
#fat #son #tar{
background-color: yellow;
}
/* 120 */
#fat>.son>.target{
background-color: green;
}
/* 120 */
.father #son>.target{
background-color: pink;
}
/* 3 */
div>div>span{
background-color: aqua;
}
/* 继承or* 0 < 标签 1 < class 10 < id 100 < 行内 1000 < !important 无穷大 */
/* 11 */
div>div>div>div>div>div>div>div>div>div>div{
background-color: yellow;
}
/* 10 */
.shazi{
background-color: red;
}
</style>
</head>
<body>
<div class="father" id="fat">
<div class="son" id="son">
<span class="target" id="tar">span</span>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="shazi">谁再问就是傻子</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
结果:
1. 盒子模型
概念:把每个标签当成一个纸盒看待,每个标签就会存在边框,内容,内边距,外边距
特点:
盒子模型是由内容(width,height),边框,内边距,外边距组成
盒子本身的文字和图片等元素就是内容区域
盒子的厚度就是边框
盒子内容于边框的距离就是内边距
盒子与盒子之间的距离就是外边距
1.1 边框样式 border
border-width 定义边框粗细,单位px
border-style 定义边框样式
可选值:none 默认值,没有边框
solid 单实线 常用
dashed 虚线
dotted 点线
border-color 定义边框颜色 默认为黑色
border-radius 边框圆角
边框的简写
border : border-width border-style border-color
1.2 内边距 padding
盒子的边框到内容的距离就是内边距
padding-left
padding-right
padding-top
padding-bottom
单位都是数值设定距离
1.内边距会使盒子变大
内边距的简写
padding : 1个值 上下左右
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
1.3 外边距 margin
盒子的边框到内容的距离就是内边距
margin-left
margin-right
margin-top
margin-bottom
单位都是数值设定距离
外边距的简写
margin : 1个值 上下左右
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
1.4盒子模型的常见问题和解决方案
-
块级级盒子水平居中问题
必须满足的条件指定了宽度,将这个盒子左右margin设置为auto -
文字居中和盒子居中
行内元素,行内块元素,文本在水平方向居中对齐text-align:center
跨级元素在水平方向居中对齐margin:auto -
清除元素的默认内外边距(重要)
自带内外边距的标签:ul li ol dl dt dd p body
为了更灵活方便的控制网页的标签
*{
margin:0;
padding:0;
}
注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距
- 边距塌陷(外边距重合问题)
使用margin定义块元素的垂直外边距,可能会出现边距塌陷问题
①相邻块元素垂直外边距合并
当上下的两个块元素相遇时,如果上面的元素设置了margin-bottom
下面的元素有上外边距margin-top,则他们之间的垂直外边距不是margin-bottom+margin-top之和
取两值中的较大值作为中间的外边距,这种现象被称为边距塌陷
解决方案:尽量只给一个盒子设置margin
②嵌套块元素垂直外边距合并
对于两个嵌套关系的块元素,如果父元素没有上内边距和边框
父元素上外边距会和子元素上外边距发送合并,合并后的外边距时两者中较大值
**
解决方案:1.给父元素边框
2.给父元素内边距
3.给父元素overflow:hidden;
**
1.5 盒子模型的稳定性
优先使用 宽度width > 内边距padding > 外边距margin
- margin会有外边距合并问题,ie6下面的margin会有一个边距加倍的bug
w3c标准盒子模型中的宽高度计算:
宽度 = width + 左右border-width + 左右padding
高度 = height + 上下border-width + 上下padding
ie盒子模型(怪异盒模型)
1. 标签分类
-
行内标签
特点:和其他行内标签在同行显示,不支持宽高(css样式)
比如:a,b,s,u,i,font,sub,sup,span
-
块级标签
特点:独占一行,支持宽高(css样式)
比如:h1~h6,p,hr,div,li,ul,ol,dl,dd,dt
-
行内块标签
特点:同行显示,支持宽高
比如:img