1. 什么是css?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言;通俗来讲:就是用于美化HTML标签,相当于对页面进行化妆。
2. 标签选择器
标签选择器,根据指定的标签名称,找到当前界面所有的该名称的标签,然后设置属性
标签 { 属性:值;}
特点:标签选择器定义之后会经页面所有的元素都执行这个标签样式;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="keyword" content="标签选择器">
<meta name="description" content="标签选择器">
<link rel="stylesheet" type="text/css" href="#">
<title>标签选择器</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>
3. 类选择器 class 点击打开链接
语法格式: .自定义的类名 {属性:属性值 ;} 类选择符号用" . "表示
特点: 谁调用,谁生效;
一个标签可以调用多个类选择器; (一个标签可以定义多个类名)
多个标签可调用同一个类选择器;(如果类名相同的情况下,其他标签可以同时使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-css类选择器.html</title>
<!--
类选择器,根据指定class找到对应的标签,然后设置属性
1,格式:
.类名{
属性:值;
}
2,注意点 命名规范:
(1),class命名,不能以数字开头
(2),class命名格式包括字母、数字、下划线
(3),不能是标签的名称
(4),在编写id选择器时,一定要在class前面加上.
(5),在同一界面中class命名可以重复
(6),class是专门给某个特定的标签设置样式的
(7),在html中每个标签可以同时绑定多个class,但是id是唯一的
格式:<标签名称 class="类名1 类名2 ...> </标签名称>"
-->
<style>
.p1{
color: red;
}
.p2{
color: burlywood;
}
.p3{
color: greenyellow;
}
.p4{
color: cyan;
}
.para1{
color: green;
}
.para2{
font-size:50px;
}
</style>
</head>
<body>
<h1>成功法则</h1>
<p class="p1">迟到毁一生</p>
<p class="p2">早退穷三代</p>
<p class="p3">按时上下班</p>
<p class="p4">终成高富帅</p>
<br>
<p class="para1 para2">我是段落</p> /*一个标签可以调用多个类选择器(一般最多调用2个)*/
</body>
</html>
4. ID选择器 id
id 选择器是根据标签中的id属性值进行选取来设置样式 ,用“ # ”表示。
语法格式: #自定义名称 { 属性:属性值;}
特点: 一个ID选择器在一个页面只能出现一次。如果使用两次或两次以上,不符合w3c规范,JS调用会出问题。
一个标签只能调用一个ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID类选择器.html</title>
<!--
id选择器,根据指定id找到对应的标签,然后设置属性
1,格式:
#id的属性名 {
属性名称:属性值;
}
2,ID选择器命名规范:
(1),id命名,不能以数字开头
(2),id命名格式包括字母、数字、下划线
(3),不能是标签的名称
(4),在编写id选择器时,一定要在id前面加上#
(5),在同一界面中id命名不能重复
(6),仅仅是为了设置样式,一般不会用id,因为id是留给js开发用的
-->
<style>
#id1{
color: red;
}
#id2{
color: lightcoral;
}
#id3{
color: greenyellow;
}
#id4{
color: purple;
}
</style>
</head>
<body>
<h1>成功法则</h1>
<p id="id1">迟到毁一生</p>
<p id="id2">早退穷三代</p>
<p id="id3">按时上下班</p>
<p id="id4">终成高富帅</p>
</body>
</html>
5. 通配符选择器 *(不推荐使用)
语法格式: * {属性:属性值;}
特点: 给当前页面所有的标签设置相同的样式; (不推荐使用会增加浏览器的解析和服务器的负担)
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>通配符选择器*</title>
<style type="text/css">
* {
color: red;
font-size: 300px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>好好学习,天天向上</h1>
<p>好好学习,天天向上</p>
<div>我要成功</div>
<span>你一定可以的</span>
</body>
</html>
6. 交集选择器友情链接
语法格式:标签+类class / ID选择器 { 属性:属性值;}
既满足于使用了某个标签,又满足了使用类class或id选择器称之为 “交集选择器”。
第1个必须是标记选择器,第2个必须是class选择器或ID选择器 (既 、又关系);
两个选择器之间不能有空格,必须连续书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>交集选择器</title>
<style type="text/css">
.content {
font-size: 50px;
}
div.content { /*交集选择器*/
/*问题:如果我想把div标签中的字体颜色改为红色,但p标签中的字体颜色不变该怎么写?*/
color: red;
}
</style>
</head>
<body>
<div class="content">越努力,越幸运!</div>
<p class="content">爱笑的人运气都不会太差!</p>
</body>
</html>
语法格式: 元素1+空格+元素2 { 属性:属性值;} (中间用空格相连)
后代选择器基本要求要满足是 包含(嵌套)关系;
特点: 后代选择器 无限制隔代;
后代选择器不需要相匹配元素之间要有严格的父子关系.父在前子在后
元素之间自由组合;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
.tab li span{
color: red;
}
/*.tab span { 这样写也是可以的,相匹配元素之间不需要有严格的父子关系
color: red;
}*/
h2 {
color: yellow;
background-color: green;
font-size: 30px;
}
</style>
</head>
<body>
<h1 style="color: red; font-size: 35px;">知识点:</h1>
<h2>所谓“后代选择器”:又称“包含选择器”,顾名思义就是选择某元素或某元素组后面的后代</h2>
<strong>范例:</strong>
<div class="tab">
<ul>
<li>青春就是这样,好得像是无怎样度过都会被浪费。</li>
<li> 世界上唯一不变的就是变化,世界上唯一可能的就是不可能。</li>
<li>你总是说青春从不曾永远,而那时候的我们,就是最好的我们。</li>
<li><span> 最容易令人感到温暖和惊喜的是陌生人,因为你对他没有期望。</span></li>
<li>最容易令人感到心寒和悲哀的是亲人,因为你爱他们。</li>
</ul>
</div>
</body>
</html>
8. 子元素选择器
语法格式:元素 > 元素 {属性:属性值;} 中间用符号“ > ”
特点:与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素;
选中直接下一代元素
9. 并集选择器
语法格式:选择器1,选择器2,....{ 属性:属性值;} 选择器之间用“ , ”隔开
并集选择器是各个选择器通过逗号连接而成的任何形式的选择器(包括标记选择器、class类选择器、id选择 器等),都可以作为并集选择器的一部分;如果某些选择器定义的样式完全相同或部分相同就可以利用并集 选择器为他们定义相同的css样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-css并集选择器.html</title>
<!--
并集选择器
1,格式:
选择器1,选择器2,...{
属性:值;
}
2,注意点:
(1),选择器之间利用,连接
(2),选择器可以是标签名称,也可以是id、class名称
-->
<style>
.ht,.para{
color: red;
}
</style>
</head>
<body>
<h1 class="ht">我是头</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
9. 字体类型 font-family
10. 文本属性 font
字体样式风格:font-style : normal正常 / oblique倾斜 / italic斜体;
字体粗细:font-weight:700(粗) 400(正常 细); 可以用数字100-900(整倍数)定义字体粗细
字体大小:font-size: 50px ;
字体类型:font-family:"微软雅黑"
font属性合写: font : normal 700 35px "微软雅黑"; (中间用空格隔开,如果字体样式风格是正常的话可忽略不写)
11. 样式表写法
1. 内嵌式写法: 直接写在head标签中;
特点:样式只实现于当前页面,没有真正实现结构表现分离;
1 <head>
2 <style type=”text/css”>
3 样式表写法
4 </style>
5 </head>
2. 外链式写法: 也是写在head标签中;
样式: <link rel="stylesheet" href="文件路径"> 重点
特点: 谁调用谁生效,范围广,真正实现结构表现分离;
3. 行内样式写法: 直接写在标签中;
<p style="color:red; font-size:35px;">我一定会成功</p>
特点:作用仅限于当前标签,范围小,结构表现混在一起(不推荐使用);
12. 块元素
典型代表:div、p、h1-h6、ul、li ......
特点: ① 独占一行; ② 可以设置宽高;
③ 在嵌套(包含)关系下,子块元素宽度在没有定义的情况下和父块元素宽度默认保持一致;
13. 行内元素
典型代表: span、a、strong、em、del ......
特点: ① 在一行上显示(不独占行);
② 不能直接摄者宽高(元素的宽高就是内容撑开的宽高,由其内容决定) ;
14 . 行内块元素(内联元素)友情链接
典型代表: img、 input
特点: ① 在一行上显示; ② 可以自定义宽高;
15. display
1. 如何将行内元素转换为块元素?
display : block;
2. 如何将块元素转换为行内元素?
display:inline;
3. 如何将块、行内元素转换为行内块元素?
display : inline-block;
16. css三大样式之层叠性
当多个样式作用于同一个(同一类)标签上时,总是执行后面的代码(后面代码层叠前面的代码、浏览器的解析顺序是 从上而下)。
17. css三大样式之继承性 友情链接
继承性发生的前提是嵌套(包含)关系,即子元素可以继承父元素的属性;
文字的所有属性(颜色、字体、大小、风格、粗细、行高)都可以继承;
特殊情况: h 系列标签文字的大小不能继承;
a 标签字体颜色不能被继承;
18. css三大样式之优先级 友情链接
优先级是指:不同类别样式之间的权重比较;
浏览器默认样式 < 标签选择器 < class类选择器 < id选择器 < 行内样式 < !important
0 1 10 100 1000 1000以上
100个标签选择器也比不过 1 个class类选择器。
同一级别中后写的样式会覆盖掉先写的样式。
19. 优先级的特点 友情链接 zhw9
1. 继承的权重为 0 .
2. 权重会叠加 .
CSS 优先级法则:
A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式不如后来指定的CSS 样式;
E 在同一组属性设置中标有“!important”规则的优先级最大;
20. 链接伪类
1. a:link {属性:值;} 设置 链接a标签的 默认样式,有的浏览器不兼容所以建议直接使用 a 标签;
2. a:visited {属性: 值;} 设置 链接a标签访问之后的状态;(一般不用)
3. a:hover {属性:值;} 设置 当鼠标经过或放到链接a标签上时的显示状态;(常用)
4. a:active {属性:值;} 设置 当链接a标签被激活(鼠标点击和释放之间发生得事件)显示的状态;(常用)
严格遵循书写顺序: ①link ② visited ③ hover ④ active
--------------------------------------------------------------------------------------------------------------------
5. a:focus{属性:值;} 设置 当元素获取焦点时为其设置特殊样式;
文本修饰线: text-decoration
text-decoration: none; 没有任何装饰,正常文本默认值;
text-decoration: underline; 下划线;
text-decoration: line-through; 删除线;
21. background 背景友情链接
属性 | 值 | 属性作用 |
background-color | 颜色 | 完全填充背景的颜色 |
background-image | url ( 图片位置) | 用作背景的图片 |
background-position | left(左)、right(右)、center(中间)、top(顶部)、bottom(底部) | 确定背景图片的位置 |
background-repeat | repeat(平铺默认)、no-repeat(不平铺)、repeat-x(x轴方向平铺)、repeat-y(y轴方向平铺) | 确定背景图片是否重复平铺 |
background-attachment | fixed (固定不滚动)、scroll (滚动) | 确定背景图片是否随页面滚动 |
-------------------------------------------------------------------------------------------------------------------------------
★★ background 背景属性连写:(url 为必写项)
22. 行高 line-height
行高:基线与基线之间的距离称之为行高;
行高:文字高度+上下边距=基线与基线之间的距离;
☆☆☆ 当一行文字行高和父元素高度一致的情况下,实现垂直居中显示;
行高的单位:px、em、%、2(单纯数字);
23. 盒模型
content : 内容;
border : 边框;
padding :内边距:内容到边框之间的距离称之为内边距;
margin : 外边距:边框以外的称之为外边距;
24. 盒模型 之 “边框 border” 友情链接 友情链接
border : 即边框,有三个属性;
border-style : 边框的线型 solid 实线、dashed 虚线、dotted 点线;
border-width :边框的粗细(宽度);
border-color :边框的颜色;
△ border可以分边定义样式:
如: border-top-style:solid;
border-top-width:3px;
border-top-color: red;
☆分边的属性连写为: border-top:solid 3px red;(合写没有顺序要求,但线型为必写项)
☆☆☆ 如果四个边框的属性值相同:
border:solid 3px red;
25.盒模型之 内边距 padding
内容(content)距边框(border)之间的距离称之为“内边距”;
padding-top:上内边距; padding-right:右内边距;
padding-bottom:下内边距; padding-left:左内边距;
连写样式 | 意义 |
padding:30px; | 上右下左内边就有都为30px |
padding:30px 20px; | 上下内边距为30px,左右为20px |
padding:30px 20px 15px; | 上内边距为30px,右左内边距为20px,下内边距为15px |
padding:30px 20px 15px 35px; | 上内边距为20px,右内边距20px,下内边距为15px,左内边距为35px |
影响盒子宽度的因素有:① 内边距影响盒子的宽度; ② 边框的宽度影响盒子的宽度;
盒子的宽度= 定义的宽度+左右内边距(padding)的宽度+左右边框(border)的宽度
继承的盒子水平方向一般不会撑大:
包含(嵌套)的盒子,如果子盒子没有定义宽度,给子盒子设置左右内边距,一般不会撑大盒子。
26.盒模型之 外边距 margin
边框以外的都为外边距;
连写样式 | 意义 |
margin:30px; | 上右下左外边就有都为30px |
margin:30px 20px; | 上下外边距为30px,左右为20px |
margin:30px 20px 15px; | 上外边距为30px,右左外边距为20px,下外边距为15px |
margin:30px 20px 15px 35px; | 上外边距为20px,右外边距20px,下外边距为15px,左外边距为35px |
垂直方向外边距合并
☆ 垂直方向的两个盒子,如果一个设置下外边距,一个设置上外边距,那么取的是 设置较大的值。
嵌套的盒子外边距塌陷
解决方法: 1. 给父元素盒子设置边框;(不推荐使用)
☆ 2. 给父元素盒子设置 overflow: hidden ; (溢出:隐藏;) 使用此方法会触发一个叫 bfc 的
格式化上下文,可以解决此问题。