没有合适的资源?快使用搜索试试~ 我知道了~
CSS笔记-011
需积分: 0 0 下载量 128 浏览量
2022-08-03
16:42:27
上传
评论
收藏 509KB PDF 举报
温馨提示
试读
17页
1.简介盒子模型是网页布局的基础,将页面中所有的元素都看作成一个盒子,盒子都包含以下几个属性:width 宽度height 高度border 边框margin
资源推荐
资源详情
资源评论
CSS,主讲:汤小洋
一
、
CSS
简
介
1.什么是CSS
CSS:CascadingStyleSheet层叠样式表
是一组样式设置规则,用于控制页面的外观样式
2.为什么使用CSS
实现内容与样式的分离,便于团队开发
样式复用,便于网站的后期维护
页面的精确控制,让页面更精美
3.CSS作用
页面外观美化
布局和定位
二
、
基
本
用
法
1.CSS语法
选择器:要修饰的对象(东西)
属性名:修饰对象的哪个属性(样式)
属性值:样式的取值
2.CSS应用方式
<head>
<style>
选择器{
属性名:属性值;
属性名:属性值;
}
</style>
</head>
也称为CSS引用方式,有三种方式:内部样式、行内样式、外部样式
2.1
内
部
样
式
也称为内嵌样式,在页面头部通过style标签定义
对当前页面中所有符合样式选择器的标签都起作用
2.2
行
内
样
式
也称为嵌入样式,使用HTML标签的style属性定义
只对设置style属性的标签起作用
2.3
外
部
样
式
使用单独的.css文件定义,然后在页面中使用 link标签 或 @import指令 引入
使用link标签链接外部样式表文件(推荐)
type属性可以省略
@import指令导入外部样式表文件
三
、
选
择
器
1.基础选择器
1.1
标
签
选
择
器
也称为元素选择器,使用HTML标签作为选择器名称
以标签名作为样式应用依据
1.2
类
选
择
器
<linkrel="stylesheet"type="text/css"href="CSS样式文件的路径">
<style>
@import"CSS样式文件的路径";
@importurl(CSS样式文件的路径);
</style>
使用自定义名称,以 . 号作为前缀,然后通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用依据
注意事项:
调用时不能添加 . 号
同时调用多个类选择器以空格隔开
类选择名称不能以数字开头
1.3ID
选
择
器
使用自定义名称,以 # 号作为前缀,然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用依据,一对一的关系
2.复杂选择器
2.1
复
合
选
择
器
标签选择器和类选择器、标签选择器和ID选择器,一起使用
必须同时满足两个条件才能应用样式
2.2
组
合
选
择
器
也称为集体声明
将多个具有相同样式的选择器放在一起声明,使用逗号隔开
2.3
嵌
套
选
择
器
在某个选择器内再设置选择器,通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
注:使用 空格 时不区分父子还是后代,使用CSS3中新增的 > 时必须是父子关系才行
2.4
伪
类
选
择
器
根据不同的状态显示不同的样式,一般多用于 <a> 标签
四种状态:
:link未访问的链接
:visited已访问的链接
:hover鼠标移动到链接上,即悬浮在链接上
:active选定的链接,被激活
注:默认超链接为:蓝色、下划线
2.5
伪
元
素
选
择
器
:firstletter为第一个字符添加样式
:firstline为第一行添加样式
:before在元素内容的最前面添加内容,需要配合content属性使用
:after在元素内容的最后面添加内容,需要配合content属性使用
3.选择器优先级
3.1
优
先
级
行内样式>ID选择器>类选择器>标签选择器
原因:首先加载标签选择器,再加载类选择器,然后加载ID选择器,最后加载行内样式
后加载的会覆盖先加载的同名样式
3.2
内
外
部
样
式
加
载
顺
序
就近原则
原因:按照书写顺序依次加载,在同优先级的前提下,后加载的会覆盖先加载的同名样式,所以离的越近越优
先
3.3!important
可以使用!important使某个样式有最高的优先级
四
、
常
用
CSS
属
性
1.字体属性
定义字体相关的样式
剩余16页未读,继续阅读
资源评论
巴蜀明月
- 粉丝: 29
- 资源: 303
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功