目录

• 1 CSS 快速入门
• • 1.1 CSS 的介绍
  • 1.2 CSS 的组成
• 2 基本语法
• • 2.1 CSS 的引入方式
  • 2.1.1 内联样式
  • 2.1.2 内部样式
  • 2.1.3 外部样式
  • 2.2 注释
  • 2.3 选择器
  • • 2.3.1 基本选择器
    • 2.3.2 属性选择器
    • 2.3.3 伪类选择器
    • 2.3.4 组合选择器
  • 2.4 总结
• 3 CSS 案例-头条页面
• • 3.1 案例效果
  • 3.2 案例分析
  • • 3.2.1 边框样式
    • 3.2.2 文本样式
• 4 CSS案例-登录页面
• • 4.1 案例效果
  • 4.2 案例分析
  • • 4.2.1 表格标签
    • 4.2.2 样式控制
    • 4.2.3 盒子模型

1 CSS 快速入门

1.1 CSS 的介绍

• CSS（Cascading Style Sheets）：层叠样式表
• 用于设置和布局网页的一种计算机语言。告知浏览器如何渲染解析页面元素

1.2 CSS 的组成

• 选择器：选择 HTML 元素的方式。可以使用签名、class属性名、id等多种方式
• 样式声明：用于给 HTML 元素设置具体的样式。格式是属性名：属性值
• 格式：

选择器 {属性名:属性值;属性名:属性值;属性名:属性值;
}

• 举例：

h1 {color: red;font-size: 5px;
}

2 基本语法

2.1 CSS 的引入方式

2.1.1 内联样式

• 在标签中通过 style 属性来控制样式，只能影响当前这一行
• 格式：

<标签 style="属性名:属性值; 属性名:属性值;">内容

• 举例：

滴滴滴

• 效果如下：
  

2.1.2 内部样式

• 在 标签中通过
  • 举例：

  
  
  
  
  啦啦啦
  哒哒哒
  
  
  

  • 效果如下：
    

  2.1.3 外部样式

  • 在 标签中通过 标签来引入独立 css 文件，可以影响不同的文件
  • 格式：

  rel：表示“关系 (relationship) ”，属性值指链接方式与包含它的文档之间的关系，引入css文件固定值为stylesheet。href：属性需要引用某文件系统中的一个文件。
  

  • 举例：

  
  
  
  蹦蹦炸弹！！！
  
  
  

  css 样例

  div{color: red;font-size: 50px;text-align: center;
  }
  

  2.2 注释

  1. 什么是注释
  • 注释是用于解释说明程序的
  2. 注释的格式

  /*注释内容*/
  

  3. 注释的特点
  • 被注释掉的样式，不会被浏览器解析
  4. 举例

  /* 设置h1的样式 */
  h1 {color: blue;background-color: yellow;border: 1px solid black;
  }
  

  2.3 选择器

  1. 什么是选择器
  • 一个 HTML 文件中会存在很对个元素，如果想对不同的元素添加不同的样式，就需要使用选择器了。通俗点，选择器就是用来选择指定元素的
  2. 选择器的分类
     

  2.3.1 基本选择器

  

  • 举例：

  
  
  
  
  啦啦啦
  哒哒哒
  蹦蹦炸弹
  花车颠啊颠
  纳西妲睁开眼
  
  
  

  • 效果如下：
    

  2.3.2 属性选择器

  

  • 举例：

  
  
  
  
  用户名:
  密   码:
  邮   箱:
  
  
  

  • 效果如下：
    

  2.3.3 伪类选择器

  
  

  • 举例：

  
  
  
  
  百度一下
  
  
  

  • 效果如下：
    • 未访问状态
      
    • 已访问状态
      
    • 鼠标悬浮状态
      
    • 选中状态
      

  2.3.4 组合选择器

  
  

  • 举例：

  
  
  
  
  小时候
  乡愁是一枚小小的邮票
  我在这头
  母亲在那头
  长大后
  乡愁是一张窄窄的船票
  我在这头
  新娘在那头
  一切都是命运
  一切都是烟云
  
  
  

  • 效果如下：
    

  2.4 总结

  1. CSS的引入方式有三种，建议使用外部样式表。
  2. 注释类似于java多行注释。
  3. 选择器是CSS的重要部分：
     1. 基本选择器：可以通过元素，类，id来选择元素。
     2. 属性选择器：可以通过属性值选择元素
     3. 伪类选择器：可以指定元素的某种状态，比如链接
     4. 组合选择器：可以组合基本选择器，更加精细的划分如何选择

  3 CSS 案例-头条页面

  3.1 案例效果

  

  3.2 案例分析

  要想实现这个界面，首先要进行页面布局，然后再填充文本、图片、超链接

  3.2.1 边框样式

  

  • 举例：
  • 效果如下：
    

  3.2.2 文本样式

  

  • 举例：

  
  
  
  
  一切都是没有结局的开始
  一切都是稍纵即逝的追寻
  一切欢乐都没有微笑
  一切苦难都没有泪痕
  微信
  微信
  微信
  
  
  

  注意：
  文字垂直使用center发现无法控制，所以这里使用了百分比

  • 效果如下：
    

  4 CSS案例-登录页面

  4.1 案例效果

  

  4.2 案例分析

  4.2.1 表格标签

  

  • 举例：

  
  
  
  
  姓名
  性别
  年龄
  数学
  语文
  张三
  男
  23
   90
  李四
  23
  95
  98
  总分数
  373
  
  
  

  • 效果如下：
    

  4.2.2 样式控制

  

  • 举例

  
  
  
  
  用户名：
  春
  夏
  秋
  冬
  
  
  

  4.2.3 盒子模型

  • 盒子模型是通过设置元素框与元素内容和外部元素的边距，而进行布局的方式。
    
  • 内外边距的设置取决于所在视角，而我们一般经常使用的是外边距
    
    
  • 举例：