CSS笔记

CSS基础语法

• 格式：选择器{属性1: 值1; 属性2: 值2; …}
• 基本样式(属性)

1. width:宽
2. height:长
3. background-coclor:背景色

• 长度单位:

1. px:像素
2. %:百分比
   比喻:外容器(电脑屏幕)=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
• 引入方法：

1. 通过link标签引入外部资源，rel属性指定资源和页面的关系，href属性指定资源的地址，< link> 标签只能存在于head部分，可以出现多次

<link rel="stylesheet" href="***.css">

2. 通过 @import方式引入，这种方式有很多问题，不建议使用

<style>
	@import url('***.css');
</style>

• *link和@import的区别

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：背景图片固定不动，但容器会随滚动条移动（背景的位置是按照浏览器进行偏移的）

• 写法