李洪强和你一起学习前端之(5)css书写位置 优先级和伪类
亲爱的,时间过得真快,不知不觉我们一起学习前端已经4天了,这4天的时间里,我们是不是收获很大呢,每当我们学习一个新的知识点的时候,每当我们做出一个新的东西来的时候,我们是不是欣喜若狂,世界从来否不会辜负努力的人,每一步都算数,做iOS开发的我,我也能证明自己可以做前端,最近公司让我做前端的页面,一开始是恐惧的,这个我怎么会,但是谁都不是一开始天生就会前端的,这几天我一直没有休息好,前天晚上,为了学习前端,我一直到凌晨的三点点才睡,加上最近一直以来睡不好就头疼的毛病,真的让我吃不消,没有休息好的情况下,昨天上班,真的很累,昨晚上一直学习到凌晨,还好睡了个好觉,现在感觉好多了,我相信: 明天的你,一定会感谢今天努力的你
下面开始今天的学习吧!
1 复习昨天的知识
概念: 层叠样式表或者叫级联样式表
内嵌式写法:
<head>
<style type = "text/css"></style>
</head>
语法:
选择器: {属性:值;}
选择器就是选择标签的一个过程
属性: 赋值 描述
color Color: red; 文字颜色
Font-size Font-size:20px; 文字大小
Font-family font-family:宋体; 文字字体
Font-weight Font-weight:bold(700)| normal; 文字加粗
Font-style Font-style:italic | normal; 文字斜体(italic)
Background-color Backgroundcolor: red; 背景颜色
Width/height Width: 12px; 宽度和高度
Text-align Text-align:center; 文字居中
Text-indent Text-indent:2em; 首行缩进
Margin Margin:0 auto 盒子居中显示
1.1基础选择器
1.1.1标签选择器
P{属性:值;}
类选择器
定义:
.fontcolor{color:red}//一定要前面的点写上
调用:
<p class = "fontcolor">文字</p>
特点:
->谁调用,谁改变
->一个标签可以同时调用多个类样式
->多个标签可以同时调用一个类样式
命名规范:
-> 不推荐使用汉字定义类名
-> 不推荐使用标签名或者属性名定义类名
-> 不能使用纯数字或者特殊字符("_"除外)定义类名
1.1.2id选择器
定义:
#自定义名称{属性: 值;}
调用:
标签通过 id = "自定义名称"
注意:
页面中的表id名称不能重复
同一个标签不能调用多个id样式
1.1.3通配符选择器
*{属性: 值;}
将页面中所有的标签都选中
1.2符合选择器
1.2.1标签指定式选择器
p.类选择器{属性: 值}
既...又(既是...又是标签)
1.2.2后代选择器
选择器 选择器{属性: 值}
//注意: 选择器和选择器之间有空格
标签之间的关系属于嵌套关系,
1.2.3并集选择器
选择器,选择器,选择器{属性: 值}
是并列的关系
p,div{
color: red
}
注意: 标签之间不一定是并列关系! ! ! !
复习一下标签
| 属性 | 赋值 | 描述 |
| color | Color:red | 设置文字颜色 |
| Font-size | Font-size:20px | 设置文字大小 |
| Font-family | Font-family:宋体 | 设置文字字体 |
| Font-weight | Font-weight: 数字/bold(700以上) normal | 设置文字加粗 |
| Font-style | Font-style:italic/normal | 设置文字斜体 |
| background-color | background-color:red | 设置背景颜色 |
| width/height | width:12px | 宽度和高度 |
| Text-align | Text-align:center | 设置文字居中 |
| align:(html的写法) | align = @"center" | 设置表格居中 |
| Text-indent | Text-indent:2em | 设置首行缩进 |
| Margin | Margin:0auto | 让盒子居中显示 |
今天新的内容
2 Css书写位置介绍
2.1 内嵌式写法
2.2外联式写法(通过link标签)
html: 结构
css: 结构
<link rel = "stylesheet" href = "">
新建一个文件,后缀名以.css命名(css文件)
在html页面中通过
<link rel = "stylesheet" href = "">
标签将css文件引入
2.3行内式写法
通过给标签设置style属性来设置样式
最后一个样式后面可以加也可以不加";"
还有没有其他的方法?
2.4Css书写方式之间的区别
内嵌式写法:
代码维护性比较差,没有实现css代码与html结构的完全分离
影响的范围只有当前页面
行内式写法:
代码可以维护性极差,css代码和html结构没有实现分离(写后台的程序的可能会这样写)
影响的范围只有当前标签
外联式写法:
代码可维护性高,css与html结构完全分离
影响范围广,当前整个网页站点
3 HTML标签的分类
根据显示方式不同进行的分类
3.1块级元素(有宽度,有高度)
典型代表
div,p,li,h,l...
特点:
(1) 元素自己独占一行显示(与宽度无关)
(2) 可以设置宽度和高度
(3) 当嵌套一个块级元素,子元素如果不设置宽度,那么该子元素的宽度为父元素的宽度
3.2行内元素
典型代表
Span,a,font,strong
特点:
元素在一行上显示
行内元素不能直接设置宽度和高度
3.3行内块元素
典型代表: image,input(表单控件)
特点:
(1)元素在一行上显示
(2)可以设置宽度和高度
3.4元素之间的转换
Display:inline 将元素转化为行内元素
Display: inline-block 将元素转化为行内块元素
DIsplay:block 将元素转化为块元素
4 Css特性
4.1层特性
样式的覆盖.样式的层叠性与样式的调用顺序没有关系,与样式的定义顺序有关
层叠性发生的前提: 样式冲突
4.2继承性
继承性发生的前提是标签之间属于一种嵌套关系
文字颜色可以实现继承
文字大小可以实现继承
字体可以实现继承
行高可以实现继承
总结: 与文字有关的属性都可以实现继承
特殊性:
<a href = "#"></a> 不能继承父元素中的文字颜色(层叠掉了)
<h1></h1> 标题标签不能继承父元素中的文字大小
4.3优先级
默认样式 < 标签选择器 < 类选择器 < id选择器 < 行内样式
< !important
0 1 10 100 1000
1000以上
4.3.1优先级的特点
继承的权重为0
4.3.2权重会叠加
5 伪类介绍
a:link{
属性: 值
}
超链接默认状态下的样式
a{
}与
a:link{
} 实现的效果是一样的
a:link{
属性: 值;
}
超链接访问过后的样式
a:visited{
属性:值;
}
鼠标放在超链接上的样式
a:hover{
}
超链接激活状态下的样式(点住不放的颜色)
a:active{
}
获取焦点(光标)的时候的样式(跟表单控件配合使用)
a:focus{
}
注意: 以上几个属性必须按照此顺序来写,否则的话设置之后没有效果!
补充属性:(设置超链接下面的横线)
text-decoration
None: 不显示下横线
underline: 显示下横线
line-through: 贯穿线
6 背景(background)
6.1 Background-color
背景颜色
6.2 background-image(背景图片)
注意: 设置背景图片的时候一定要设置宽度和高度
6.3 background-repeat 设置背景平铺
repeat (默认值)
no-repeat (不平铺)
repeat-x (横向平铺)
repeat-y (纵向平铺)
6.4background-position (设置背景位置)
设置具体指: left|right|top|bottom|cneter
设置居中:
设置具体值的时候不区分先后顺序
设置具体数字的时候,第一个值代表水平方向,第二个值代表垂直方向
6.5background-attachment (设置背景是否固定)
Scroll(默认值)滚动
fixed(图片固定)
背景属性联写:
没有数量限制和先后顺序限制
去掉列表前面的显示方式
今天的学习结束了,别忘了好好练习和吸收!
