CSS基础语法
- 格式:选择器{属性1: 值1; 属性2: 值2; …}
- 基本样式(属性)
- width:宽
- height:长
- background-coclor:背景色
- 长度单位:
- px:像素
- %:百分比
比喻:外容器(电脑屏幕)=400px 当前容器50%=200px
外容器(电脑屏幕)=600px 当前容器50%=300px
- CSS注释:/* 注释的内容 */
快捷键:Ctrl + /; Shift + Al
CSS样式的引入方式
- 1.内联(行内、行间)样式
在html标签上添加style属性来实现 - 图例
<div style="width: 100px; height: 100px; background-color: aquamarine;">jjj</div>
- 2.内部样式
在< style>
标签内添加的样式,< style>< /style> 一般写在head部分
优点:内部样式的代码可以复用(其他相同标签也可以使用),符合W3C的规范标准:尽量让结构和样式分开处理 - 3.外部样式
- 引入一个单独的CSS文件,name.css
- 引入方法:
- 通过link标签引入外部资源,rel属性指定资源和页面的关系,href属性指定资源的地址,< link> 标签只能存在于head部分,可以出现多次
<link rel="stylesheet" href="***.css">
- 通过 @import方式引入,这种方式有很多问题,不建议使用
<style>
@import url('***.css');
</style>
CSS中的颜色表示法
- 单词表示法
- 十六进制表示法:#000000 #ffffff
- RGB三原色表示法:rgb(数1,数2,数3)[rgba(附加透明色) ]
取值范围:0~255
html颜色代码 - 获取颜色的工具(可以提取指定的颜色)
1.提取颜色下载地址:https://www.baidufe.com/
2.photoshop工具
(一个简单的获取颜色的方法:登录QQ,使用Ctrl + Alt + a截屏的时候会显示颜色的值)
CSS背景样式
1.background-color:背景颜色
2.background-image:背景图片
- 展示性的图片通常用< img>,装饰性的图片(比如做一个小图标、背景等)用background-image
- 使用时要为该属性设置一个URL值:url(背景地址)
- 默认会水平和垂直方向都铺满背景图
3.background-repeat:背景图片的平铺方式
- repeat-x:x轴平铺
- repeat-y:y轴平铺
- repeat:x、y都进行平铺,默认值
- no-repeat:都不平铺,不平铺时,若图片大小小于背景大小,则图片默认会在背景的左上角
4.ackground-position:背景图片的位置
支持的单位:
- x、y:背景左上角坐标为(0px,0px),x和y的值可正可负
- 单词:x轴有left、center、right(左中右);y轴有top、center、bottom(上中下)
- 百分比
5.background-attachment: 背景图片随滚动条的移动方式
- 有两个可选值:
- scroll:默认值,默认情况下,背景会随滚动条滚动,当滚动到超过图像的位置时,图像就会消失。(采用默认值时,背景的位置background-position是按照当前元素进行偏移的)
- fixed:背景图片固定不动,但容器会随滚动条移动(背景的位置是按照浏览器进行偏移的)
- 写法