CSS笔记——千锋Ghost老师_2019前端入门

CSS基础语法

1. 格式：选择器{属性1: 值1; 属性2: 值2; …}
   属性：
   • width、height：长度单位有两种表示：px、%
   • background-coclor：背景色
2. CSS注释：/* 注释的内容 */
   快捷键：Ctrl + /； Shift + Alt + a

CSS样式的引入方式

1. 内联（行内、行间）样式
   在html标签上添加style属性来实现

   <div style="width: 100px; height: 100px; background-color: aquamarine;">块1</div>
   

2. 内部样式
   在< style>标签内添加的样式，< style>< /style> 一般写在head部分
   优点：内部样式的代码可以复用，符合W3C的规范标准：尽量让结构和样式分开处理
   
   

3. 外部样式
   引入一个单独的CSS文件，name.css
   引入方法：
   1）通过< link>标签引入外部资源，rel属性指定资源和页面的关系，href属性指定资源的地址，< link> 标签只能存在于head部分，可以出现多次
   2）通过 @import 方式引入，这种方式有很多问题，不建议使用

   <!--方法一-->
   <style>
   	<link rel="stylesheet" href="***.css">
   </style>
   
   <!--方法二-->
   <style>
   	@import url('***.css');
   </style>
   

CSS中的颜色表示法

1. 单词表示法
2. 十六进制表示法：#十六进制
3. RGB三原色表示法：rgb(数1，数2，数3)
   html颜色代码

一个简单的获取颜色的方法：登录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. background-position：背景图片的位置
   支持的单位：
   • x、y：背景左上角坐标为（0px,0px），x和y的值可正可负
   • 单词：x轴有left、center、right；y轴有top、center、bottom
   • 百分比
5. background-attachment：背景图片随滚动条的移动方式，有两个可选值：
   a)scroll：默认值，默认情况下，背景会随滚动条滚动，当滚动到超过图像的位置时，图像就会消失。（采用默认值时，背景的位置background-position是按照当前元素进行偏移的）
   b)fixed：背景图片固定不动，但容器会随滚动条移动（背景的位置是按照浏览器进行偏移的）

CSS边框样式

1. border-style：边框样式
   取值：solid（实线） | dashed（虚线） | dotted（点线）
2. border-width：边框大小
3. border-color：边框颜色，可以设置透明颜色transparent。

也可以针对某一条边框进行单独设置：
例如border-right-style、border-top-color、border-left-width，即在中间加上一个表示方向的单词。

CSS文字样式

1. font-family：字体类型
   • 英文字体：Arial…
   • 中文字体：宋体、微软雅黑（默认）…

   <style>
   	#p1{
          font-family: 宋体 微软雅黑;}
      #p2{
          font-family: 'Courier New', Courier, monospace;}
   </style>
   

【注】

• 可以设置多个字体类型
  多个字体类型的设置目的：作为备选方案，即当用户计算机中没有第一种字体的时候，会显示为设置的第二个类型。
• 引号：
  当字体名中有一个或多个空格，或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

2. font-size：字体大小
   • 默认大小是16px
   • 写法：可以直接具体写**px（为了更好地实现对齐，字体大小一般设置为偶数），也可以通过单词的方式进行设置（但不建议）

3. font-weight：字体粗细
   只有两种显示效果，正常和加粗。有两种写法：
   1)normal（默认）、bold
   2)数字：100~ 900之间的成百的整数，100~ 500效果为normal，600~900效果为bold

4. font-style：字体样式
   normal（正常）、italic（斜体）
   【注】oblique也是表示斜体，用的比较少。
   两个斜体的区别：italic 带有倾斜属性的字体才可以设置倾斜操作；
   oblique 没有倾斜属性的字体也可以设置倾斜操作。
   所以italic比较符合规范。

5. color：字体颜色
   
   

CSS段落样式

1. text-decoration：文本装饰
   取值
   • 下划线：underline
   • 删除线：line-through
   • 上划线：overline