没有合适的资源?快使用搜索试试~ 我知道了~
css课堂笔记前端css课堂笔记
需积分: 11 0 下载量 102 浏览量
2022-08-05
20:21:34
上传
评论
收藏 1.65MB PDF 举报
温馨提示
试读
13页
css课堂笔记
资源详情
资源评论
资源推荐
一 、引言
1.1 CSS概念
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言
的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以
静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
二、 CSS简介
2.1 介绍
CSS :全称:Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
多个样式可以层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的
应用优先级高的,不冲突的共同作用
2.2 作用
修饰美化html网页。
外部样式表可以提高代码复用性从而提高工作效率。
html内容与样式表现分离,便于后期维护。
2.3 规范
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
/*
Author: 流云
Version: 1.0
*/
2.4 基础语法
选择器{属性:值;属性:值….. }
注意事项:
请使用花括号来包围声明
如果值为若干单词,则要给值加引号
多个声明之间使用分号;分开
css对大小不敏感,如果涉及到与html文档一起使用时,class与id名称对大小写敏感
三、 CSS导入方式
3.1 内嵌方式
把CSS样式嵌入到html标签当中,类似属性的用法
3.2 内部方式
在head标签中使用style标签引入css
3.3 外部方式
将css样式抽成一个单独文件,使用者直接引用
3.4 @import
在页面中引入一个独立的单独文件
<div style="color:blue;font-size:50px">This is my HTML page. </div>
<style type=“text/css”> //告诉浏览器使用css解析器去解析
div{color:red;font-size:50px}
</style>
创建单独文件 div.css
内容示例:div{color:green;font-size:50px}
引用语句写在head标签内部
<link rel="stylesheet" type="text/css" href=“div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型,告诉浏览器使用css解析器去解析
href:css文件地址
link和@import方式的区别:
link所有浏览器都支持,@import某些版本低的IE不支持
@import是等待html加载完成才加载
@import不支持js动态修改
四、 CSS选择器
主要用于选择需要添加样式的html元素
4.1 基本选择器
元素选择器: 在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}
id选择器: 给需要修改样式的html元素添加id属性标识,在head中使用style标签引入在其中声明
id选择器: #id值{属性:属性值}
class选择器:给需要修改样式的html元素添加class属性标识,在head中使用style标签引入在其
中声明class选择器: .class名{属性:属性值}
备注:以上基本选择器的优先级从高到低:id选择器,class选择器,元素选择器
4.2 属性选择器
<style type="text/css">
@import url("div.css")
</style>
该内容放在head标签中
<style type="text/css">
span{color: red;font-size: 100px}
</style>
创建id选择器:
<div id="s1">hello,everyone!</div>
<div id="s2">hello,everyone!</div>
<div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
#s1{color: red;font-size: 100px}
#s2{color: green;font-size: 100px}
#s3{color: blue;font-size: 100px}
</style>
创建class选择器:
<div class="s1">hello,everyone!</div>
<div class="s2">hello,everyone!</div>
<div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰:
<style type="text/css">
.s1{color: purple;font-size: 100px}
.s2{color: pink;font-size: 100px}
.s3{color: yellow;font-size: 100px}
</style>
剩余12页未读,继续阅读
人工智能_SYBH
- 粉丝: 4w+
- 资源: 200
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0