CSS基础

1.CSS的概述

CSS（Cascading Style Sheets）： 层叠样式表

层叠：多个样式可以作用在同一个html的元素上，同时生效

用于设置和布局网页的一种计算机语言。告知浏览器如何渲染觉醒页面元素

CSS的组成

选择器：选择HTML元素的方式。可使用标签名，class属性值，id值等多种方式（筛选具有相似特征的元素）

样式声明：用于给HTML元素设置具体的样式。格式是 属性名：属性值

格式：

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

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

css注释 

/*  ... */

只在css作用域可用

html注释为

入门案例

实现步骤：

1.新建一个html文件

2.在标签中编写一个

标签，内容为：我真帅

3.在标签中编写一个

我真帅

浏览器开发者工具

打开浏览器，鼠标右键点检查

CSS好处：

1. 功能强大

2. 将内容展示和样式控制分离

        降低耦合度。解耦

        让分工协作更容易

        提高开发效率 

2.CSS的引入方式

1.内联样式

在标签内使用style属性控制样式，只能影响当前这一行

格式：

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

    
    


hello css

2.内部样式 

在head标签内，定义style标签，style标签的标签体内容就是css代码，可以影响当前文件

格式：

    
    
  



div1
div2

3.外部样式 

定义css资源文件。  在head标签内，定义标签，引入外部的资源文件(独立css文件)，可以影响不同的文件

格式：

例：

css文件：

div{
    color: red;
    font-size: 20px;
}

html文件：

    
    
  


div1
div2

3.CSS选择器

 一个HTML文件中会有很多个元素，如果想对不同的元素添加不同的样式，就需要使用选择器，选择器就是用来选择指定的元素的（筛选具有相似特征的元素）

1.基本选择器

例：

    
    
    


div1

div2
div3

div4
div5

2.属性选择器 

例：

    
    
    


用户名： 

密码： 

邮箱： 

 

3.伪类选择器

 

例：

    
    
    


百度一下

4.组合选择器

例：

    
    
    



  

    
aa
    
bb
  



  

    
cc
    
dd
  


span 

段落