CSS 基础入门

CSS

引言：学习前端基础知识。第二课 CSS 基础知识。

时间：2017年11月22日

作者：JustDo23

html_css_js

01. 基础知识

1. CSS 是用来为结构化文档添加样式的一种计算机语言。
   • Cascading Style Sheets 即层叠样式表
   • CSS 最主要的目的是将文件的内容和显示分隔开来
   • CSS 可以外部引用故复用性强提高工作效率
   • CSS 可以静态修饰网页同时可以配合脚本动态格式化网页
   • 层叠 就是对一个元素多次设置同一个样式最终使用最后一次设置的属性值。

02. 样式语法

1. 简单代码

   
   
   
   
     
     
     
     
   
   
   
     
   这是一个段落。单独强调。
   
   
   
   

2. CSS 样式由选择符和声明组成，而声明又由属性和值组成。

   

   css_grammar
   • 选择符：又称选择器，指明网页中要应用样式规则的元素。
   • 声明：被大花括号包裹，属性与值之间用冒号分隔，多条属性用分号分隔。

03. 插入位置

1. 内联式

   
     
     
   这里使用内联式。
   
   

   • css 直接写在 HTML 标签中

2. 嵌入式

   • 嵌入式必须写在之间
   • 嵌入式一般写在之间

3. 外部式

   • 属性href指定外部样式文件
   • 外部样式文件扩展名.css
   • 外部文件中直接指定样式

   span { font-size: 12px; }
   

4. 优先级

   • 就近原则即离被设置元素越近优先级越高
   • 一般情况下，权值相同 内联式 > 嵌入式 > 外部式

04. 选择器

  



  标签选择器。
  
类选择器。
  
ID选择器。
  
子选择器。第一代应用。其他代不应用。
  
  
后代选择器。第一代应用。其他代同样应用。
  
  伪类选择器。鼠标滑过触发。
  
分组选择器。同一组使用同一颜色

• 属性 ID 是唯一的所以ID选择器只能在文档中使用一次。
• 属性 class 可以同时指定多个类名用空格分隔。
• 伪类选择器可以为标签的某种状态设置样式。兼容性差。

css_selector

05. 特性

1. 继承性：有些属性可以继承；有些属性不会被继承。

2. 特殊性：权值

   • 标签 的权值为 1
   • 类 选择符的权值为 10
   • ID 选择符的权值最高为 100

   p{color:red;} /*权值为1*/
   p span{color:green;} /*权值为1+1=2*/
   .warning{color:white;} /*权值为10*/
   p span.warning{color:purple;} /*权值为1+1+10=12*/
   #footer .note p{color:yellow;} /*权值为100+10+1=111*/
   

3. 层叠性：相同权值情况下，后设置样式覆盖之前设置样式，就近原则。

4. 重要性： 使用 !important 语句将权值提升至最高。

06. 文字排版

• 2em 的意思就是文字的2倍大小。

07. 元素分类

1. 分类

   • 块状元素
     • 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
     • 元素的宽度和高度和行高以及顶和底边距是可以设置。
     • 默认情况下元素宽度和父容器的宽度相同。
   • 内联元素也称为行内元素
     • 和其他元素在同一行。
     • 元素的宽度和高度以及顶和底边距是不可设置。
     • 元素的宽度是包裹内容的宽度，不可改变。
   • 内联块状元素
     • 同时具备块级元素和内联元素的特点。
     • 和其他元素在同一行。
     • 元素的宽度和高度和行高以及顶和底边距可以设置。

2. 改变：

   • 属性 display:block 将元素设置为块级元素
   • 属性 display:inline 将元素设置为行内元素
   • 属性 display:inline-block 将元素设置为内联块状元素

08. 盒模型

[图片上传失败...(image-1c1fa7-1520935055978)]

• 元素内容和边框之间的内间距，称为填充。
• 元素与元素之间的外间距，称为边界。
• 元素整体占位宽度 marginLeft + paddingLeft + width + paddingLeft + marginRight

09. 小结

• 层叠样式表语法结构 , 插入位置 , 选择器 , 元素分类
• 盒模型
• 继续学 CSS 基础进阶

10. 参考

1. 慕课网 HTML+CSS基础课程
2. W3School