没有合适的资源?快使用搜索试试~ 我知道了~
资源详情
资源评论
资源推荐
用 PxCook 自动生成代码与标注
CSS 基础
网页由三部分构成:
1. HTML:网页基本骨架,用来设计网页的结构
2. CSS:美化网页,有了样式,才能实现网页的像素级还原
3. JavaScript:动态脚本,控制页面上动态交互,动画效果,点击事件等等
CSS 基本概念
CSS(Cascading Style Sheets)层叠样式表,主要用来控制页面中的样式显示。一般来说 css
代码不能
直接使用,它是作用在标签上使用,控制的是标签的样式
层叠:css 样式可以在很多地方使用,首先检查代码中是否由样式,会把内联样式、内部样
式、外部样式
都层叠在一起,最终形成一套样式,作用在标签上。没有样式代码,默认使用浏览器的样式。
样式表:指的是 css 样式代码。指页面中在通过 css 定义的代码,包含内联样式、内部样式、
外部样式中
书写 css 样式代码。
注意:所有的标签默认是没有样式
网页的样式来源
浏览器默认样式
h 标签、p 标签、a 标签等等这些标签浏览器在渲染时会默认自动添加一些样式,不同浏览器默
认样
式一点点差别。而标签本身时没有样式
浏览器用户自定义的样式
浏览器默认给每个标签设置了样式,浏览器还提供了用户可以在设置里面去更改默认的样式。
比
如:可以调整字体大小,字体类型。
内联样式(自己开发)
直接在标签里面添加 style 属性,在属性值中书写 css 样式代码。每一个标签上 style 只控制当
前标签
语法:好处:
哪儿需要在哪儿添加即可
缺点:
代码结构和样式混淆
同一个样式多个标签使用,每个标签都需要书写
内部样式(自己开发)
在 head 标签里面添加 style 标签,在 style 标签中通过选择器添加 css 样式
语法:
好处:
结构和样式分离
结构清晰,便于后期维护
可以进行批量设置标签的样式
缺点:
结构和样式没有完全分离,还在一个文件中
外部样式(自己开发)
先创建后缀名为 .css 文件,在这个文件中通过选择器来书写样式代码,再再 head 标签里面通
过 link
标签引入 css 文件
语法:
好处:
<p style="css 属性 1:css 属性值 1;css 属性 2:css 属性值 2;"></p>
<head>
<style>
选择器{
css 属性 1:css 属性值 1;
css 属性 2:css 属性值 2;
css 属性 3:css 属性值 3;
}
</style>
</head>
<link rel="stylesheet" href="连接需要引入的 css 文件">结构和样式完全分离,可以省略很多冗余
代码
以后可以将 css 文件进行压缩,减少体积,优化网页
注意:在相同选择器时,内联的优先级最高,内部和外部采用就近原则
选择器
标签选择器
直接使用标签名作为选择器,默认不指定范围,找到的是页面中所有的标签
语法:
类选择器
类选择器可以重复使用的,可以多个标签共享一个样式(class 名)
通过标签上的 class 名去定位的标签,标签上的 class 可以设置多个,中间使用空格隔开,多
个 class
的样式层叠到一起
语法:
如果选择器中间没有空格,多个选择器组合起来使用,代表并且的意思
注意:相同选择器后面盖住前面的样式
标签名{
css 样式代码
}
.class 名{
css 样式代码
}
.op.oa{
css 样式代码
}
<p class="op oa"></p>ID 选择器
通过标签上 id 名去找到对应的标签
id 是唯一,精准定位,只能找到一个,不能重复
id 的命名规则:
以数字、字母、_ 和-构成
不能以数字开头,不能包含特殊符号
语法:
注意:id 选择器慎用,以后 js 会通过 id 名操作标签
选择器的优先级(权重)
在同一个标签上,优先级:id>class>标签
在同一位置上相同的选择器,后面的样式层叠掉前面样式
相同选择器:内联权重最大,内部和外部采用就近原则,离标签最近的优先作用
背景样式
backgroud-color
:设置背景颜色
单词
#十六进制
rgb(0~255,0~255,0255)
background-image :设置背景图片
语法:
注意:背景颜色和背景图片同时存在时,图片盖住颜色
background-repeat :设置背景图片是否平铺
repeat:默认值,x 轴和 y 轴都平铺
repeat-x:x 轴平铺
repeat-y:y 轴平铺
剩余84页未读,继续阅读
asdfgh12484
- 粉丝: 0
- 资源: 5
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0