css总结
一、概念
CSS(Cascading Style Sheet):层叠样式表
主要作用:布局、美化
特点:
对缩进换行不敏感,建议一个属性写一行,后期可以通过css压缩
除了最后一条属性,其他属性均需要加上分号
二、css引用方式
1.外部导入:用标签引用外部的css文件,将样式引入到html中来
<link rel="stylesheet" href="./css/reset.css">
2.内部引用:在头部使用标签,在其内部使用样式。
<style>
body{ font-size:14px}
</style>
3.在标签内使用,使用style属性将当前的标签样式改变
<div style="color:red"></div>
三、四种选择器
1.三种选择器
(1)标签选择器:选中页面同类型的标签
h3{ font-style:normal;}
(2)ID选择器:先给标签起ID名,然后通过#ID选中
<!-- 标签起id名 -->
<div id="one"></div>
/*css 选中*/
#one{
width:300px;
height:300px;
}
(3)class选择器:先给标签起类名,然后通过.选中
<!-- 标签起class名 -->
<div class="two">
</div>
/* css选中 */
.two{
width:50px;
height:50px;
}
(4)伪类选择器:最常用的,就是a标签的hover伪类。
<!-- a标签 -->
<a href="http://www.baidu.com">百度</a>
/* a标签的伪类选择器使用 */
a:hover{
color:red;
}
2.起名注意点:
- 以英文字母开头
- 区分大小写
- 可以有数字、字母、下划线、短横线
四、文字属性
1.font-size: 设置字体大小 单位是px
font-size: 50px;
注意点
– 默认情况下,一个浏览器的的字体大小是16px
– 对于一个正常的网站来说,12px和14px用的是最多的
– 对于浏览器来说,一个文本字体可以非常大
– 通常浏览器为了保证用户可以看到字体,对于谷歌浏览器来说,默认最的字体大不是12px。
– 设置字体大小,是有继承性(对于font-size来说,给父元素设置了,子元素也会起作用,这叫CSS属性的继承性)
2.font-weight:用来设置字体是否加粗
bold 加粗
normal 不加粗
注意点
– 有人喜欢使用数字 100 200 300
– 也有继承性
3.font-style:用来设置字体是否倾斜
italic 倾斜
normal 不倾斜
注意点
有继承性
4.font-famliy:字体设置
font-family: "黑体","微软雅黑"
注意点
– 设计师让写什么字体就写什么字体
– 如果没有写,默认是宋体
– 如果一个网页显示一个字体,前提是用户电脑上有这个字体文件,基本上所有的用户电脑上都有宋体
– 设置字体时后面可以跟多个,第1个不起作用,就找第2个,第2个也不起作用,找第3个,都不起作用,使用宋体
4.color:设置字体的颜色
color:blue;
注意点
– 对于a标签来说,你要设置a标签的颜色,必须选中它。
4.font: 是一个复合属性
font:font-style font-weight font-size/line-height font-family;
注意点
– font-style,font-weight 可以不写 如果写了 也可以交换位置
– font-size,font-family 必须写 位置不能变
– 由于font-style,font-weight通常都是normal,所以来,一般不写
– 中间使用空格隔开
– line-height 写了一个倍数 1.5 表示行高是fontsize的1.5倍
四、文本属性
文本:很多的文字构成文本
1.text-decoration:用来设置文本的修饰线
underline 下划线
overline 上划线 用不到
line-through 删除线
none 默认 对于a标签来说,它的默认值是underline
.udl{ text-decoration: underline; }
a{ text-decoration: none; }
.lt{ text-decoration: line-through; }
场景:
1)超连接基本上会去掉下划线 当然有的a标签是没有去掉
2)商品的原价 使用删除线
…
2.text-indent: 首行空两格
单位:em 一个em就表示一个汉字的宽度 2em
对于一个Logo来说,一般使用h1包起来,为了SEO,通常也会放一个文字在h1中。但是我们只想显示logo,不想显示文字,此时就可以让文字跑到浏览器外面去。
.ti{ text-indent: 2em; }
.logoText{ text-indent: -2000em; }
3.text-align: 设置文本在盒子中的对齐方式
left:左对齐
right:右对齐
center:居中
4.line-height: 用来设置行高
如果在一个盒子中有文本,盒子的高度和文本的行高一样,那么就垂直居中了。
可以在font属性中进行设置:font:14px/1.5 “宋体”;
p{
line-height:15px;
}
/* 设置倍数 */
h3{
line-height:1.5
}
五、层叠性
研究是对于同一个盒子来说,如果设置了多个样式,具体对对哪一个标签起作用。
1.交集选择器:
div:标签选择器
.box:类选择器
#item:ID选择器
div.box:交集选择器 表示选中div并且DIV中有一个类是box
在调试面板中,样式也是分多类的:
1)继承祖先元素的样式
2)标签有自己默认的样式 user agent stylesheet
3)我们自己写的样式
层叠性:
a.自己有样式 > 继承 > 默认的
b.行内样式 > 内部 = 外部 (就近原则)
c. ID > CLASS > DIV
d.特殊值
id 0100
class 0010
p 0001
谁的钱多算谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层叠性</title>
<!-- <link rel="stylesheet" href="./out.css"> -->
<style>
/* .father{ color: red; }
.son{ color: yellow; } */
/* .son{
color: yellow;
} */
/* .son{
color: skyblue;
} */
/* .son{ color: yellow; }
p{ color: red; } */
/* #box{ color: skyblue; } */
#box .son .x{ color: red; } /* 120 */
.father #item #y { color: yellow; } /* 210 */
#box #item #y{ color: blue; } /* 300 */
.father .son .x{ color: pink; } /* 30 */
div p span{ color: powderblue; } /* 3 */
</style>
</head>
<body>
<div class="father" id="box">
<p class="son" id="item">
<span class="x" id="y">SON</span>
</p>
</div>
</body>
</html>
六、盒子模型
一个标签是一个矩形的,就是一个盒子,盒子简单模型主要有6大属性。
盒子的内容区域:是width和height构成的区域
盒子的内填充区域:盒子内容区域与边框之间的间隙
盒子的外填充区域:边框以外的间隙
1.width和height
盒子的宽和高,width和height构成的区域
2.border: 设置盒子边框
边框的粗细 1px 2px
边框的样式 solid
边框的颜色 red
简写:border:1px solid red;
3.padding:内填充
也叫补白 内容和边框之间的间隙
padding:30px;分四个方向 也可以单独设置某个方向的padding
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
padding:20px; 四个方向的padding都是20px
padding:20px 40px; 上下padding是20px 左右padding是40px;
padding:20px 40px 60px; 上是20px; 左右是40px;下是60px;
padding:20px 40px 60px 80px; 上 右 下 左 钟表顺时针
4.margin:外填充
盒子边框之外的间隙,与padding的用法比较类似
5.background:用来设置盒子的背景
背景的颜色: background-color
背景的图片: background-image
6.一个盒子在网页上占据的空间
宽度:内容区域(width)+内填充区域(左右)+边框(左右)+外填充区域(左右)
高度:内容区域(height)+内填充区域(上下)+边框(上下)+外填充区域(上下)
七、标签分类
1.盒子的分类:
块级盒子(块级元素)
div hn p ul/ol/li/dl/dt/dd form 表格相关的
行内盒子(行内元素)
span a em strong i b lable button
行内块盒子(行内块元素)
input img
2.标签分类的属性作用
- 对于一个块级盒子(块级元素)来说,盒子模型的6大属性都起作用(width,height,padding,border,margin,background)。
- 对于一个行内盒子(行内元素)来说,width,height不起作用,margin和padding在垂直方向上不起作用,其它的都OK。
- 对于一个行内块盒子(行内块元素)来说,除了不能独占一行外,其它的特点和男盒子一样。
八.三大布局
三大布局分别为:流动布局、浮动布局、层布局
1.流动布局
流动布局:最简单,最原始,什么也不需要设置的布局,功能非常弱。
块元素盒子:独占一行,在从网页的最上面的开始
行内元素盒子:并排显示,如果一行装不了,它会自动换行。
2.浮动布局
(1)大部分标签都有默认的padding和margin,可以去掉:
*{ margin:0; padding:0 } *表示选中所有的标签 叫通配符选择器
(2)标准文档流:
对于一个块级元素来说,独占一行,盒子从网页最上面开始摆放,盒子模型的6大属性对男盒子都起作用
对于一个行内元素来说,并排显示,满一行,自动换行,也是从网页最上面开始摆放,盒子模型的6大属性,其中widht和height不起作用,margin和padding在垂直方向上不起作用
(3)浮动可以半脱离标准文档:(出国了) 只要出国了,之前的国家中的法则就有可能不适用了
1)父元素高度就变成0了 父元素高度塌陷了
2)一个盒子浮动了,他的属性会发生变化,行内元素会转变为块元素,但是块元素不会转化为行内元素
(4)浮动会造成影响:
1)浮动对父元素造成影响,让父元素的高度塌陷了
2)对兄弟元素也会造成影响
(5)如何清除浮动元素对父元素所造成的影响(清除浮动):
1)overflow:hidden overflow:溢出 hidden:隐藏 处理溢出 可以清除浮动元素对父元素所造成的影响 (小偏方)
2)手动给父元素加高度(基本不用),父元素的高度是靠子元素撑起来
4)伪类
(6)如何清除浮动元素对兄弟元素所造成的影响(清除浮动):
1)clear:both 专业用来清除浮动